Shwetank Dixit

If you have been been frustrated with adding javascript for routine tasks while making forms, I have some good news for you. Web Forms 2 is here to help you out! With Web Forms 2, you'll be able to make forms with much less frustration ease. So lets get right to it...

Note: Opera 9.5 beta has excellent support for Web Forms 2. But other browers have to catch up. Also, I have an example page which demos all the stuff mentioned below. You can view the example here with your Opera 9.5 beta browser.

Inputs get a new life

You can a lot more with the input tag than before.

Man, that date was easy!

Just try this in your opera 9.5 browser

<input type="date">

You'll be able to get a whole calender of the month which you can forward to different months and years. Cool, huh?

Apart from date, also try datetime, month, week, datetime-local and time.

Easy Emails:

try this

<input type="email">

This will make the the browser(using its own built-in validation) check whether the text entered looks like an email address.

Ranges and the Output atribute

No more JS for a slider! You can just write this

<input type="range" min="0" max="10">

and it will display a slider with a minimum value of 0 and a maximum value of 10.

But that not it, there is also an Output attribute which can display the output of anything youi cant. For example in the above slider, we can add this ...

<input type="range" min="0" max="10" name="a"><output onforminput="value=a.value">

This would display the sliders current value as you move it along!

Patterns

This example, straight from the draft, gives an idea of how pattern could help

<label> Credit Card Number:
 <input type="text" pattern="[0-9]{13,16}" name="cc" />
</label>

Pattern could be used to verify whether the user has inputted the answer according to the particular pattern demanded.

Required has been really required for a long time!

One of the most common things about form are the required inputs. Usually we say something like the entries marked with * are required, and then proceed to do client and server side detection for it. For those of you who hate writing JS for this, there is now an easier solution...

<input type="text" required>

If the user does not enter something in this, a warning will show up and the form will not get submitted.

Autofocus

<input type="text" autofocus>

This will focus and place the cursor on this input when the page is loaded.

Datalists

<input type="url" list="mylist">
<datalist = "mylist">
<option label = "the shoe company" value ="http://www.nike.com">
<option label = "the kickass browser company" value="http://www.opera.com">
<option label = "the best video ever" value = "http://www.youtube.com/watch?v=uxIsiTo4VJo">
</datalist>

When the user will focus on this input, a list will drop down containing the labels and URLs, and when he selects them, the value (i.e, the URL) will be entered into the input. For example, if I select "the kickass browser company" from the drop down, then "http://www.opera.com", will get entered into the box.

It is different from an actual drop down as the user is free to enter whatever he likes and is not limited by the entries he gets in the drop down.

Disabled and Readonly
Disabled and Readonly are not new, and have been part of the HTML specification, but I haven't seen a whole lot of forms with them.

<input type="text" value="somevalue" disabled>

will make the entry disabled(cannot be edited) and will not be successfull, ie, the entry will not be submitted.

<input type="text" value="somevalue" readonly>

will only make the value readonly, ie, the user cannot edit the entry. However, the entry will be submitted.

Styling forms

You can style forms based on their selectors as well. For example,

input:required{background:black;color:white;}

will mark the background black and font color white of only the required attributes. Pretty sefull, huh?

The Repetition Model

Web forms 2 introduces the Repetition model. With this, you can form blocks which can be repeated. Its a bit similar to the experience when you attach files in Gmail.

We do this by first forming a 'template' to repeat. We can also specify how many minimum or maximum times we want the template to repeat itself using repeat-min and repeat-max.

Buttons, have also undergone a change, and now with it, we can add types such as 'remove', 'add', 'move-up' and 'move-down'. Attaching these buttons to the templates will perform thier respective actions.

For an example on the repition model and as well as everything mentioned above, please see my web forms 2 demo page.

Other sources of Info on Web forms 2:

• Web Forms 2 working draft
  
• Improve your forms using HTML5!
  
• Making legacy pages work with Web Forms 2
  
• Web Forms 2 demo by Olav.dk
  
• how to use or survive WebForms2