Accessible Forms

<input> (continued)

In my previous examples, I’ve already shown you a text box and a submit button:

<input type="text" id="name" size="20" /><br />
<input type="submit" value="Submit" />

As you can see, the “type” attribute specifies what type of form element you are creating.

Other types used for <input> tags are:

• password
• checkbox
• radio
• reset
• file
• hidden
• button

Just as textareas need a width and height defined in the tag; <input> tags with a type of text, password, or file all need a length defined, as well. But instead of using the cols attribute, you need to use size.

password — This creates a text box, where characters typed will show up as asterisks or big dots, depending on the browser. This way, anyone looking over the user’s shoulder won’t be able to see what they’re typing in.

Result:

checkbox — When you use checkboxes, people can choose multiple entries.

See it in use:

radio

With radio buttons, people are only allowed one choice.

See it in use:

reset — This resets all of the fields in the form to their original values.

To see it in use, type in some values and then click on “Reset”.

file — Allows users to upload a file to your site.

hidden — These don’t appear on the page, and are used to pass hidden variables.

button — Don’t even bother with this one, since it’s only used for javascript events. Many assistive technologies for the disabled can’t process javascript, so it should only be used to enhance your site, and should never be a requirement for using your site.

Layout: Order is important!

Make sure people aren’t entering their phone number instead of their name, or choosing apples when they’re trying to choose oranges. On the third and final page of this tutorial, I’ll teach you how to order things properly.

Please go to the last page to continue. It’s very short, I promise.

This post has multiple pages. Go to page: 1 2 3

If you found this article useful, please spread the word: