HTML5 Forms Input Types, Attributes And New Elements – Demos, Tips And Tricks
Forms on the web. They are literally everywhere, and there seem to really be all kind of flavors for them. From day one they have been a great mean for users to input data and information and interact with various services. And what comes with that is every implementation under the sun to offer validation for them, custom display and functionality if they aren’t native in that specific web browser, and much much more. Therefore, during the development phase of HTML5, one of the important things that have been looked into is making forms on the web evolve into what both end users and developers need to make things easier. Why would every web developer have to invent the wheel again or include tons of JavaScript code just to make something very basic like a datepicker work?
Let’s leave that behind us and explore all the new additions to forms in HTML5!
There are basically five areas of improvements when it comes to form features in HTML5:
- New input types
- New attributes
- New elements
- Validation
- APIs, such as the File API
In this article I will cover the first three of them and what it means for you as web developer. I plan to follow up with another article on how to script forms with the new options we have, and cover validation and chosen APIs.
New Input Types
These are the new input types in HTML5. Some of them are directly connected to be displayed in a certain way in the web browser, where others are more there for semantic value and/or connected to validation of them. The great thing about input types too is that if it’s not supported in the web browser, it will default back to a regular <input type=”text”> element: no errors, no multiple code versions to handle.
Here are the new input types:
- color
- Gives the end user a native color picker to choose a color.
- date
- Offers a datepicker.
- datetime
- An element to choose both date and time.
- datetime-local
- An element to choose both date and time, with local settings support.
- A field for entering e-mail address(es).
- month
- Choose a full month.
- number
- Picking a number.
- range
- Offers a slider to set to a certain value/position.
- search
- A field for search queries.
- tel
- Choosing a telephone number.
- time
- Input a certain time.
- url
- Entering a URL.
- week
- Picking a specific week.
Examples
Examples of these new input types, with sample or expected value (or read out value after form submission) set in their respective value attribute:
1.<input type="color" value="#b97a57">1.<input type="date" value="2011-06-08">1.<input type="datetime" value="2011-06-09T20:35:34.32">1.<input type="datetime-local" value="2011-06-09T22:41">1.<input type="email" value="robert@robertnyman.com">1.<input type="month" value="2011-06">1.<input type="number" value="4">1.<input type="range" value="15">2.<!-- Note: If not set, default attribute values are min="0", max="100", step="1". -->1.<input type="search" value="[Any search text]">2.<!-- Note: In WebKit-based web browsers (Google Chrome, Safari) you can add the non-standard results attribute to get a looking glass icon to click to see the latest searches, and the attribute autosave to keep them across page loads. -->1.<input type="tel" value="[Any numeric value]">2.<!-- Note: Most web browsers seem to let through any value at this time. -->1.<input type="time" value="22:38">1.<input type="url" value="http://robertnyman.com">1.<input type="week" value="2011-W24">Demo Page
You can see all of these new input types in action with their code listed below at HTML5 Forms input types demo.
New Attributes
To complement the new input types, there are a number of new attributes for actions web developers often need:
- autocomplete
- An option to turn off automatic form completion of values for a field. Possible values are “on” and “off”.
- autofocus
- Whether focus should be set to this field as soon as it has loaded.
- formaction
- For buttons that submit a form (e.g. <input type=”submit”>, <input type=”image”> and <button> elements) to be able to override the action attribute of the form; for instance if different buttons should submit the form to different URLs. No more JavaScript to do this!
- formenctype
- For buttons that submit a form to be able to override the form’s specified encoding
- formmethod
- For buttons that submit a form to be able to override the form’s method attribute, in case a button should change the method.
- formnovalidate
- Append to a submit button to bypass form validation.
- formtarget
- For buttons that submit a form to be able to override the form’s target attribute.
- list
- To connect with a <datalist> element by its id, to use its <option> elements as suggestions.
- max
- Maximum value for the value that can be put in.
- min
- Minimum value for the value that can be put in.
- multiple
- Allows for selection of multiple files for <input type=”file”> elements, and for multiple e-mail addresses separated by a comma.
- novalidate
- Applies only to the <form> element, and prevents a form from being validated before submitted.
- pattern
- Declaring what pattern should be used for validating a field’s value, in the form of a regular expression.
- placeholder
- Meant to be able to display a hint to the end user what to input. (Side note: I wrote a blog post discussing the desired behavior of the placeholder attribute)
- readonly
- If a field should be readonly.
- required
- For validation purposes, if a field is required or not.
- spellcheck
- Lets the web browser know if it should spell check the contents or not.
- step
- Possibility to control the size of each step for elements that accepts number or date input.
Examples
Examples of the new attributes:
1.<input type="text" autocomplete="off">1.<input type="text" autofocus>1.<input type="submit" formaction="http://example.org/save" value="Save">1.<input type="submit" formenctype="application/x-www-form-urlencoded" value="Save with enctype">1.<input type="submit" formmethod="POST" value="Send as POST">1.<input type="submit" formnovalidate value="Don't validate">1.<input type="submit" formtarget="_blank" value="Post to new tab/window">1.<input type="text" list="characters">2.<!-- Note: See a complete example in the New elements section below. -->1.<input type="range" max="95">1.<input type="range" min="2">1.<input type="file" multiple>1.<form action="http://example.org" method="GET" novalidate>1.<input type="text" pattern="[A-Z]*">2.<!-- Note: It is case sensitive, so you need to supply both lower- and upper-case letters if you want to allow that. -->1.<input type="placeholder" name="first-name" placeholder="E.g. John Locke">1.<input type="text" readonly>1.<input type="text" required>2.<!-- Note: Some web browsers have to have a name attribute for this to work (this could also apply to other HTML5 Forms features, so pro tip is to always have a name attribute for form elements). -->1.<input type="text" spellcheck="true">2.<!-- Note: Has to be set to true or false, just an attribute present doesn't work -->1.<input type="number" step="3">Demo Page
You can see all of these new attributes applied to form elements in the HTML5 Forms attributes demo.
New Elements
- datalist
- Contains a number of <option> elements with values that can be used as suggestions for other form elements through the usage of the list attribute on them.
- keygen
- Offers a way to create a public/private key pair where the public key is sent with the form. (Ok, I’ll be honest – probably not the new element that will get you the most excited… Also it seems like Internet Explorer are not interested in implementing it either)
- meter
- The meter element is for displaying values on a bar, where you can custom control min, max and assigned value. You can also specify low, high and optimum to set up different kind of areas of the bar.
- output
- Dedicated to output the result of a calculation in the page, for instance sliding a <input type=”range”> back and forth.
- progress
- Meant to be used to indicate progress of any kind in a web page, for instance file upload progress.
Examples
Example code of using these elements:
Note that the value attribute is the value being read out for its connected <input> element. In some web browsers, the inner text of the <option> element, if set, overrides the value attribute; in other web browsers only the value attribute is taken into consideration. So the best way to make it work is using the value attribute for suggestions.
1.<input type="text" name="characters" list="data-list">2.<datalist id="data-list">3.<option value="Hugo Reyes">4.<option value="Jack Shephard">5.<option value="James 'Sawyer' Ford">6.<option value="John Locke">7.<option value="Sayid Jarrah">8.</datalist>1.<keygen name="key"></keygen>
Important to note for the <output> element is that support for the JavaScript event oninput for the <form> element is required (it used to be an onforminput event on the <output> but that has now been deprecated). The code in the example below detects whether there is existing support for the oninput event, and if yes, applies an event handler that updates the value of the <output> element according to the value set for the <input type=”range”> element.
01.<meter min="0" max="10" value="7"></meter>02. 03.<input type="range" id="range" name="range">04.<output for="range" id="output"></output>05. 06.<script>07.(function () {08.var theForm = document.getElementById("the-form");09.if ("oninput" in theForm) {10.theForm.addEventListener("input", function () {11.output.value = range.value;12.}, false);13.}14.})();15.</script>1.<progress max="100" value="70">70%</progress>Demo Page
All the new elements are available to test in the HTML5 Forms elements demo.
Web Browser Support
As you can imagine, web browser support for such a vast amount of different features is varying. Another factor that plays in is that there’s room for interpretation in the specifications how some form elements should be displayed, and the expected behavior of them. There are a few compatibility lists that I like and I recommend taking a look at:
However, I strongly urge you to test as much as possible yourself. Things are changing constantly when it comes to web browsers nowadays (about time, right?) and not all test tables will be up to date. It could also be that a web browser claims to support something when tested with feature detection, but in reality it doesn’t work. Or, it works, but the user experience is not the one you want to convey.
So code like crazy, but evaluate the result of your code and how end users will perceive it: after all, we do this to give them the best experience!
Mobile Improvements
One important thing to also bear in mind is with myriad of mobile devices, tablets et al, is that while there might not necessarily be support for a certain input type, by using it, it could trigger the most appropriate keyboard layout to make inputting information as smooth as possible for the end user. This means a number keyboard layout for <input type=”number”>, URL layout for <input type=”url”> etc.
Downside: Styling
While we have an abundance of new features for forms in HTML5 and CSS3 pseudo-classes for styling elements (e.g. :valid, :invalid, :required), one of the major shortcomings is that there are very few ways to style the native controls like datepicker, range, validation messages etc. And sure, we could argue that it’s great for end users if form elements look the same across all web sites, to give them the soothing calm of consistency.
But there are two important reasons why that will never suffice:
- The styling supplied for various form elements always seem to be a bit of a low priority when they surface, and over time they get better. But many people believe that the design of form elements leave a lot to desire.
- Web sites will always have the need to make the design consistent with the rest of the web site, for a better user experience and for branding. This is inevitable, and if we don’t provide it for them for HTML5 Form elements, they will very likely go back to using JavaScript-powered solutions for all of the above, and I don’t believe anyone really gains from that.
At the time of writing, there a few ways you can style HTML5 Form elements in WebKit, in this fashion:
1./* Remove default input type="search styling */2.input[type="search"] {3.-webkit-appearance: textfield; /* You could also use none */4.}1./* Style placeholder text */2.input::-webkit-input-placeholder {3.color: #ffffa2;4.}
There are a bunch more, and you are interested, you can read up on them in Styling Form Controls Using Pseudo Classes. Do beware that this is not standard, and that they might change over time (but hey, if you have a deadline now, who cares? 
.
.
There have also been suggestions mentioned by Peter Gasston on how we could add some new CSS pseudo-classes to handle this. For example:
1./* Note that this is not valid CSS code and won't work anywhere */2.input::error {3.position: below;4.}Do Something Formtastic!
As you can see with all the new input types, attributes and elements, a lot of the things we spent countless hours on implementing before will be native in web browsers, saving us a lot of work and offering users something extremely well tested and implemented. With HTML5 really comes a revolution on the web with open standards to try and meet all the needs of developers, and it is all implemented in a very fast pace.
I’d like to urge you to use these new HTML5 Forms features, be it just for some more semantic value or for offering a lot of the new functionality as well. They are here to make things better for you, so evaluate them, learn their tricks and tweaks, and make sure to let your feedback go to web browser vendors and specification writers, so they can ensure that they will meet the needs of the development community.
Now go do something formtastic!
0 comments: