CHAPTER 3
Creating User-Friendly Web Forms
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 you use the Cmd key.”)So, you do what all good web developers do—you turn to jQuery UI,^1 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 the
color-picker control you used no longer works because that plug-in wasn’t
written carefully enough and isn’t compatible with the latest version of jQuery
your project is using.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 some interfaces using new form-field types, and implement autofo-
cusing and placeholder text. Then we’ll look at how we can do some simple
client-side validation. 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:
Download from Wow! eBook <www.wowebook.com> report erratum • discuss