New elements and attributes for the form

1. New Elements and attributes
1.1 New Properties
Form Properties:The subordinate elements within the form can be written anywhere on the page, and then a form property is assigned to the element, and the property value is the ID of the form, which indicates that the element belongs to the specified form. (currently only opera 10 support)
formaction Properties:You can add different formaction properties to all the submit buttons, such as Type:submit, image, and submit, so that you can submit the form to a different page by clicking on a different button. (currently no browser support)
FormMethod Property: Can be used to specify different submission pages for each form element, as well as to separate submission methods for each form element. (currently no browser support)
Placeholder Properties:The input prompt that is displayed in the text box when the text box (input type is text or textarea label) is not in the input state. Enter the specified text within its attribute value. (Currently only Safari 4, Googlechrome 3, Firefox 4)
Autofocus Properties:Adds this property to a text box, selection box, or button control that automatically gets the cursor focus when the screen opens.
There can be only one control on a page that has this property. It is strongly recommended that the control be used only if a page is used for the primary purpose of using a control, such as a search text box in the search page. (Currently only Safari 4, Googlechrome 3, Firefox 4)
List Property:An HTML 5-bit single-line text box adds an attribute value to the ID of a DataList element. The DataList element is similar to a selection box, allowing you to make a drop-down list of input values, but allow it to be entered by itself when the user wants to set a value that is not within the selection list. The element itself is not displayed, but is displayed as a prompt input when the text box receives focus. To avoid displaying errors on browsers that do not support this element, you can use CSS to set it to not display. (currently only opera 10 support)
AutoComplete Properties:The auto-complete function of auxiliary input can save the input time and convenient. You can specify "on" to display a list of data for which the alternate input is being made. Use the DataList element and List property to provide data columns for alternate input. ), "Off" and "" (not specified, using the browser's default value) three values. (currently only opera 10 support)

the type of 1.2input element (currently the most comprehensive supported is opera)
URL Type:A text box specifically designed to enter a URL address. Commits are not allowed if the text box contents are not text in the URL address format.
Email Type:A text box specifically designed to enter an email address. Commits are not allowed if the text box is not in the format of the email address, but does not check if the email address exists. The commit can be empty unless the equired attribute is added.The Multiple property allows you to enter a comma-delimited list of email addresses in the text box.
Date Type: Convenient for users to enter various dates in the form of a calendar.
Time Type:A text box that is dedicated to entering time, and checks the validity of the input time when it is submitted. Its appearance depends on the browser.
datetime type:A text box that is specifically used to enter UTC (World standard Time) time and date, and the time and date validity of the input is checked when it is submitted.
datetime-local Type:A text box that is specifically used to enter local time and date, and checks the time and date validity of the input when it is submitted.
Month Type:A text box that is specifically used to enter the month, and checks the validity of the entered month when it is submitted.
Week Type:A text box that is specifically used to enter the week number, and checks the validity of the entered week number when it is submitted.
Number Type:A text box that is specifically used to enter numbers, and when submitted, checks whether the input is a number. Has the Min, max, and step properties. In Opera's browser, it has a numeric control button to control the value so that it does not exceed the maximum minimum value, while clicking on the control button will increase or decrease by a given stride, or you can enter the value directly.
Range Type:Only text boxes that have values in a range are allowed, with the Min and Max properties (default 0 and 100), and the Step property to specify the stride length for each drag.
Search Type:A text box specifically designed to enter search keywords. differs from the text type only in appearance.
Tel Type:A text box dedicated to entering phone numbers. There is no special validation rule that does not force the entry of numbers, but developers can use the Pattern property to specify validation for the input phone number format.
Color Type:A color picker is provided to select the color.

Date pickers Type: HTML 5 has several new input text boxes that can be selected for the date and time:

date-Select Day, month, year
month-Select Month, year
week-Select Week, year
time-pick time (hours and minutes)
datetime-Select time, day, month, year (UTC time)
datetime-local-Select time, day, month, year (local time)

1.3output elements

Define different types of output, such as the result of a calculation or the output of a script. You must write it inside the form, or add a form property to it. (currently only opera 10 support)

2. Form Validation
2.1 Automatic Verification

The ability to use attributes on an element enables automatic validation to be performed when a form is submitted.
Required Properties: can be used on most input elements (except for hidden elements, picture element buttons). On commit, if the content in the element is blank, it is not allowed to commit, and the message prompt text is displayed in the browser, prompting the user that this element must enter content.
Pattern Property: Use this property for input types that need to conform to a certain format, set the property value to a regular expression in a format, and check that the content conforms to the given format when committed.
min and Max properties: The private properties of the input element for a numeric type or date type, limiting the range of input values and dates.
Step Property: controls the stride length when the value in the INPUT element is increased or decreased.

2.2 Explicit validation

Both the form element and the input element, including the select element and the textarea element, have a checkvalidity method. Call this method to explicitly validate all element content within a form or the content of a single element. The method returns the validation result in boolean form.
Both the form element and the INPUT element also have a validity property that returns a Validitystate object. The object has many properties, and the simplest and most important is the valid property, which indicates whether the contents of all elements in the form are valid or whether the contents of a single INPUT element are valid.

2.3 Canceling validation

One is the Novalidate property of the form element, which can turn off validation of the entire form.

The second is to take advantage of the formnovalidate attribute of the INPUT element or the submit element. This property allows form validation to invalidate a single input element, which can be exploited when there are fewer elements in the form that need to be validated, and the entire form validation fails when you click the button when you use the attribute on the Ubmit element. With this, you can achieve the effect of "fake commit" and "true commit".

2.4 Custom Error messages

You can use JS to invoke the Setcustomvalidity method of each INPUT element to customize the error message. (However, the browser adds a prefix to the custom prompt, such as "value * * * does not allow script on the page to use!") ”）

New elements and attributes for the form