Last week we discussed the new type attributes that HTML5 offers for the Input element. This week we’ll look at the rest of the new types and example code, for the following types: color, email, number, range, search and url.
The Type Attribute: A Recap
We covered the definition of the type attribute in our last article, but we will recap the discussion for clarity.
“The behavior and presentation of the input element is controlled by the type attribute. Simply put, the job of the type attribute is to let the browser know what type of information is being expected for an input element. The browser takes the type classification and decides how to present the input element (e.g. a simple text box, a date picker, a color picker, etc.) and how to validate the information that is provided by the user.”
color type
The color type will not likely be one that developers will use frequently because of its specialized nature. However, when it is necessary it will be a very handy tool. The idea is to provide the user with a quick and easy color picker interface to select a color. This is usually done by presenting the user with swatches of a preset selection of common colors and button for selecting custom colors. The preset colors are just that, preset, and developers do not have control over what colors are presented. There is also no developer control over the interface for selecting a customized color as that is completely controlled by each browser.
The information that is posted upon submission is the hexadecimal value of the color that has been selected … and no, clear is not an option. The format of the value returned includes the # sign followed by the 6 characters that define the color’s hexadecimal value (e.g. #ffc90e).
Declaring this type of element is very straight-forward as seen in the example below.
<input type=”color” name=”select_my_color” />
Opera seems to have the only real implementation of this type right now with a full color picker interface. Rumor has it that Google Chrome has implemented a hybrid version of this type where there is no color picker but rather a simple validation of the text entered by the user to make sure it is a valid hexadecimal color value. However, when I tested the color type in my version of Chrome that was not the case.
email type
The email type checks to make sure what the user inputs is a valid email format. What that basically means is that whatever the user enters must be in the basic email format of some characters followed by an “@” sign followed by some more characters followed by a “.” followed by some more characters. That makes [email protected], [email protected], and [email protected] are all email addresses that will validate as true. Obviously, this is pretty basic email validation and most developers will be looking for something more comprehensive to validate email addresses but at least it’s a start.
Firefox, Google Chrome and Opera have all implemented the email type and all function virtually identically with a simple message like “please enter a valid email address” when the email entered is not valid. Internet Explorer and Safari have not implemented this type yet. An example of this type can be seen below.
<input type=”email” name=”my_email” />
number type
The number type, like the date/time types, makes available 3 more input attributes that are not relevant with any other types. The goal of this type is to limit the user’s input to whole number values and even restrict those values to a certain range when appropriate. Below is an example of the input element with the number type and all 3 of the additional attributes which are min, max and step. Each of the specialized restrictive attributes is then explained below the example.
<input type=”number” name=”my_number” min=”2″ max=”10″ step=”2″ />
Min
This attribute is used to set a minimum limit on the user’s input.
Max
This attribute is used to set a maximum limit on the user’s input.
Step
This attribute establishes the legal interval for input by the user. For example, setting the step attribute to 5 means that the only valid input would be 0, 5, 10, 15, etc.
The number type implementation is pretty standard amongst those browsers that have implemented it. The user is presented with a basic text box with up and down arrow controls to the right that allow the user to increment or decrement the number that is in the text box. The browsers that currently support number are Opera, Google Chrome and Safari. Firefox and Internet Explorer have yet to implement the number type.
range type
You might be wondering why there is a range type when the number type seems to have all the range capabilities already. Well, you would be correct in that both range and number allow developers to control the user’s input as whole numbers within a specific range. Just like number, the range type also uses the min, max and step attributes to define the range (min, max and step are defined below). Unlike number, the range type presents very differently from the number type. Instead of a text box with up and down arrow buttons to the right it presents as a slider bar. The slider bar is rendered with as many stops as defined by the range with min, max and step (0 to 100 by default without min and max).
This is an ideal type for setting volume levels, zooming, selecting font size, etc. It is currently available on Opera, Google Chrome and Safari. Firefox and Internet Explorer have yet to implement this type. An example of the range type can be seen below along with the definitions for the min, max and step attributes.
<input type=”range” name=”my_range” min=”0″ max=”100″ step=”5” />
Min
This attribute is used to set a minimum limit on the user’s input.
Max
This attribute is used to set a maximum limit on the user’s input.
Step
This attribute establishes the interval of values for the slider. For example, setting the step attribute to 5 means that the only valid slider values would be 0, 5, 10, 15, etc.
search type
The search type is the simplest of all of the new input element types. It’s basically just a standard text box that is intended for entering search keywords. There is nothing fancy about it and the user’s input is not validated in any way. The only thing that you will notice different about search versus an untyped input element is that Google Chrome and Safari offer a cancel button (an “x”) within the text box once at least one character has been entered by the user. Opera and Firefox recognize the search type but do not treat it any differently than a standard untyped input element. Internet Explorer doesn’t bother recognizing it at all. An example of this type can be seen below.
<input type=”search” name=”my_search” />
url type
The url type’s intent is exactly what you would expect. It is intended to validate URL’s that the user provides. Unfortunately, it’s not as cool as it sounds. Like the email type, the validation is rather simplistic. It only checks to see if the format meets the basic criteria of some characters followed by a “:” followed by some characters followed by a “.” followed by some characters followed by a “.” followed by some characters. That means “a:b.c.d” will validate as an acceptable URL. Sadly, that validation is not going to cut it for most practical applications. Still, like email, it’s a step in the right direction.
Currently, the url type has been implemented on Firefox and Google Chrome. Opera has also technically implemented the url type but its implementation is even more simplistic in that Opera will accept any value that does not contain illegal characters or spaces. It then adds “https:// “ to the front of the text for its value. What that means is that a user that enters “abcd” returns a value of “https://abcd”. Internet Explorer and Safari have yet to implement this type. An example of the url type can be seen below.
<input type=”url” name=”my_url” />
So Many Attributes, So Much Waiting
It’s easy to see how most the new types for the input element will make web development much easier in the not too distant future. In the short term, though, we must unfortunately keep validating data as we have been until the new types are implemented by all the major browsers. The waiting does not restrict developers from starting to implement the new types now, however. If you use a type for your input elements that a browser doesn’t recognize it will simply present the standard text box and you will have to use a traditional means of validation on the data.
It will be interesting to see how each of these new types gets implemented by each of the different browsers. While the guidelines on what each type’s purpose and generated values are, the interfaces and implementations within the individual browsers are open to some interpretation. The best example of this can be seen in how differently Opera and Safari handle the new date and time types. It will be fascinating to see how this all pans out as Firefox, Internet Explorer and Google Chrome begin to catch up with Safari and especially Opera as Opera seems to be setting the standard at this point. If you are going to test out these new types I would certainly recommend that you try them out on Opera first. Happy coding!
Browsers used for testing: Firefox 8.0.1, Chrome 16.0.912.63, Internet Explorer 9.0.8112.16421, Opera 11.60.1185 and Safari 5.1.1.
