HTML5 Forms

One of the coolest new things in HTML5 are the forms. What makes them cool, you ask? Well, I’m glad you inquired and I’ll be happy to tell you!

First off, the nice thing about the new form elements is that they degrade gracefully; in other words, if you’re using an older browser that doesn’t recognize a new type of form, it will simply treat it as a text box rather than breaking. If it doesn’t recognize an attribute, it will simply ignore it.

For example, suppose I give one of my input boxes the autofocus attribute. If the user is viewing the page with a browser that supports that attribute, then this input box will gain focus as soon as the page loads; if not, it will be the same as if the attribute wasn’t there.

On the other hand, consider the input [input type="number"]. A modern, standards-compliant browser will show a spinbox, while an older browser will simply display a text field. Both field types serve the same purpose – getting a number from the user – but the newer type makes it more clear from the user what is desired. Going even further, we can define minimum and maximum acceptable values and the spinner will only allow numbers from within that range; in older browsers, the form will reject incorrect values placed in the text field, but obviously it’s better if we can catch the error when it’s first made rather than requiring the user to submit the form multiple times!