The purpose of the new HTML5 feature is to improve the support of embedding, such as video and audio, and provide developers and end users with simple programming and a better user experience. Now the Internet world is waiting, and the browser can support the new version of HTML5 when it is updated. HTML5 has been supported by many browsers, such as Safari, Chrome, FireFox, Opera, IE9. It is backward compatible, but today's browsers cannot be fully compatible with HTML5.
Upgrading a website to HTML5 is quite easy as it is compatible with HTML4. You just need to modify your DOCTYPE. This new update helps make things simple, so you can now update all your websites and they won't crash because all HTML4 tags are still 100% supported in HTML5.
HTML5 forms define more than a dozen new input types and features, and these new elements allow programmers to program more easily. Let’s talk about these new features below.
1. Input box placeholder
In HTML4, developers use JavaScript and jQuery as input box placeholders, while in HTML5, developers can easily display a placeholder. What are placeholders? Placeholder is the prompt text that appears in the input box. When you click on the input field, it will automatically disappear. You can prompt the text sample that the user should enter in the text box. Rather, there is an E-mail input box where you can set the placeholders [email protected] and it will disappear when you click them.
IE FF Safari Chrome Opera iPhone Android
- 3.7+ 4+ 4+ 11+ 4+ -
2. Automatic focus events
HTML5 just load a web page, and the web page will automatically move the focus to a specific input box, just like JavaScript. What is the difference? Since it's just an HTML tag now, users can easily disable this property in their browser. Not all browsers support autofocus, but browsers don't simply ignore this property. If you want all browsers to work, just add new HTML5 autofocus properties and then check if the browser supports autofocus. If you can, you don’t have to use an autofocus script. If you don’t have one, you need to add an autofocus script.
FF IE Safari Chrome Opera iPhone Android
- 4+ 4+ 3+ 10+ - -
3. HTML newly defined input type
1. Email
The first input box I'm going to say is the email address. Older browsers that do not support new types also simply treat them as a text box, and 99% of users will not notice this change until they submit the form (there will be form validation at this time).
2. Website
Let’s talk about the URL input box. If you need to enter a URL, you expect to enter it like http://www.Vevb.com. Now in the URL type input box, a variable virtual keyboard will appear like in the iPhone. Users can easily enter slashes and .com. Similarly, users are unaware of these before submitting the form.
3. Numbers
To get matching numbers in HTML4, you have to use jquery scripts to help with verification. HTML5 adds numeric types. Some additional properties (optional): Min: Specifies the minimum input number that can be accepted by the input box. Max: is the maximum number allowed to enter. Step: The legal interval for the attribute input domain, the default is 1.
As shown in the figure above, only numbers are allowed (in most cases, these will not be noticed until an error is prompted when submitting), only 0, 2, 4 are legal (6 is illegal because step is 10, and legal is 0, 10, 20...).
4. Digital slider
HTML5 allows you to use a new type called range, and the input box becomes a slider. Your website form can use a slider. Its attribute tag is the same as the number type, just change the type setting type='number' to type='range'.
5. Calendar
The best new additions to date, date picker types named date and datetime (there are other additional date/time types such as time, week, month, and local calendar). Many JavaScript frameworks such as jQuery UI and YIU already have these controls, but adding a calendar selector is quite annoying. HTML5 defines a new local date selector that does not have to include using scripts on the page. As of now, Opera is the only one that fully supports this feature, and for other browsers, you can do an alternate script in case that the browser does not support it. However, ultimately, all browsers will be updated.
6. Search
HTML5 adds search input box type. This is nothing, but it is a good change for some users. It can simply circle the edges of the input box automatically, and when you start typing, there will be a small X to the right. Not all browsers currently support it.
7. Color
HTML5 also defines the color of the type, which allows you to select a color and return the hexademical value. Opera11 is the only browser that supports this type of browser. However, there shouldn't be many people using this type, so it's not a big problem to not support it.
8. Form Verification
The most exciting new feature is form verification. Most developers do form validation, either client or server. Maybe HTML5's form validator may not replace your server-side verification, but it will certainly eventually replace your client-side verification. The problem with JavaScript verification is that it is easy for users to bypass it, it can be easily bypassed just by disabling JavaScript. Now that HTML5 is concerned, you don’t have to worry about this. The errors are all native HTML5 prompts and JavaScript is not used.
IE FF Safari Chrome Opera Iphone Android
- 4+ 5+ 10+ 9+ - -
9. Required fields
HTML5's form validation is not limited to the type of verification field, it also allows a new extra tag to be called, required. This new property allows developers to verify that the input box is filled in without using JavaScript.
Summary: The above updates are crucial to shorten development cycles and enhance user experience. Once all browsers accept HTML5, the next generation of websites will exceed anyone’s expectations. HTML5 is not a hassle, it will greatly help developers and improve user experience.