HTML5 was initiated by WHATWG (Web Hypertext Application Technology Working Group). The initial name was Web Application 1.0. This standard absorbed the Web Forms 2.0 standard and was adopted by W3C organizations to merge into the next generation of HTML5 standard.
Preface
As the language with the most extensive programming language today, HTML language has the characteristics of easy-to-use, fast, and multi-browsing platform compatibility. However, with the progress of the times, the HTML standard has stagnated. This time, the update of the HTML5 standard, which is still under development, can be said to have brought new vitality to this markup language. This article will focus on Web Forms 2.0 in HTML5, i.e. the form part.
Forms are common controls (sets) in web pages. From website registration and login to enterprise data management systems, there are basically forms. The reason why forms are so important is mainly because they are responsible for the task of updating and interacting with a large number of users and web background data. Web developers can be said to love and hate web forms. They love their convenient function of collecting and organizing data, and they hate their functions to a large extent. Some functions that seem ordinary on the final website users, such as input type checking, form verification, error prompts, etc., all developers need to spend a lot of effort to use JavaScript and DOM programming to meet these naturally required functional points. With the popularity of Ajax, some JavaScript tool libraries such as Dojo, YUI, etc. have provided convenient JavaScript Widgets or APIs to reduce the burden on developers.
HTML5 Web Forms 2.0 is a comprehensive improvement on current web forms. While maintaining the simple and easy-to-use features, it adds many built-in controls or control attributes to meet users' needs and reduces developers' programming. In my opinion, HTML5 has mainly improved the current web form in the following aspects:
<input type=url></input><input type=email></input>
<input type=date></input>
<select data=http://domain/getmyoptions></select>
<input type=text required></input><input type=number min=10 max=100></input>
<submission><field name=name index=0>Peter</field>
<field name=password index=0>password</field>
</submission>
I will use HTML5's new form system to make a simple user registration interface, including username, password, date of birth, confidentiality issues, etc. The code is as follows:
<! doctype html><html> <head> <style> p label { width: 180px; float: left; text-align: right; padding-right: 10px } table { margin-left: 80px } table td { border-bottom: 1px solid #CCCCCC } input.submit { margin-left: 80px } </style> </head> <body> <form action='/register' enctype=application/x-www-form+xml method=post> <p> <label for='name'>ID (please use email to register)</label> <input name='name' required type='email'></input> </p> <p> <label for='password'>Password</label> <input name='password' required type='password'></input> </p> <p> <label for='birthday'>Date of birth</label> <input type='date' name='birthday' /> </p> <p> <label for='gender'>Nationality</label> <select name='country' data='countries.xml'></select> </p> <p> <label for='photo'>Personal avatar</label> <input type='file' name='photo' accept='image/*' /> </p> <table> <thead> <td><button type=add template=questionId>+</button> Confidentiality Question</td> <td> Answer</td> <td></td> </head> <tr id=questionId repeat=template repeat-start=1 repeat-min=1 repeat-max=3> <td><input type=text name=questions[questionId].q></td><td><input type=text name=questions[questionId].a></td><td><button type=remove>Delete</button></td> </tr> </table> <p> <input type='submit' value='send' class='submit' /> </p> </form> </body></html>Since the HTML5 standard is still under development, different browsers support HTML5 features quite limited. Among them, Opera supports it better in form. This example runs normally on Opera9. The renderings are as follows:
This example uses some new HTML5 form elements, such as the email type input box (ID) and the date type input box (date of birth). And a duplicate model is used to guide users to fill in confidentiality issues. In the upload of personalized avatars, by restricting file types, users can choose pictures for uploading content that meets standards. The drop-down selection input box for user selection of nationality is used in the form of an outreach data source. The outreach data source uses coutries.xml, and the content is as follows:
<select xmlns=http://www.w3.org/1999/xhtml> <option>China</option> <option>Japan</option> <option>Korea</option></select>
And the enctype of form is application/x-www-form+xml, that is, HTML5 XML submission. So once the form verification is passed, the form content will be submitted in XML. You will also find that if there is no value in the ID input box, or if a string of non-email type is entered, once you try to submit the form, there will be an error message, which is built-in to the browser.
HTML5's update to form controls is undoubtedly very exciting. This article describes some new features of forms, and some new features are also very exciting. I believe that with the in-depth development of standards and the further improvement of browser support for HTML5, the work of designing a simple and easy-to-use form will become very easy.