HTML5 form elements, new input types and attributes that you should know about

Hi Guys,

Following up from my previous post in HTML5 category which talked about handling browsers for detecting HTML5 features and react accordingly, In this post we will be talking about some of the cool additions/updates made to traditional forms. We have been using Javascript to do many things for us like a number spinner box. It would be good to know that the new form input box types are there to support many things like spinners, date box, time etc out of the box.

I will be concentrating on explaining attributes and types that are supported by most of the modern browsers. IE once again is lagging behind so I will just point out that if a feature is not supported in IE. I will throw a couple of examples to handle those situations in which Internet Explorer or any other browser does not support a feature.

The Problem: Create a web form with new HTML5 input types to create a new profile

The problem looks logical to me and we will touch base on each attributes that we would use. I will also throw some links to useful resources at the end of this article.

The markup

Demo

Here is a link to form we have designed above. We will be looking into more details in a moment.

http://jaspreetchahal.org/examples/html5/html5-web-form-example.html

Browser support

Most of the above used input types are well supported in Chrome, Firefox, Opera and Safari. None of them is supported in Internet Explorer 9 or older at the time of writing.

There are many new types that I have used above that I want you to know at least. There are others as well but not that widely supported but we will touch base on those in a moment but lets.

Lets now look more closely on all the input types

The best thing for me that has happened with HTML5 is built in form validations. Isn’t that nice. Lets check what new input types we’ve used and how they work. We will also touch base on types that we haven’t used.

input type=”text”

We have been using this from Grade A html. right so it doesn’t need any introduction. But what what you notice though is the use of attribute called required what this attribute does is that it throw control to out browser to validate our input. You can have custom regular expression rule if you like for the validation. I will give an example of that in a moment. Try it from demo above. Try clicking the submit button and see what happens. This doesn’t not work on Internet Explorer 9 or older at the time of writing. but here is a screenshot from Google Chrome browser.

html5 form validation example

That’s pretty slick. right?

Ok so lets create a custom validation for our name field. Idea is that user should only be able to type a-z|A-Z in the field. Here we go with the new rule.

Noticed our pattern attribute? that’s where you stick your regular expression logic. Remember to let your user know what sort of input is expected from them for this field else they won’t be able to submit their forms.

Check support for html5 input types across browsers

Here is a link from caniuse.com

http://caniuse.com/#search=input

Scroll on the results page to check what is supported and in which version of a given browser it is supported. Over 9 browsers shown in results with their respective major version.

input type=”email”

This type is new and what it does is that it tells our browser that the content of a field should look like an email. anything like test@test.com or test@localhost etc I would suggest to use pattern attribute to check for email because different browser will process it differently. e.g. test@localhost is not ok with Firefox 4 and is ok with latest Firefox, Opera and Chrome

input type=”number”

How many times did we create a spinner using Javascript or using framework like jQuery plugins. Well good news is that it is now supported out of box with html5. hurray! Launch above demo in any browser but Internet explorer and you will see what I am talking about. We user this type for Person’s profile in our example form. There are few things that I would like to add here though. The attributes lets check the important attributes for this input type

  • min: minimum numeric value.
  • max: maximum numeric value.
  • step: increase/decrease value by this number if user click up/down button respectively.

Default can take negative values as well. So make sure to adjust above settings accordingly. lets update our age box from above example to this

So the range for age is 0-120 years

input type=”date” 

Alright this one will be widely used when it gets supported by all major browsers. Internet explorer once again doesn’t support it yet.

Other input types in same league are  datetime, time, datetime-local all of them are links to w3 specification and you should check them out. Lets talk about input type=”date” a bit more.

How many times have you used a Javascript calander script or jQuery datepicker plugin to transform an input box to a Date box. Good news is that you won’t be doing that anymore. atleast not for majority of major browsers except Internet explorer.

2 important attributes for this component are

  • min: minimum value to create a date range (e.g. 2012-10-01)
  • max: maximum value to create a date range (e.g. 2012-10-22)

We know that this type is not supported in Internet explorer so lets create a fallback using the techniques we learnt in our previous post but on contrast we will use jQuery’s poweress to achieve the required result.

Enter age

‘).datepicker(); } });

As you can see that we are transforming a textbox with type=”date” to datepicker control if type date is not supported. You would need to create your labels though.

input type=”tel”

This control is used to enter  a telephone number. You can use pattern attribute for custom validating phone numbers for your region.

input type=”url”

Represents an URI. e.g. http://jaspreetchahal.org is a valid URL. when you mark it as required then default URL validations will be tested for.

input type=”color”

This is really an interesting control and a good replacement for age of Color pickers that we are so used to. The allowed value is in HEX color format e.g. #EEEEEE (greyish). Please make sure that value is always in HEX. Values such as green, blue, red are not allowed at all.

input type=”range”

Ever used a slider with min and max values. Yes! thats what I am talking about. As you can see from the demo form (which works on nearly every browser except Internet Explorer) how slider works. There are couple of things that I want you to be aware of.

  1. Displaying Slider result:
    Question is that how do you display slider value when an user is playing with it. Answer is: use element as shown below
    Our slider

  2. You can also use datalist with slider control, feeding your datalist through list attribute. I will chuck in an example later.

 

For more details on new input types I would recommend that you read this document.

http://dev.w3.org/html5/spec/Overview.html#states-of-the-type-attribute

Attributes

As you can see that we have used the following attributes in our examples above

  1. autofocus
    If element have this attribute included than after the document is rendered and visible to the user, the element will have the focus. If autofocus is used on multiple elements then the last one will have focus. We used Javascript’s focus() method to do the equivalent in past.
  2. required
    Tell the browser to validate your input 
  3. pattern
    Custom validation pattern
  4. autocomplete
    Tell the browser whether to used previoudly used values for input field or not. Default value is On. Possible values include on and off
  5. list
    A data resource for input field
  6. placeholder
    Text that will appear inside the input field that will disappear when user start to type.
  7. min
    Minimum value for a field. This does not apply to all or the new types. range, number, date etc are the one that will use this attribute
  8. max
    Maximum value for a supported field.
  9. multiple
    Allows multiple input from user at once. e.g. use it with email or file box to accept multiple files or emails from user
  10. step
    Data increment step

 

I recommend that you point your browser to this address

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#input-type-attr-summary

to know more about input type attributes.

I hope that this helps.

In next post I will talk about Canvas and there will be many posts dedicated to this topic

If you find any errors in this post please let me know and I will correct them.

Cheers.

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.