New Input Types

Contact Us or call 1-877-932-8228
New Input Types

New Input Types

HTML5 introduces thirteen new input types:

  1. search
  2. tel
  3. url
  4. email
  5. datetime
  6. date
  7. month
  8. week
  9. time
  10. datetime-local
  11. number
  12. range
  13. color

While no desktop browser implements all of the new HTML5 input types, most current desktop browsers implement most of the features; support on mobile browsers in generally better than on desktop. Visit http://www.findmebyip.com/litmus to see the current state of browser support for these input types.

The good news is that major browsers all fall back to type="text" when they don't recognize an input type.

search

The new HTML5 search input type is supported by the latest version of all browsers.

Most input fields are meant to be filled out only one time and then submitted for processing. But a search box is a bit different. For example, consider Microsoft Word 2010's search box:

Notice the x used for clearing the box. If you look at search boxes in other applications, you'll notice many of them provide a simple way to clear the text. HTML5 browsers that support the search input type are taking the same approach. For example, here's Chrome's search box: Note that the x doesn't show up until you have entered some text into the field.

tel

The new HTML5 tel input type is supported by the latest version of all browsers.

On desktop browsers, you don't really gain anything by using the tel input type. As telephone numbers can come in all different formats, there are no constraints on what can be entered here. You could, however, add your own custom validation to all telephone inputs and use the type="tel" as a means of finding them.

Also, user agents are free to provide a different/better means for filling out input fields based on their type. For example, the iPhone provides a more appropriate interface (presenting the user with the phone keypad) for filling out fields of the tel type:

url and email

The new HTML5 url and email input types are supported by the latest version of all browsers.

Browsers can provide validation for type="url" fields to make sure the user enters a valid URL.

Also, like with type="tel", user agents are free to provide a different/better means for entering URLs and email addresses.

For example, for url types the iPhone provides keys for ".", "/" and ".com" and does not provide a "space" key, as spaces are not allowed in URLs:

For emails, the iPhone provides "@" and "." keys: For some reason, it does not provide a ".com" key.

Interestingly enough, the iPhone also provides a "space" key for emails. This is because email input types can include a multiple attribute, which, when included, allows users to enter multiple emails delimited by spaces. If the iPhone were a little smarter, it would only include the "space" key when the "multiple" attribute was present.

date/time input types

The new HTML5 date, datetime, datetime-local, month, week, and time input types are only supported by:

  1. Opera
  2. Chrome
  3. iOS Safari
  4. Blackberry Browser
  5. Chrome for Android

Browsers that support these input types present the user with contextually-appropriate dialogs such as date pickers. Here's the date input field on Chrome:

And here's the date input field on an iPhone:

number

The new HTML5 number input type is only supported by:

  1. Opera
  2. Chrome
  3. Safari

Supporting browsers present up and down buttons (spinboxes) to scroll through numbers and they also allow you to use the up and down arrows on the keyboard. Opera's spinbox is shown below: Opera Number Input Type

Safari on iPhone doesn't present spinboxes, but does offer the user the number-specific keypad:

All three implementations (Opera, Chrome and Safari) are subpar in that they don't accept decimals in their standard format. To see this:

  1. Open html5-forms/Demos/input-validity.html in Chrome, Opera, or Safari.
  2. In the number field, enter 3.3 or some other decimal.
  3. Press the Check Validity button. You'll receive an alert reading "3.3 is NOT a valid number." Oops.

range

The new HTML5 range input type is only supported by recent versions of all browsers.

Browsers currently represent range input types as sliders. This is nice, but the problem is that they don't indicate a value, so the user doesn't know what they've selected. Consider the following code:

Code Sample:

html5-forms/Demos/input-range.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----
	<label for="pace">
		<strong>How is the pace of the class?</strong><br>
		<small>(1=way too slow, 9=way too fast, 5=perfect):</small>
	</label><br>
	<input type="range" name="pace" id="pace" min="1" max="9" value="5">
---- C O D E   O M I T T E D ----

The above code will render as follows (in Google Chrome):

The problem is that there is no indication of the current value. We can try fixing this with this simple little trick:

Code Sample:

html5-forms/Demos/input-range-title.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----
	<label for="pace">
		<strong>How is the pace of the class?</strong><br>
		<small>(1=way too slow, 9=way too fast, 5=perfect):</small>
	</label><br>
	<input type="range" name="pace" id="pace" min="1" max="9" value="5"
		title="5" onchange="this.title=this.value">
---- C O D E   O M I T T E D ----

The above code will render as follows (in Safari):

This trick works pretty well in Safari, which displays the title value immediately after the mouse hovers over the field. However, with Chrome and Opera there is a slight delay, which makes this solution less than ideal. Also, the value is only visible when the cursor is over the field.

The output Element

There is a new HTML5 output element used to show output generated by a script on a page. For example, you could use it to show an error message or the result of a calculation based on values entered in form fields.

We can use the output element to create a better solution for making our range slider more user friendly:

Code Sample:

html5-forms/Demos/input-range-output.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----
	<label for="pace">
		<strong>How is the pace of the class?</strong><br>
		<small>(1=way too slow, 9=way too fast, 5=perfect):</small>
	</label><br>
	<input type="range" name="pace" id="pace" min="1" max="9" value="5"
	onchange="document.getElementById('paceoutput').innerHTML=this.value;">
	<output for="pace" id="paceoutput">5</output>
---- C O D E   O M I T T E D ----

The above code will render as follows (in Safari): Notice the number 5 immediately after the slider telling us the current value of the slide. This number will update when the slider value changes. This solution works in browsers that support range. However, it creates a problem with non-supporting browsers. Here's how Internet Explorer 9 displays this page: Notice that 5 is repeated twice: once within the text field and once after it.

To fix this, we need to populate the output element dynamically if and only if the range input type is supported. Here's a possible solution:

Code Sample:

html5-forms/Demos/input-range-output-dynamic.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Form - Input Range Type</title>
<script src="../../html5-common/modernizr.min.js" type="text/javascript"></script>
<script>
	window.addEventListener("load", function() {
		if (Modernizr.inputtypes.range) {
			document.getElementById('paceoutput').innerHTML=document.getElementById('pace').value;	
			document.getElementById("pace").addEventListener("change", function() {
					document.getElementById('paceoutput').innerHTML=this.value;				
			}, false);	
		}
	}, false);
</script>
</head>
<body>
<form method="post" action="example.xyz">
	<label for="pace">
		<strong>How is the pace of the class?</strong><br>
		<small>(1=way too slow, 9=way too fast, 5=perfect):</small>
	</label><br>
	<input type="range" name="pace" id="pace" min="1" max="9" value="5">
	<output for="pace" id="paceoutput"></output>
</form>
</body>
</html>

This solves the problem. The code, which runs when the page is loaded:

  1. Sets the innerHTML of the output element to the value of the range input.
  2. Attaches an event listener to catch any changes of that value and update the output accordingly.
  3. And it only runs if the browser supports the range input type. We used Modernizr to check for that.

min, max, and step attributes

The min, max, and step attributes can be used on the number, range, and datepicker elements.

min and max are intuitive. They are used to set the minimum and maximum possible values.

The step attribute is used to indicate possible values in between the min and max values.

These attributes are only supported by:

  1. Opera
  2. Chrome
  3. Safari

Code Sample:

html5-forms/Demos/input-number-step.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----
<label for="evennumber">Even Number: </label>
<input type="number" name="evennumber" id="evennumber" min="0" max="100" step="2">
---- C O D E   O M I T T E D ----

To see how this works:

  1. Open html5-forms/Demos/input-number-step.html in Chrome or Opera.
  2. Use the spinner to go up and down. Notice only even numbers are shown and that you cannot go below 0 or above 100.
  3. Type in 15 or some other odd number. Notice the field turns red.

Safari can validate the numbers based on min, max, and step, but doesn't provide an easy way to pick a number.

color

Only Opera and Chrome support the new HTML5 color input type, but, again, as browsers all fall back to type="text" when they don't recognize an input type, there is no harm in using the color input type now. When other browsers start implementing it, your visitors will likely get a nice color picker.

Safari recognizes valid color names and hexadecimal color formats, but doesn't provide an easy way to pick them. As we saw earlier with the number type, you can check the validity of the color input type with JavaScript. To see this:

  1. Open html5-forms/Demos/input-validity.html in Chrome or Safari.
  2. In the color field, enter "red" or "#ff0000".
  3. Press the Check Validity button. You'll receive an alert reading "red is a valid color."
  4. Now try it with a bad color name (e.g., "foo") and you'll get an alert reading "foo is NOT a valid color."

Opera's color picker is shown below: Opera Color Picker

If you click on Other... you get a large color picker with more options.

Next