Crazy form-html5 new form elements and attributes-html5 new form elements

Last Update:2015-11-28 Source: Internet

Author: User

Tags microsoft edge

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Crazy form-html5 new form elements and attributes-html5 new form elements
Crazy form

16:44:07

Introduce the new features of html5 forms from three aspects

More flexible form structure

Controls for data submission can be placed out of the form tag. For the following code, the form element can be written outside the form element. You only need to add the form = "form1" attribute to the element, it can also be submitted to the server address specified by the form element.

<Body> <form action = "upload. php "method =" post "accept-charset =" UTF-8 "id =" form1 "> </form> <input type =" text "name =" username "value = "" form = "form1"> <input type = "submit" name = "sub" value = "submit" form = "form1"> </body>

New form Element

The elements we have learned before include "text", "button", "file", and "radio". Some new form elements are added to html5. The following lists these elements and their functions.

The email type is used to verify the email format. When a form is submitted, the email field value is automatically verified.
The url type is used to verify the URL address format. When a form is submitted, the url field value is automatically verified.
The number type provides the function of selecting numbers based on your settings. The min attribute sets the minimum value, the max attribute sets the maximum value, the value attribute sets the current value, and the step attribute sets the value for each increase, some browsers do not yet support
The range type is used in the input field that should contain numeric values within a certain range. It is displayed as a slider. The min attribute sets the minimum value, the max attribute sets the maximum value, and the value Attribute Sets the current value, if no value is set, the default value range is 1-100.
Date and Time type: HTML5 has multiple new input types available for Date and Time Selection:
Date: Select day, month, and year
Month-select month and year
Week-select week and year
Time-Select time (hours and minutes)
Datetime-select the time, day, month, and year (UTC time)
Datetime-local-Select time, day, month, and year (local time)
The search type is used to search domains, such as site search or Google search. If the results = "s" attribute is added to the search box, a search icon is added to the search box.
The tel type is used to verify whether the input is in the phone format. This element is not supported by the browser yet.
The color type provides a color picker for you to select a color and fill the selected color into this element.

The example is as follows. You can copy the code or write it yourself and view the result in the browser.

<Form action = "upload. php "method =" post "accept-charset =" UTF-8 "id =" form1 "> <br> Home Page: <input type = "url" name = "url" value = "" placeholder = "Personal Homepage" required> <br> Email: <input type = "email" name = "email" value = "" placeholder = "email" required> <br> birthday: <input type = "date" name = "date" value = "" required> <br> time: <input type = "time" name = "time" value = "" required> <br> week: <input type = "week" name = "week" value = "" required> <br> age: <input type = "number" name = "age" value = ""> <br> salary: <input type = "range" name = "range" value = ""> <br> Tel: <input type = "tel" name = "tell" value = "" placeholder = "NONE"> <br> color: <input type = "color" name = "mycolor"> <br> <input type = "search" name = "key" value = "" results = "s"> <br> <input type = "submit" name = "sub" value = "submit" form = "form1"> </form>

Browser support

Chrome:

Firefox:

Opera:

Microsoft Edge:

Well, we are praising Microsoft for its progress!

New Form attribute

In addition to the new form elements, some form attributes are added to html5.

New form attributes:

Autocomplete
Novalidate

New input attributes:

Autocomplete
Autofocus
Form
Form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
Height and width
List
Min, max, and step
Multiple
Pattern (regexp)
Placeholder
Required

In the following case, we have explained some common attributes. You can directly view the comments next to the code and then understand the meaning of the comments based on the running results of the browser.

<Body> <! -- Placeholder: used to indicate the function of autofocus when the text box is not input: used for controls to automatically obtain focus --> <input type = "search" name = "key" value = "" results = "s" placeholder = "lebao" autofocus = "true"> <input type = "button" name = "" value = "Search"> <br> <! -- Novalidate: after the required, emial, url, and Other verifications are added to the control, if you want to invalidate these verifications, you can set novalidate to tyue --> <form action = "upload. php "method =" post "accept-charset =" UTF-8 "id =" form1 "novalidate =" true "> <! -- Required: required autocomplete: When you enter some content or dual sections in the text box of a webpage, the entered content is often displayed below. This is a new feature of html5: Automatic completion, if you do not want to use this function, set it to off --> <input type = "text" name = "UserName" value = "" required autocomplete = "off"> <br> <! -- Multiple: when selecting a file, only one choice is allowed by default. After this attribute is added, you can use the mouse to select multiple files for upload --> select a file <input type = "file" name = "upload" value = "" multiple = "multiple"> <br> <! -- List: This attribute must be used with the datalist element to specify the selectable items in this text box. In addition, compared with the select element, you can also enter the --> area code: <input type = "text" name = "age" value = "" list = "list1"> <br> <datalist id = "list1"> <option value = "0312"> Baoding </option> <option value = "0311"> Shijiazhuang </option> <option value = "010"> Beijing </option> <option value = "0313"> tangshan </option> </datalist> <! -- Formaction: you can click this button to submit the processing program forcanchod to the server: you can change the method of submitting data to the server --> <input type = "submit" name = "subsave" value = "submit"> <input type = "submit" name = "subresset" value = "change" formaction = "1.php" forpolichod =" get "> </form> </body>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More