Using HTML5 to build the next generation of Web Form

The HTML5 was initiated by WHATWG (Web Hypertext Application Technology Group), and the first name is Web Working 1.0, which incorporates Web Forms 2. 0 of the standards, and together by the organization used by the consortium, merged into the next generation of HTML5 standards.

Objective

HTML language as today's most widely used language, with easy-to-use, fast, more browsing platform compatible features, but with the progress of the Times, the standard of HTML has stagnated, this time also in the continuous development of the HTML5 Standard update can be said to the markup language has brought new vitality. This article will focus on Web Forms 2.0 in HTML5, which is part of the form.

A form is a common control (set) in a Web page. Small to the site registration login, large to an enterprise data management system, are basically form the figure. The fact that a form is so important is mainly because it takes on a large number of tasks that interact with user and Web background data updates. Web developers, for Web forms can be said to love and hate, love is it convenient to collect, organize the function of data, hate is its function to a large extent is just this. Some of the features that users in the final Web site seem to be mediocre, such as input type checking, form checksums, error cues, and so on, require a lot of effort by developers to use JavaScript and DOM programming to satisfy these naturally needed functional points, and as Ajax is popular, Some JavaScript libraries, such as Dojo, Yui, and so on, provide handy JavaScript widgets or APIs to ease the burden on developers.

HTML5 new features for forms

HTML5 Web Forms 2.0 is a comprehensive upgrade to the current Web form, which, while maintaining easy-to-use features, adds a number of built-in control or control properties to meet the needs of the user, while reducing developer programming. In my opinion, HTML5 has made improvements to the current Web forms mainly in the following areas:

The new control type

Are you still worried about type checking, or are you distressed by the long list of regular expressions that you don't understand, and a series of new controls provided by HTML5 will naturally have type checking capabilities. For example, url input box, email input box.

<input type= "url" ></input>
<input type= "Email" ></input>

Of course, there is also a very important date input box, you know that using JavaScript and CSS to "hand" to create a date input box is very useful, such as Dojo,yui class library is all over the widget.

<input type= "Date" ></input>

As part of my painful memory, I often remember that our developers are adding a very large number of options for a select Drop-down list, most of which come from databases, such as national, provincial, and municipal lists. This thing is very cumbersome. HTML5 will support the Data property, which is to be an external source for the Select control!

<select data= "Http://domain/getmyoptions" ></select>

Improved file Upload control, you can use a control to upload multiple files, you can specify the type of upload file (accept), you may even set the maximum size of each file (maxlength). Do you see the difference between it and the file upload control provided by the general operating system, anyway, I think it's basically consistent. In HTML5 applications, file upload controls become very powerful and easy to use.

Duplicate (repeat) model, HTML5 provides a set of repetitive mechanisms to help us build some duplicate input lists, including some button types such as Add, remove, and move-up,move-down, and through this set of repetitive mechanisms, Developers can easily implement the list of edits we often see, which is a very common pattern where we can add an entry, delete an item, or move an item, and so on.

The built-in form verification system, HTML5 provides new properties for different types of input controls to control the input behavior of these controls, such as our common required required properties, and Max, Min, and so on for numeric type controls. And when you submit the form, once the checksum error, the browser will not perform the commit operation, but will display the corresponding validation error message.

<input type= "Text" required></input>
<input type= "number" min=10  max=100></input>

XML submission, we are generally common is the form of the encoding format is application/x-www-form-urlencoded. Developers are very aware of this format, data to the server side, can be easily accessed. HTML5 will provide a new data format: XML submission, or application/x-www-form+xml. A simple example is that the server side will receive the form data in XML form directly.

<submission>
   <field name= "name" index= "0" >Peter</field>
   <field name= "password" index= "0" >password</field>
</submission>