HTML5 form new features: waiting for 12 years, we ushered in the HTML5 major revisions. While this version is still in beta and has not announced the date of its launch, HTML5 's web designers and programmers have started to focus on the latest features and have a lively discussion.
HTML5 's new features are designed to improve embedded support for multimedia such as video and audio, for easy programming and better user experience for developers and end users. Now the internet world is waiting, browser updates can support the new version of HTML5. HTML5 has been supported by many browsers, such as Safari, Chrome, FireFox, Opera, IE9, which are backwards compatible, but now the browser is not fully compatible with HTML5.
Website upgrade to HTML5 is fairly easy because it is compatible with HTML4. All you need to do is change your doctype. This new update helps make things easier, so you can update all your sites now, and they won't crash because all HTML4 tags are supported in HTML5 or 100%.
HTML5 's form defines more than 10 new input types and features that allow programmers to program more easily. Let's talk about these new features.
One, the input box placeholder HTML4 developers use JavaScript and jquery as input box placeholders, and in HTML5, developers can easily display a placeholder. What is a placeholder? PLACEHOLDER is the hint text that appears in the input box, and when you click on the input field, it disappears automatically. You can cue the text that the user should enter into the text box. Instead, there is an e-mail input box that you can set up placeholders[email protected], they will disappear when clicked.
IE FF Safari Chrome Opera iphone Android
-3.7+ 4+ 4+ 11+ 4+-
Automatic Focus event HTML5 as soon as you load a Web page, the Web page automatically moves the focus to a specific input box, just like JavaScript. What's the difference? Since it is now just an HTML tag, users can easily disable this property in their browsers. Autofocus is not supported in all browsers, but it is not simply ignored by the browser. If you want all browsers to work, simply add a new HTML5 autofocus attribute and then detect if the browser supports autofocus. If you can do not have to use auto-focus script, if not, you need to add auto-focus script.
FF IE Safari Chrome Opera iphone Android
-4+ 4+--
III. HTML New defined input type 1, e-mail The first input box I want to say is an e-mail address. Older browsers that do not support the new types simply think of them as a text box, and 99% of users will not notice the change until they submit the form (there will be a form validation at this point).
2, the website said the URL input box. If you need to enter a URL, expect the input to be like http://www.css3-html5.com. Now in the URL type input box will appear like the iphone inside a changeable virtual keyboard user can easily input slash and. com. Similarly, users are unaware of these before submitting the form. 3, digital HTML4 to get a matching number, you have to use jquery script to help verify. HTML5 increases the number type. Additional attributes are added (optional): min: Specifies the minimum input number that the input box can accept. Max: is the maximum number that is allowed to be entered. Step: Attribute input domain legal interval, default is 1.
For example, only allow to enter numbers (most of the time will not notice these, until the submission of the prompt error), only 0,2,4 legal (6 illegal because step is 10, legal is 0,10,20. ）。
4, the Digital slider bar HTML5 allows you to use a new type called range, the input box becomes a slider bar. Your Web site form can use the slider bar, and its attribute tag is the same as the number type, just change the type setting type= ' # ' to type= ' range '.
5. The best new element of the calendar table so far, the date selector type named dates and datetime (there are other additional date/time types, such as time, week, month, and local calendar). Many JavaScript frameworks such as the jquery UI and Yiu already have these controls, but adding a calendar selector is annoying. HTML5 defines a new local date selector that does not include the use of scripts on the page. As of now, opera is the only one that fully supports this feature, and for other browsers, you can make a backup script in case the browser does not support it. Eventually, however, all browsers will be updated.
6, search HTML5 added the search input box type. It's nothing, but it's a good change for some users. It can simply automatically round the input box, and when you start typing, it will have a small x on the right side. Not all browsers are currently supported.
7, color HTML5 also defines the type of color, it allows you to choose a color, return hexademical value. OPERA11 is the only browser that supports this type. However, there should not be a lot of people using this type, so not support is not a big problem.
8. The most exciting new feature of form validation is form validation. Most developers do form validation, either on the client or server side. Perhaps HTML5 's form validator may not replace your server-side validation, but it will certainly eventually replace your client-authentication. The problem with JavaScript validation is that it's easy for users to bypass it, and it's easy to bypass it just by disabling JavaScript. Now HTML5, you don't have to worry about it, the errors are HTML5 native hints, not using JavaScript.
IE FF Safari Chrome Opera Iphone andriod
-4+ 5+ + +--
9, required field HTML5 form validation is not limited to validating the type of the field, it also allows the invocation of a new additional token, required. This new property allows the developer to verify that the input box is filled without using JavaScript.
Summary: the above updates are essential to shorten the development cycle and enhance the user experience. Once all browsers have accepted HTML5, the new generation of sites will exceed anyone's expectations. HTML5 is not a hassle, it will greatly help developers to improve the user experience.
HTML5 's new form features (2)
