HTML5 Part 5: Forms

In the years since I started web development, my use of Forms has evolved from writing a simple email form to making a complicated Resume/CV form driven by JavaScript, AJAX and PHP. When making forms, the one thing we always have to remember is that we developers are the ones pointing the users in the right direction. Forms give us the tools to create a good user experience while making sure that the user stays on the right track.

Unfortunately, when validating forms, we had to rely on using JavaScript and/or a server-side script. However, HTML5 Forms have built-in validation tools which do not require scripting. But, don’t get too excited, you will still have to write some scripts to validate some things.

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.

Validate/novalidate

<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

Autofocus attribute

<input type="text" name="theField" autofocus />

The autofocus attribute allows you to focus on a certain field.

Placeholder attribute

<input type="text" name="theField" placeholder="Write something here." />

The placeholder attribute allows you to add a description into a field without using the value attribute or snippets of JavaScript to clear the field’s value when you focus on that field. Because you are not using the field’s value attribute for your placeholder, you don’t have to worry about whether or not something unintended gets submitted along with the rest of the form.

Email INPUT type

<input type="email" name="theField" />

Speaking from experience, it’s a real pain to make sure people write a valid email address (name@domainname.ext). Of course there are ways in JavaScript and PHP to accomplish this. With HTML5 Forms’ newest INPUT type, email, you can validate a user’s email address without taking the time to write and debug a possibly complicated script. When a user does not fill in a valid email address, the browser will alert the user (in the language the browser is using) that they must fill out a valid email address.

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

<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

<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

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

Datalist

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

Required attribute

<input name="theField" type="text" required />

With form validation on, required takes the place of JavaScript validation (checking for empty field values). The browser displays a warning message (in the language the browser is in) telling the user that the field needs to be filled out. In Firefox 4, the field is also highlighted red. This is one form attribute that was absolutely needed!

Multiple attribute

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

Some thoughts

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.

Remember, even if a browser doesn’t support one of the INPUT type features above, the browser will still render a text box. So, you can use the email INPUT type and the feature will work for the users who’s browsers support it. But, for the rest it will just be a plain old text box. Until then, have your JavaScript/Server side validation scripts handy.

Advertisements

About gopha

Gopha is a web programmer, techie and heir to several Nigerian fortunes. In his spare time he likes to game, spend time with his wife, daughters and dogs. He eats [far too much], watches TV and lift weights. He also like to take moonlit walks on the beach and sing songs next to a roaring campfire, in a white sweater with his acoustic guitar. View all posts by gopha

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: