Be conservative in what you do; be liberal in what you accept from others.
If the most important feature of the Web is the link, the form is a close second. It goes without saying that forms are integral to the web experience. And yet, so often such little attention is paid to how we use them. Anyone who’s used the Web for any period of time has likely experienced frustrating cryptic error messages, random failures, or worst of all, lost data.
While researching for this book, Matt encountered a survey site that inexplicably didn’t use HTML checkbox or radio button controls to collect results from users. In their place were images that changed when clicked and didn’t completely behave like HTML controls, making it extremely frustrating to work through. Imagine a company asking you to fill out a 50-question survey (a big enough inconvenience on its own) and finding that you couldn’t tab from field to field and hit the space bar to check or uncheck items. Worse still, imagine you get to the bottom of the page, click on the image reading “Submit”, and nothing happens. Now imagine your impression of the company that put you through all that, as you retrieve the laptop you just threw across the room.
These days, the stakes are higher than ever. E-commerce sites need simple checkout procedures that make their customers feel satisfied with their experience—and confident enough to make purchases. Other services such as webmail, collaboration tools, or financial sites need to protect user data, minimize errors, and recover gracefully at all times. If not, there’s invariably somewhere else users can go. It’s no longer acceptable to require a certain browser or version, to reject mobile device users, or to force users through complicated workflows.
Forms are the enablers of two-way interaction between sites and users, fostering both community and commerce. And that means it’s critical to build them well.
In this chapter, we show how to use HTML form controls in a way that will prepare you not only for mobile and assistive technology (AT) users, but for Ajax users as well. We cover how to use CSS to get the visual layout you need, how to use scripts to handle validation on the client side, and how to set up a keyboard navigation order.
HTML has plenty of underused elements, but perhaps the most useful
of them is label. It’s easy to see who has taken
universal design into account in their forms: just click on the labels in
one of their forms. If the focus moves to the form field as a result,
they’re using labels. For people who are familiar with the user interface
practices in Windows, this is especially handy; for users of assistive
technology, it’s more of a necessity because there is no other way to
explicitly associate labels with the form fields they represent. But very
few authors either know that they can extend those practices to the Web or
take the few seconds necessary to do it.
Let’s start with the basic username and password field:
<form method="post" action="/login" > <label for="username">Username:</label><br/> <input type="text" name="username" id="username" size=" 10" maxlength="10"/><br/> <label for="password">Password:</label><br/> <input type="password" name="password" id="password" size=" 10" maxlength="10"> </form>