HTML5 is the latest and advanced version of HTML. It has a lot of advanced features. HTML5 makes it easier to write web forms and also makes them a lot more powerful and consistent across the web. This is why people are switching from PSD to HTML conversion to PSD to HTML5. Read further and you will find out about some of the new form controls and functionality that have been introduced.
When you convert design to HTML, the form is a lot painful to work with. It is not very easy to markup. Especially when you want a consistent look for your website. They can also be frustrating for the end users. During the time of HTML4.01, the web was a static place. There used to be the odd comment form or guest book script, but usually websites were there for visitors to simply read. HTML5 basically aims at standardizing some of the most common rich form controls, so as to make them render natively in the browser.
It need not be told that forms are the main tool for data input in web applications. These days’ data has become more complex. Therefore, it has become necessary to create an input element with more capabilities, to collect this data with more semantics and better definition, and allow for easier, more effective error management and validation.
The number type <input type=”number”> creates a special kind of input field for number entry. This appears as a text entry field with a spinner control. This allows you to increment and decrement its value.
The range type <input type=”range”> makes it easy to create a slider control to allow you to choose between a range of values. However, this input, by default, does not show the currently selected value, or even the range of values it covers.
The date type <input type=”date”> creates a fully functioning date picker, and a text input containing a separator for hours, minutes and seconds that only allows you to input a time value. It also provides a number of other features like
datetime: It allows you to choose date and time.
Month: It allows you to choose a month, stored internally as a number between 1 and 12.
Week: It allows you to choose a week, stored internally in the format of 2011-W37 (week 37 of year 2011)
The color type <input type=”color”> provides a color picker. Using this you can pick from a selection of colors.
The search type <input type”search”> is a differently styled text input. Browsers are meant to style these inputs the same way as any OS-specific search functionality.
<datalist> element and list attribute. This allows you to create a list that allows users to choose from a list of suggested options, as well as to type in their own. This new input types relates to telephone numbers, email addresses or URLs. Browsers will render these as normal text entry inputs, but explicitly stating what kind of text we are expecting in these fields’ plays an important role in client-side form validation.
Besides these input types, HTML5 also defines a series of new attributes for form controls that help to simplify some common tasks.
Placeholder: This allows you to provide more information about the expected type of information we want the user to enter.
Autofocus: This allows you to focus a form field automatically when a page is loaded.
Min and max: This pair of attribute allows you to set a lower and upper bound for the values that can be entered into a numerical form field.
(Have been liking our posts for a while? Subscribe now! We’ll make sure that you never miss an update. And talk to our HTML5 developers now if you need professional help with your Web strategy.)
