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 type="text."

Some of the new form attributes are very handy and will, eventually replace a mountain of JavaScript in the wild. Attributes like placeholder, for default text in a form input, autofocus, designed to indicate which form element should receive focus when a page is visited and required, which indicates a field in a form that must contain a value for the form to be submitted, all represent common form tasks on the web that are currently handled by JavaScript. With well-written fallback code these form attributes are safe to use as older browsers just ignore the unknown attributes.

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 type="color", for a color picker, or the new meter, which indicates usage, and progress, which indicates the progress through a task,  elements is to get away from using complicated JavaScript for this common functionality. Unlike something like the placeholder attribute, which can be rewritten in just a few lines of pure JavaScript, something like a color picker or progress indicator relies on a combination of CSS, HTML, JavaScript and associated images. The benefit of having native controls would therefore be significant.

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.org" >
    <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.