Creating User-Friendly Web Forms With Html5

Creating User-Friendly Web Forms With Html5

If you’ve ever designed a complicated user interface, you know how limiting the basicFriendly Web Forms 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 jQuery, 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 your-self.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. Y o u can spend hours imple- menting 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 noConflict() 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 chap- ter, we’re going to build a couple of web forms using some new form field types, and we’ll also implement auto focusing andplaceholder text.

Coding style to make User-Friendly Web Forms With Html5

Finally, we’ll discuss how to use the new content-editable attribute to turn any Friendly Web Forms 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 to Creating User-Friendly Web Forms With Html5

URL field <input type="url">

Displays a form field for URLs to Creating User-Friendly Web Forms With Html5

Telephone field <input type="tel">

Displays a form field for telephone numbers to Creating User-Friendly Web Forms With Html5

Search field <input type="search">

Displays a form field for search keywords to Creating User-Friendly Web Forms With Html5

Slider (range) <input type="range">

Displays a slider control to Creating User-Friendly Web Forms With Html5

Number <input type="number">

Displays a form field for numbers, often as a spinbox to Creating User-Friendly Web Forms With Html5

Date fields <input type="date">

Displays a form field for dates. Supports date, month, or week to Creating User-Friendly Web Forms With Html5

Dates with Times <input type="datetime">

Displays a form field for dates with times. Supports date time, date-time-local, or time.

Color <input type="color">

Displays a field for specifying colors to Creating User-Friendly Web Forms With Html5. (Chrome 5 and Safari 5 understand the Color field but do not display any specific control.)

Autofocus support <input type="text" autofocus>

Support for placing the focus on a specific form element to Creating User-Friendly Web Forms With Html5.

Placeholder support <input type="email" placeholder="[email protected]">

Support for displaying placeholder text inside of a form field to Creating User-Friendly Web Forms With Html5.

In-place editing support <p contenteditable>lorem ipsum</p>

Support for in-place editing of content via the browser to Creating User-Friendly Web Forms With Html5 ,Let’s start by learning about some of the extremely useful form field types, go ahead make it .

andcombd