Shulou(Shulou.com)06/03 Report--

What are the enhanced Form form elements in HTML5? for this question, this article introduces the corresponding analysis and solutions in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

Among the elements enhanced by HTML5, the most noteworthy are the form elements. In HTML5, forms have been significantly trimmed up, and some of the functions that previously needed to be encoded through JavaScript can now be easily implemented without coding. Before we begin the discussion, there is one thing to note:

In HTML5, form controls can be external to one or more of the forms to which they belong. Therefore, form controls such as fieldset,label,input add form attributes to identify the form to which the form control belongs.

In HTML5:

1. The form element itself adds two new attributes: autocomplete and novalidate. The autocomplete property is used to enable the drop-down suggestion list feature, and the novalidate property is used to turn off form validation, which is useful when testing.

2.The fieldset element adds three new attributes: disable, name, and form. The disable attribute is used to disable the fieldset,name attribute used to set the name of the fieldset. The value of the form attribute is the ID of one or more forms to which fieldset belongs. As mentioned earlier, when fieldset is placed outside the form, you must set the form attribute of the fieldset tag so that fieldset can be correctly associated with one or more forms.

3. Except for the for attribute, only the form attribute is added to the label element. What's worth mentioning here is the for attribute, which I haven't really noticed before. The for property is used to specify the form controls attached to the label, so clicking on the label gives the attached form controls focus, such as:

The code is as follows:

Click Me

Click "Click Me" and the following input box will get focus.

4. The input element introduces some new types and attributes to enhance the usability of the form. These new input types, which are used to organize and categorize data, are very useful, but unfortunately no browser supports all of them well.

In addition to the original button,text,submit,checkbox,radio,select,password type, HTML5 has added the following new input types:

Color: color

Various dates: date, datetime, datetime-local, month, week, time

Email: email

Number: number

Range: range

Search: search

Tel: tel

URL type: url

You can run the following example to see the support of different browsers:

The code is as follows:

Select your favorite color:

Birthday:

Birthday (date and time):

Birthday (date and time):

Birthday (month and year):

Select a time:

Select a week:

Quantity (between 1 and 5):

Quantity (between 1 and 10):

Search Google:

Telephone:

Add your homepage:

E-mail:

The following are the newly added input properties:

Autocomplete: automatically displays previously entered information, with a value of "on" or "off". Applicable to text, search, url, tel, email, password, datepickers, range, and color types.

Autofocus: the focus is automatically obtained after the page is loaded.

Form: specifies the form to which the input belongs, which can be multiple.

Formaction: specifies the page (URL) or file on which the input is processed after the form is submitted.

Formenctype: specifies how the data is encoded after the form is submitted.

Formmethod: specifies the HTTP method that sends form data, which overrides the HTTP method of the corresponding form.

Formnovalidate: do not check the validity of the data before submission.

Formtarget: specify where to display the content of the response submitted by form.

Height, width: input box length and width, only applicable to image type.

Max,min: enter the maximum and minimum values for the value. Applies to meaningful number,range, date types.

Multiple: whether multiple values are allowed, applicable to email and file types.

Pattern: specifies the regular expression that validates the input value, for text,search,url,tel,email,password.

Placeholder: the prompt before input, applicable to text,search,url,tel,email,password.

Required: whether it is required, if not, the form cannot be submitted, applicable to text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file types.

Step: enter the step size value for automatic growth, which applies to number, range, date, datetime, datetime-local, month, time and week types.

List: a candidate list of entries that need to be used in conjunction with the datalist element. The list attribute can be used on these types: text, search, url, tel, email, date, number, range, and color, visually valid on FireFox. Look at a small example:

The code is as follows:

Favorites

The following example tries to use various properties, which can be run in different browsers to see the actual effect:

The code is as follows:

E-mail:

Image:

Enter a date before 1980-01-01:

Enter a date after 2000-01-01:

Quantity (between 1 and 5):

Select images:

Country code:

First Name:

Username:

Number:

First name:

Last name:

Although not all browsers support all types, people are encouraged to use these new types, because even if browsers do not support them, they will only degenerate into simple text input boxes.

This is the answer to the question about the enhanced Form form elements in HTML5. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.