If you’ve ever designed a complicated user interface, you know how limiting the basic HTML form controls are. You’re stuck using text fields, select menus, radio buttons, checkboxes, and sometimes the even clunkier multiple select lists that you constantly have to explain to your users how to use. (“Hold down the Ctrl key and click the entries you want, unless you’re on a Mac, in which case use the Cmd key.”)
So, you do what all good web developers do—you turn to Prototype or j Query, or you roll your own controls and features using a combination of HTML, CSS, and JavaScript. But when you look at a form that has sliders, calendar controls, spinboxes, autocomplete fields, and visual
editors, you quickly realize that you’ve created a nightmare for yourself. You’ll have to make sure that the controls you include on your page don’t conflict with any of the other controls you’ve included or any of the other JavaScript libraries on the page. You can spend hours implementing a calendar picker only to find out later that now the Prototype library is having problems because jQuery took over the $() function. So, you use jQuery’s noConflictO method, but then you find out that the color picker control you used no longer works because that plug-in wasn’t written carefully enough.
If you’re smiling, it’s because you’ve been there. If you’re fuming, I’m guessing it’s for the same reason. There is hope, though. In this chapter, we’re going to build a couple of web forms using some new form field types, and we’ll also implement autofocusing and placeholder text.
Finally, we’ll discuss how to use the new contenteditable attribute to turn any HTML field into a user input control. Specifically, we’ll cover the following features:
Email field [<input type=”email”>]
Displays a form field for email addresses. [Ol 0.1, IOS]
URL field [<input type=”url”>]
Displays a form field for URLs. [OlO.l, IOS]
Telephone field [<input type=”tel”>]
Displays a form field for telephone numbers. [OlO.l, IOS]
Search field [<input type=”search”>
Displays a form field for search keywords. [C5, S4, OlO.l, IOS]
Slider (range) [<input type=”range”>]
Displays a slider control. [C5, S4, OlO.l]
Number [<input type=”number”>]
Displays a form field for numbers, often as a spinbox. [C5, S5,OlO.l, IOS]
Date fields [<input type=”date”>]
Displays a form field for dates. Supports date, month, or week. [C5,S5, OlO.l]
Dates with Times [<input type=”datetime”>]
Displays a form field for dates with times. Supports datetime,
datetime-local, or time. [C5, S5, OlO.l]
Color [<input type=”color”>]
Displays a field for specifying colors. [C5, S5] (Chrome 5 and Safari
5 understand the Color field but do not display any specificcontrol.)
Autofocus support [<input type=”text” autofocus>]
Support for placing the focus on a specific form element. [C5, S4]Placeholder support [<input type=”email” placeholder=”me@example.com”>]
Support for displaying placeholder text inside of a form field. [C5,S4, F4]
In-place editing support [<p contenteditable>lorem ipsum</p>]
Support for in-place editing of content via the browser. [C4, S3.2,IE6, OlO.l]
Let’s start by learning about some of the extremely useful form field types.