HTML5 Tutorial - HTML5 Forms 2.0

HTML5 Tutorial - HTML5 Events

HTML5 Form 2.0

Web Form 2.0 is an extension of the HTML4 form feature. Form elements and attributes in HTML5 provide a greater degree of semantic markup than HTML4, removing a large amount of cumbersome scripts and styles required in HTML4.

The element in HTML4

HTML4 input box element uses the type attribute to specify the data type. HTML4 provides the following types:

Here is a simple example using callout tags, radio buttons, and submit buttons:

The element in HTML5

In addition to the attributes mentioned above, HTML5 introduces several new values ​​​​to the type attribute of the input box element. As listed in the table below.

Note: Please use the latest version of Opera browser to run all examples below.

##

element

HTML5 also introduces a new element

to represent different types of output results, such as output by Script written.

You can also use the for attribute to specify the relationship between the output element and other elements in the document that affect the calculation (for example, as an input source or parameter). The value of the for attribute is a space-separated list of IDs of other elements.

DEMO: http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=html5-11.htm

placeholder attribute

Introduced in HTML5 A new attribute called placeholder. This attribute on the and elements provides the user with a hint as to what can be entered in the field. Placeholder characters cannot contain carriage returns or line feeds. <p></p>The following is the simple syntax of the placeholder attribute: <p></p> <p><img src="https://img.php.cn//upload/image/160/895/147/1486445374527485.jpg" title="1486445374527485.jpg" alt="HTML5 Tutorial - HTML5 Forms 2.0"></p>DEMO: http://www.tutorialspoint.com/cgi-bin/practice.cgi?file =html5-56.htm<p style="max-width:90%" helvetica neue sc sans gb yahei sans-serif font-size: white-space: normal background-color: rgb box-sizing: border-box word-wrap: break-word></p> <p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; max-width: 100%; clear: both; min-height: 1em; color: rgb(62, 62, 62); font-family: -apple-system-font, " helvetica neue sc sans gb yahei sans-serif font-size: white-space: normal background-color: rgb box-sizing: border-box word-wrap: break-word>required attribute<span style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important; border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: 700; line-height: inherit; vertical-align: baseline;"></span></p>Now, we don’t need to use JavaScript to handle client-side validation such as an empty text box that can never be submitted. Because HTML5 introduces a new attribute called required, which can be used as follows, it will ensure that the input box has a value: <p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; max-width: 100%; clear: both; min-height: 1em; color: rgb(62, 62, 62); font-family: -apple-system-font, " helvetica neue sc sans gb yahei sans-serif font-size: white-space: normal background-color: rgb box-sizing: border-box word-wrap: break-word></p> <p><img src="https://img.php.cn//upload/image/374/263/331/1486445391374331.jpg" title="1486445391374331.jpg" alt="HTML5 Tutorial - HTML5 Forms 2.0"></p>DEMO: http://www.tutorialspoint. com/cgi-bin/practice.cgi?file=html5-57.htm<p style="max-width:90%" helvetica neue sc sans gb yahei sans-serif font-size: white-space: normal background-color: rgb box-sizing: border-box word-wrap: break-word></p>The above is the content of HTML5 Tutorial - HTML5 Form 2.0. For more related content, please pay attention to the PHP Chinese website (www.php.cn) ! <p></p> <p><br></p>