In addition to new tag elements in HTML5 the input element has been extended with new types and attributes. Although these changes are not fully supported across all browsers they can still be added if desired to your existing websites.
New input attributes
Placeholder Text
It is common practice to include placeholder or default text in form input fields. In most cases they simply describe what data should be entered and once a user clicks or focuses on the field the value is displayed. HTML5 specifications has added the placeholder attribute to input elements so that browsers will perform this function instead of having it performed by JavaScript. However until it is supported by all browsers you will still need to use JavaScript.
<form> <input name="query" placeholder="Search" /> </form>
Auto Focus
You may in your websites be using a piece of JavaScript to focus a form field after a page has loaded. To make this task easier the autofocus attribute has been added.
<form> <input name="name" autofocus /> </form>
New input types
The greatest thing about the input element is that if it doesn’t recognize the type (e.g. the browser doesn’t support the type) then it will default back to a text input field. That means that if you want to use any of the new input types like search and email then you can do so without worrying about missing form fields.
Search Input
In HTML5 it was decided to add a search type input. As you all know in your web pages you typically use a normal text type input for your search forms. However it was decided that the new search type should be added so browsers could add additional functionality to them to match the browsers search functionality. What this means is that each browser can do what they want with the field including changing the style to match the browser’s search so that it no longer is consistent with the rest of your web page.
<form> <input name="query" type="search" /> </form>
URL & EMAIL Input
Both URLs and emails are strings that conform to respective Internet Standards. To make validation consistent and easier for developers the url and email type input elements have been added. The purpose of these fields is to verify and restrict the inputted data so only valid information is sent back to the server. However this validation would be performed at the browser level and if you are verifying other fields you will end up having to manage multiple error messages to the user which could be confusing to them.
<form> <input name="email" type="email" /> <input name="website" type="url" /> </form>
Sliders and Spinboxes
Ever wanted to have simple easy to use slidebars or spinboxes when a user is inputting number values. In HTML5 your wish has been granted with the number and range input types. These elements allow you to set a minimum and maximum value as well as a step value for how it should be incremented. Again allowing the browser to display their version of sliders and spinbox controls and you not having to implement a JavaScript library to get your desired elements.
<form> <input type="number" min="8" max="29" step="1" value="12" /> <input type="range" min="0" max="10" step="2" value="6" /> </form>
Calendar and Color Pickers
Commonly you will find yourself requesting that a user input a date or time and to handle this you will most likely include a JavaScript calendar to get your desired date picker. Similarly to number inputs, HTML5 adds support for input of various date types including month, date and time. These elements if supported by the browser would present a calendar interface for selecting a valid value. Less common but also specified is the color picker element defined by type color, however at this time no current browser supports the element.
<form> <input type="color" /> <input type="date" /> <input type="time" /> </form>
HTML5 raises some developer complications and in my opinion is incomplete. The specifications outline the details on common elements currently created by JavaScript, however they do not specify how those objects are to be rendered. What this means is that it is up to the browser on how they are displayed and are no longer in the control of the designer/developer. In addition it introduces the concept of browser validation of input yet once again it doesn’t specify how the browser should handle the validation or how the designer/developer can tap into the validation. With complicated forms it is often the case that input is validated not only for standards but for required fields or custom data values, by including the new HTML5 elements you know have to worry about validation errors from your own scripts but also the browser and the multiple feedback could be confusing to your Users.
I understand that HTML5 is taking the first steps in expanding the common functionality of the web and it’s browser, however to make these new elements a viable choice for web developers/designers more specifications need to be detailed in how a browser is to behave. For example if you have a web form that is styled to match your site and the browser displays search input that doesn’t match your site then it won’t be used, same with calendars and color pickers. A good start definitely but don’t expect to see these elements commonly used for a while to come.