Support for HTML5 forms
This is the part that is a little tricky but, this should give you an excuse to download a browser you have never tried before. In my HTML5 Forms test page, only Opera supported most of the new form features with Chrome 11 coming in a distant second and Firefox 4 not far behind. While Opera is not my go-to-browser (Chrome is), I suggest you download Opera and try it out – if anything, try it out so you can experience most of the new things HTML5 Forms is bringing to the table.
Apple’s Safari lags way behind in support and Internet Explorer 9 support for HTML5 Forms is non-existant (they will not support new web features that have not been “standardized”).
It should be noted that I only have a couple of mobile devices in which to test HTML5 Forms. I do not have any Android or Symbian based devices.
Remember, if you want to see what browsers support which fields, please visit my HTML5 Forms test page.
<form name="theForm" novalidate></form>
The FORM tag now comes with a new attribute. HTML5 form validation is on by default because of the newer INPUT types and attributes that may require HTML5 Forms’ built-in validation. You can choose to use your own validation by simply adding the novalidate attribute to the form tag.
The form elements, types andattributes
<input type="text" name="theField" autofocus />
The autofocus attribute allows you to focus on a certain field.
<input type="text" name="theField" placeholder="Write something here." />
Email INPUT type
<input type="email" name="theField" />
Url INPUT type
<input type="url" name="theField" />
Just like email addresses, validating URLs can be a pain. Enter the new url INPUT type. When you attempt to submit an invaild URL, the browser (currently: Chrome 10+ and Firefox 4+) will let you know in the same manner as email. However, unlike email, a user could still submit an empty url field unless the new required attribute is used (more on this later). Opera 11+ simply adds http:// in front of the string for the user. As of this article’s publishing date, none of the browsers that support url, check to see if a URL’s domain extension was added by the user. Odd.
Number INPUT type
<input type="number" name="theField" min="0" max="14" step="2" value="4" />
The new number INPUT type lets you control what number a user inputs into a field. Using number’s attributes min, max and step, you can control the lowest number, highest number or skip a certain amount of numbers – respectively. In the example above the user can only choose 0,2,4,6,8,10,12 0r 14.
Tel INPUT type
<input type="tel" name="theField" />
From my experience with Mobile Safari, the tel (telephone) INPUT type brings up a number pad so you can select numbers and characters for a phone number. In every other browser tested, it simply renders a text box.
Range INPUT type
<input type="range" name="theRangeField" min="0" max="100" step="1" value="0" />
Maybe instead of letting users type in numbers, you can add a range INPUT field to your form. The browser renders a slider in which a user can adjust. For more visual clarity (and with the onchange event), you can output the value to a text box or use the next two HTML5 Forms features.
<meter name="theFieldMeter" min="0" max="100" value="0"></meter>
Meter gives you a graphical reprsentation of whatever number value you input into it.
<output name="theFieldOutput" onforminput="this.value = theField.valueAsNumber"></output>
Output automatically gives you the value of whatever you tell it. In this case, it gives me the value of the range field “theRangeField”. You can use this to give the total of however many fields you wish. For example, I have three text boxes (tBox1, tBox2, tBox3), in those text boxes I type 3, 40 and 100 respectively. While I type, the total amount is outputted to the output field (3 then 43 and then 143). This can be achieved dsing the new event, onforminput. Simply type in: this.value = tBox1.valueAsNumber + tBox2.valueAsNumber + tBox2.valueAsNumber.
Output, for the moment, isn’t visually represented by a text box or some other type of form field. In fact, nothing is there until you type (or use the range slider in the example I provided in test page) something. If I were to clear those fields, then the output field would show 0.
<progress name="theProgressField" value="30" max="100"></progress>
What exactly is progress for? This is a good question. The best explanation for progress that I found is that progress is meant to measure the completion rate of an event. For example, if you submit a form through AJAX, the progress bar could tell you how much time is left. What progress does not do is show how much space is left in something, like a hard drive or web hosting space. For this, you would use meter.
<input type="text" list="datalistTest" /> <datalist id="datalistTest"> <option label="apple" value="apple" /> <option label="apricot" value="apricot" /> <option label="peach" value="peach" /> <option label="pineapple" value="pineapple" /> </datalist>
Many sites who have search engines of some type, use search suggestions which usually consist of a text box with a DIV placed below the text box. For example, when a user types in a keyword, using the onkeyup/onkeydown events the word is submitted through AJAX to PHP. However it’s coded, the PHP sends back results which are populated into the DIV. Datalist makes this operation far more simple by removing the need for a DIV and the event listeners the user would need to navigate from the text box to the list using the arrow keys and pressing enter when they have found what they need. All you need is the text box for user input. You can tie the text box to the datalist using the list attribute.
In Firefox 4, when you type, results will be displayed. However, in Opera (11.10 as of this article), once you click on the datalist field (and if you are not using AJAX and a server side script to retrieve results), the entire list will be displayed until you start typing.
Search INPUT type
<input name="theField" type="search" />
Search simply adds an ‘X’ to the end of the field when you type in a keyword. You can click the ‘X’ to clear the field – nothing fancy.
<input name="theField" type="text" required />
<input name="theField" type="file" multiple="multiple" />
By using the multiple attribute in a file field, you can select multiple items for upload onto a server. Currently, you can only select one item.
The following HTML5 Forms INPUT types are only supported by Opera 9+ (with very little support in Chrome 10+)!!!
Color INPUT type
<input name="theField" type="color" />
Clicking on this field will pop up an OS integrated (except in Linux) color box where you can choose what color you want. The color returned is the six-digit hexadecimal RGB color.
Dates & times INPUT types
<input type="date" /> <input type="month" /> <input type="week" /> <input type="time" /> <input type="datetime" /> <input type="datetime-local" />
It’s a real shame that these and the color picker are not broadly supported because, in my opinion, these are sorely needed.
By clicking on the date fields, a pop up calendar will appear. From there, you can click on the day, week or month that you want. The date format returned is: YYYY-MM-DD. The week format returned is (for example): YYYY-W21. Times can be chosen by using a box with up/down arrows placed next to the box. Datetime is in UTC format.
I’ve said this once already but, it’s a real shame that HTML5 Forms has such shoddy support. There’s a lot of really cool features that have been added to something both developers and users take for granted. I only hope that browser developers start to move on their support for HTML5 Forms.
I didn’t include a few things in this article including more form attributes including formnovalidate and formaction. You can read about these here.