In the first article in this series we looked at the history of HTML5 forms and many of the new attributes available to us. The best thing about all this?

You can start using them now. This is article is an excerpt from Chapter 6 of Beginning HTML5 and CSS3: The Web Evolved by Christopher Murphy, Oli Studholme, Richard Clark and Divya Manian, published by Apress. As this article is a book excerpt, browser renderings of attributes and input types may have altered since the screenshots were taken. Additionally, browser support may have increased since publication so please refer to the links at the end of the article for the current state of browser support.

These new input types have dual benefits: Search seems like an appropriate place to start our foray into HTML5 input types. We all tend to write something like this:. With HTML5 we can. Desktop browsers will render this in a similar way to a standard text field—until you start typing, that is.

At this point, a small cross appears on the right side of the field. Notice the x in Figure 1. On a mobile device, however, things start to get interesting. The same applies to all of the new input types discussed here. In rendering terms, the email input type is no different than a standard text input type and allows for one or more e-mail addresses to be entered.

Combined with the required attribute, the browser is then able to look for patterns to ensure a valid e-mail address has been entered. Naturally, this checking is rudimentary, perhaps looking for an character or a period. You can style the field for when an value is entered using the: The specification details that one or more e-mail addresses are allowed.

Again, this highlights how HTML5 forms help to cut down the amount of JavaScript that you have to write when carrying out form validation. When using it with double-byte internationalized domain names, the browsers invalidate them; so this example. This ensures that no validation will be carried out on form submission, which may or may not be suitable for your needs. Did you notice it this time? Look at the keyboard again. There are dedicated keys for the and.

And in some browsers, users will get a helping hand. There is currently some debate about whether the user has to enter http: Browser vendors are discussing the possibility of pre-pending http: For up-to-date information, refer to the HTML5 specification. The url input type, as you might expect, is for web addresses. You can use the multiple attribute to enter more than one URL.

This is likely to include looking for forward slashes, periods, and spaces, and possibly detecting a valid top-level domain such as. Use the url input type like so:. As you can see in Figure 5, it has again updated the onscreen keyboard to ensure that completing the field is as simple as possible for the user by swapping the default space key for period, forward slash, and.

To access more endings like. Nice, big keys for entering a phone number help you to get that big, nasty form completed quickly. It, Safari, and Chrome render the input as a spinbox control see Figure 7 whereby you can click the arrows to move up or down. Or if you prefer, you can type directly into the field.

Firefox, on the other hand, renders the field like a standard text box. With the additional attributes min , max , and step we can change the default step value of this spinbox control as well as set minimum, maximum, and starting values using the standard HTML value attribute. This example shows how these attributes work:.

In this example, min represents the minimum value the field will accept, and max represents the maximum value. If we reach the maximum or minimum value, the appropriate arrow on the spinbox control will be greyed out so you can no longer interact with it.

This means we can include negative values or step up in increments of 0. The attribute, recently added to the specification will allow users to specify the type of input mechanism that is most useful for users.

When implemented, you will be able to choose between numeric, latin, email, or kana input modes. You can find out more about it on his blog. The range input type is similar to number but more specific. It represents a numerical value within a given range.

Why the difference, I hear you cry?

Making Forms Fabulous with HTML5 - HTML5 Rocks

It also allows browsers to offer a simpler control than for number. When moving the slider in IE 10 a tooltip appears showing the current value. Additionally, in Opera, if the CSS defines the height greater than the width, the slider control will be rendered vertically as opposed to the standard horizontal rendering.

The following code shows how we might mark up our skill level on a scale of 1 to by setting the min and max attributes see Figure 9. We can also set the starting point for range using the value attribute.

The reason for this is a lack of relevant use cases. Generally, this is done using a JavaScript library such as jQuery, Dojo, or YUI. It can be a pain when you need to load a whole library and associated plug-ins just to implement a simple date picker. Well, with HTML5 we get that functionality baked into the browser. The markup is pretty straightforward.

HTML forms and input tags cheatsheet. All you need to know to write every HTML form possible, including links to good resources on HTML and the new HTML5 form and input options · GitHub

You can go a step further by using the min and max attributes to ensure the user can only choose from a specified date range. As with many of the other form implementations, Opera leads the way support in other browsers is varied.

Notice how Opera highlights a specific week using the same date picker control, as shown in Figure There are two caveats with these implementations.

The date picker is keyboard accessible, though. However, we can foresee a potential issue; if implemented on a form that a data entry clerk regularly completes, they are likely to be quicker at typing the date than tabbing through with the keyboard or selecting from a date picker.

We tend to think that this is a good thing, as users will receive a common experience across all websites they visit provided they use the same browser all the time. Undoubtedly, though, corporations will require a branded date picker. Dates have to be entered in the same format as the time element that we met earlier in the book. So for dates, the format would be YYYY-MM-DD, and for dates with time, a user would have to enter YYYYMM-DDT The color input type is pretty self-explanatory: In contrast, certain Blackberry devices have implemented the color input type that renders a color picker, as shown in Figure If you missed the first article in this series on HTML5 forms, why not read a brief History of HTML5 forms and learn all about the new attributes introduced.

This article was written by Richard Clark. Richard is Head of Interactive at KMP Digitata , a digital agency based in Manchester, UK. Co-author of Beginning HTML5 and CSS3: He runs a host of websites including this one and its sister site html5gallery. Another side project is Speak the Web , a series of small gig style web conferences. You should follow him on twitter or check out his site. Fortunately, it appears that Firefox has been corrected since the original note was added as http: What about other browsers?

What about the standard itself? I explained it in an article. Dates, time and numbers have different formatting based on language and location. Implementation for these input types is far from trivial. Making certain input types work consistently can be a real pain and sometimes not worth the effort to implement. Hopefully, as these inputs mature, it will become easier and more predictable. And then the page is in a third language. Indeed, multiple languages, as Bertilo states, leaves us with a number of issues with no clear solution.

When that happens you realise that the solution is compromise. Non universally formatted HTML5 input types like date and number are simply not ready for the real world yet. Why not have a format attribute alongside the pattern attribute? In Chrome 24, you can use the keyboard to quickly and easily type in dates.

You can also use the up and down keys to increment and decrement each value day, month, year. Pretty useful for those who know how to use a keyboard. If anyone can help me will be good enough. It seems that the step attribute is ignored when using input datetime-local in safari on mobile devices. Does anyone know of a workaround?

Richard Clark I want to ask you about input type password, but show the numeric keyboard on android. Please help and elaborate to finalize the tag for more.

Mail will not be published required. You can use these tags: Notify me of followup comments via e-mail. This site is licensed under a Creative Commons Attribution-Non-Commercial 2.

Feel free to change, reuse modify and extend it. Some authors will retain their copyright on certain articles. Hosted by mt Media Temple. Branding by Oliver Ker. HTML5 Doctor Helping you implement HTML5 today. HTML5 forms input types Thursday, February 28th, by Richard Clark. Tweet In the first article in this series we looked at the history of HTML5 forms and many of the new attributes available to us. Date and time caveats There are two caveats with these implementations. February 28, at 2: February 28, at 8: March 3, at 9: March 6, at 5: March 6, at 8: March 9, at 9: March 9, at March 19, at 9: June 13, at 5: June 26, at July 18, at 2: July 21, at 9: September 27, at 8: November 22, at March 13, at 6: March 13, at 7: October 21, at 7: October 21, at 3: February 10, at Click here to cancel reply.

Some HTML is ok You can use these tags: Computer says NO to HTML5 document outline The woes of date input HTML Developers: Accessibility Attributes Boilerplates Browser Compatibility Comment CSS Elements Events forms interviews JavaScript APIs Marketing Misc multimedia Questions Quick Tips Reviews Simplequiz Specification Changes Structure Validation WAI-ARIA.

Alex Gibson Bruce Lawson Cennydd Bowles Chris Bewick Derek Johnson Ian Devlin Jack Osborne Mark Boas Mike Robinson Oli Studholme Peter Gasston Remy Sharp Richard Clark Steve Faulkner Tab Atkins Jnr Tom Leadbetter.

The woes of date input HTML Developers: Please Consider The W3C App Manifest specification On HTML belts and ARIA braces The Default Implicit ARIA… HTML5 — Check it Before you Wreck it with Mike[tm]….

Recent Posts Computer says NO to HTML5 document outline The woes of date input HTML Developers: Recommended Buy this book.