Supercharged JavaScript Graphics

Chapter 4. Advanced UI

Graphics aren’t just about pretty pictures. By giving users more attractive and interesting interface elements, you enable them to interact with your pages more effectively. In this chapter, we’ll discover how to mitigate the limitations of HTML form elements by using libraries or custom-coded elements to improve the user experience in your applications.

HTML5 Forms

HTML5 introduces a number of new form elements that offer increased functionality, taking some of the load off the web designer in terms of form validation and specialized widget rendering. These features enable a richer browsing experience with (in theory) no additional client-side programming required.

Warning

Of course, while having validation on the client side is convenient, it’s easy to create a spoof form that sends invalid data to a server. All form inputs should also be validated on the server side to avoid the security ramifications of malicious or junk data being processed.

The new HTML5 inputs include the following types:

• email

• tel

• url

• number

• range

• search

• color

• date

• week

• month

• time

• datetime

• datetime-local

Implementing these new input types is no different than implementing existing input types like hidden, text, or password:

<input type='date'>

Although these HTML5 facilities are a step in the right direction for cross-browser rich form elements, there are some limitations:

• Browser support is patchy, to say the least, with unsupported elements being replaced by regular <input> tags.

• Appearance and behavior ...