(Image from Flickr user Canada Science and Tech)
The input element is a deceptively simple HTML form element. After all,
<input> is just one HTML element, right? Whether you’re still new to HTML or if you’ve been writing it for 15 years like I have, you might be surprised to learn that the input element has more than 30 attributes. It’s even more if you include the global attributes in that count. That’s a lot of complexity by itself, but it gets crazier: The most important attribute,
type, has more than 20 possible values! Take a quick look at the MDN doc for the input element and get ready to scroll.
Input Element Type Attribute
On the input element, the type attribute specifies one of many different kinds of form controls that can be displayed. Each control has a different purpose and is capable of collecting a certain type of data from the user. If you’d like to see all the input element types at once, check out this page with every input type (this rapidly evolving technology works best in Chrome right now). Here are some of the newer and more interesting types you may not have known about.
color. Here’s the code along with a screenshot of what it looks like in Chrome on Mac OS X.
<input type="color" value="#6fbc6d">
Browser support for the color type is still chaotic and it’s not ready for primetime yet, but the latest versions of Chrome and Firefox both have native color pickers implemented now. You can also change the default color when the page loads by setting the
value attribute to a hexadecimal color, although it is not required.
Date, Month, and Week
Now, browsers are implementing native date pickers for the new input types of
week. Below is the code along with a screenshot of what each of these three types looks like when rendered in Chrome on Mac OS X.
<input type="date"> <input type="month"> <input type="week">
Text, Email, Tel, and URL
text input type has been around for a very long time, but it is now joined by the new types
url. In a normal desktop web browser, these new types don’t seem to behave any differently than a regular text input. You might be wondering: If they don’t look any different, then why bother?
Take a look at the iOS keyboards below. Each of these 4 different input types will automatically use a custom keyboard that’s specifically optimized for the task. The email keyboard has a handy @ symbol, the tel keyboard is a number pad, and the URL keyboard provides quick access to slashes and TLDs. Here’s the code and screenshots of the iOS keyboards.
<input type="text"> <input type="email" <input type="tel"> <input type="url">
On a mobile device, typing can be downright frustrating. Providing these optimized keyboards to your mobile visitors is an easy way to add polish to the experience. Browser support for these new input types is very good and you can safely start using them now.
In some specific instances, you might want to allow site visitors to pick from a range of numbers where precision isn’t important. For example, maybe you’re building a photo editing web app and you want the user to control the image brightness or the saturation. Behind the scenes, this is still just a number, but using a text input to collect that number probably is not a good idea because it creates guesswork for the user. Additionally, a text input means the developer has to validate the input, make sure the user typed in a number, make sure that number is within the appropriate range, and so on. This is a lot of work that only creates a frustrating experience.
A better alternative is the
range input type, which will render a slider form control. By using a few additional attributes (min and max), you can set the minimum and maximum values. Here’s the code for the input type range along with a screenshot of the control rendered in Chrome on Mac OS X:
Similar to the date input types, there is also a
time input type. This input element works exactly like you might expect. You can type in the desired hours, minutes, and meridiem (AM/PM). Also similar to the date types and special text types, this will present mobile visitors with a customized interface for inputting times. Here’s the code along with a screenshot of the time type rendered in Chrome on Mac OS X:
As I mentioned in the introduction, this is just a small slice of what the input element has to offer. There are other interesting attributes like
readonly, and more. If you’d like to continue learn about inputs, here are some resources that can help.
- Learn about <input> and other HTML elements on Treehouse
- View the demo page with every input type
- W3C documentation for <input>
- MDN documentation for <input>
- Cross browser support for <input> types on caniuse.com
If you have any good input resources or thoughts you’d like to share, please let us know in the comments!