Pick the Right Control for the Job

UX designers have an extensive palette of controls and UI elements to choose from, so it’s surprising to see that often the wrong controls are added to forms.

You can enhance the UX of a product considerably by using the right control for the job. HTML5 has extensive form controls, supported by all modern browsers, including color pickers, telephone input, URL input with validation, and so on—and the UI libraries of both iOS and Android contain a vast array of controls for almost all occasions.

Show users a fully featured color-picker with:

<input type="color" id="color" name="color">

This produces UI like the following:

Figure 54.1: There’s a full color picker, for free, in HTML!

Similarly, let users pick a month and year with a system-native date picker with:

<input type="month" id="month" name="month">

This will...