My OperaWeb Forms 2: Forming a better form
Thursday, April 3, 2008 7:50:30 AM
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 and above have 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 the latest public build of Opera.
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
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
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
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 ...
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
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...
If the user does not enter something in this, a warning will show up and the form will not get submitted.
Autofocus
This will focus and place the cursor on this input when the page is loaded.
Datalists
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.
will make the entry disabled(cannot be edited) and will not be successfull, ie, the entry will not be submitted.
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,
will mark the background black and font color white of only the required attributes. Pretty usefull, huh?
The Repetition Model
Update: It seems that the repitition model will in all probability not be included in the final HTML5 specification.
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:
Note: Opera 9.5 and above have 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 the latest public build of Opera.
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 usefull, huh?
The Repetition Model
Update: It seems that the repitition model will in all probability not be included in the final HTML5 specification.
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:
You must be 
mrgrieves # Friday, December 19, 2008 12:49:59 PM
<form>
<input type="text" required="required" />
<input type="submit" value="Submit" />
<input type="submit" value="Cancel" name="cancel" />
</form>
If I click cancel, I'm still forced to enter something into the text box. Does web forms provide any way to override this?
Shwetank Dixitshwetankdixit # Sunday, December 21, 2008 5:26:44 AM
So the above form is a bit incorrect in assuming that you'll have a cancel button. In fact its basically just a submit button with a name as 'cancel'. Actually there is nothing in the specification amounting to 'cancel' (most cancel buttons involve some kind of javascript) and it is encouraged not to have a cancel button.
If a person wants to cancel the action, they can simply press the 'stop' button on the browser.