This article is available in Serbian/Srpski
In addition to the new semantic elements HTML5 provides several major enhancements to the way forms are handled. New elements, input types and attributes have been added to better map common web inputs.
For example, common web text formats like Email and URL can now be indicated to the browser in a meaningful way using new input types. Mobile devices are leading the way in implementing novel UI enhancements based on to these new form elements. Visit a site with an input
type="email" on an iOs device and you’ll see the following special on-screen keyboard.
What’s especially nice about these new form inputs is that they’re completely backwards compatible as all browsers treat unknown form types as
placeholder, for default text in a form input,
autofocus, designed to indicate which form element should receive focus when a page is visited and
The support outlook for the completely new form elements and input types isn’t so rosy. Polyfill solutions exist, but the whole point of looking at input
The following code sample illustrates a few of these new form enhancements in action. First is a meter created with a scale of 0 to 25 with an initial value of 10, then there’s a progress element set to 42/100 and finally there are examples of two of the new input types. Both take advantage of the required attribute and the email has a placeholder. As you can see they’re all very simply designed, so with proper support from browsers they’ll offer significant UI enhancements to web applications with very little code overhead.
<header> <h1>Forms, Forms, Forms</h1> </header> <div id="forms"> <label>Meter: <meter min='0' max='25' value='10'></meter> </label> <label>Progress: <progress max='100' value='42'></progress> </label> <input type="email" required placeholder="email@example.com" > <input type="url" required > </div>
Forms aren’t the sexiest area of HTML5 to demo, so people sometimes ignore them. I think they;’re pretty important.
People make money on the web by getting people to enter information into forms. Forms pay the bills. Anything that makes forms better is going to make the web a better place.
Take some time and look at the full suite of form enhancements. They’re pretty slick.