A major part of the new HTML 5 specification is application development. With this, there have been significant upgrades to HTML form elements with the introduction of version 5. Form fields have been fitted with new attributes and functionality to speed development and aid in visitor use.
The input field is most common, and HTML 5 introduces new kinds of input field types for increased responsiveness. A couple of examples are:
Email type. Field expects a valid email address.
URL type. Field expects a fully qualified URL.
How do these new features affect you as a developer? First, they provide very quick feedback to the user. Second, they can act as a springboard for more robust form handling.
User Interaction
Certain devices like the iPhone will present the user with different ways to interact with these new form elements automatically. For example, tapping inside a "URL" form field will open the iPhone keyboard that has the forward slash as well as the ".com" button ready for use.
HTML 5 form fields also support suggestive or placeholder text to guide the user as to what type of data is expected. This is very helpful from a usability standpoint, since the user will be less likely to enter something that is not expected or supported. When the field gains focus, the suggestive text will be automatically removed...all without the use of any Javascript.
Another new element is the date picker. Typically included via jQuery plugins or on-page Javascript, these are now built into HTML 5. By using the simple attribute "date", the user is presented with an interactive calendar control to cycle through months, years, and days. Take care when using this form element as it currently has almost no support in browsers and hand-held device representation can vary greatly.
Form validation
Though you still need properly tested and error checked client or server side scripting to validate a form, HTML 5 can assist by marking required fields. By simply adding the attribute "required," the form will do a few things for you. If the browser or device supports it, the user will get very simple built-in validation errors if a field is brought to focus, then de-focused without entering anything. In conjunction with the new input types such as "email" described above, the form can also prompt the user with additional error messages if the address is invalidly typed.
Overall, as more browsers and devices add support for these new features across the board, we will begin to see more robust web applications with lots of functionality built right into the front end. Its a good idea to start integrating these features into your code now, since anything unsupported will simply revert to a default input field, and not break the form.
