Build the next generation of Web Form with HTML5

Author：Eve Cole Update Time：2025-03-28 12:32:01

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.

New features of HTML5 form

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:

New control type
- Are you still worried about type checking, and are you still worried about the long list of regular expressions that you can't quite understand, HTML5 provides a series of new controls that will naturally have the function of type checking. For example, URL input box, Email input box, etc.
```
 <input type=url></input>
 <input type=email></input>
```
- Of course, there are also very important date input boxes. You should know that using JavaScript and CSS to manually create a date input box is still very hard. Class libraries like Dojo and YUI are also making a big deal on this widget.
```
 <input type=date></input>
```
- As part of my painful memory, I often remember that our developers wanted to add a lot of options dynamically to a select drop-down table. Most of these options come from databases, such as country, province and city lists, etc. This matter is very cumbersome. HTML5 will support data attributes and outreach data sources for select controls!
```
 <select data=http://domain/getmyoptions></select>
```
Improved file upload control, you can use one control to upload multiple files, specify the type of uploaded files (accept), and you can even set the maximum size (maxlength) of each file. Do you see the difference between it and the file upload control provided by general operating systems? Anyway, I think it is basically the same. In HTML5 applications, file upload controls will become very powerful and easy to use.
Repeat model, HTML5 provides a set of repeat mechanisms to help us build some duplicate input lists, including some button types such as add, remove, move-up, and move-down. Through this set of repeat mechanisms, developers can easily implement the edit lists we often see. This is a very common pattern. We can add an entry, delete a certain entry, or move an entry, etc.
The built-in form verification system, HTML5 provides new attributes for different types of input controls to control the input behavior of these controls, such as the required attributes of our common required items, as well as max, min, etc. provided for numeric type controls. When you submit the form, once the verification error is wrong, the browser will not perform the submit operation, but will display the corresponding verification error message.
```
 <input type=text required></input>
 <input type=number min=10 max=100></input>
```
XML Submission, what we usually use is that the encoding format of form is application/x-www-form-urlencoded. Developers are very clear about this format, and data can be sent to the server side for easy access. HTML5 will provide a new data format: XML Submission, namely application/x-www-form+xml. To give a simple example, the server will directly receive form data in XML form.
```
 <submission>
 <field name=name index=0>Peter</field>
 <field name=password index=0>password</field>
 </submission>
```

Case Study

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.

Conclusion

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.