Forms. Forms are boring. 75% of all work you do with forms is exactly like all the rest of the work you do with forms. BO-RING.
But, they’re the gateway to making real money on the web, so they’re kind of important.
Hopefully, after today you’ll know all about forms and will love them.
Let’s take a look at our example form:
<form action="http://www.drunkenfist.com/304/wp-comments-post.php" method="post" id="commentform">
<fieldset>
<legend>Contact Info:</legend>
<p>
<label for="author">Name (required)</label>
<input type="text" name="author" id="author" value="" tabindex="1" />
</p>
<p>
<label for="email">Mail (will not be published)(required)</label>
<input type="email" name="email" id="email" value="" tabindex="2" />
</p>
<p>
<label for="url">Website</label>
<input type="url" name="url" id="url" value="" tabindex="3" />
</p>
</fieldset>
<p>
<label for="comment">Comments</label>
<textarea name="comment" tabindex="4"></textarea>
</p>
<div class="button">
<input name="submit" type="submit" id="submit" tabindex="5" value="Submit" />
</div>
</form>
This sample is based on the default WordPress theme. It’s maybe not as complicated as a sign-up form, but it does show the basics. On to it then.
Use Labels
Labels are great for accessibility, they make forms more usable and they provide hooks for CSS. What’s not to like?
Labels allow you to associate text with form input elements. Screen readers will read the label to indicate what each form element is. Labels also create a much larger hit area for check boxes and radio buttons, that helps people with reduced vision as well as regular users.
Test it out:
My no-label checkbox
So, yeah, use labels.
Fieldsets and Legends
I don’t use these all the time, but they’re nice to use on longer, single page forms. The group like form elements together both visually and logically and provide a handy heading to describe the section in the form of the legend.
Visually they’re nice and they provide real context for grouped form inputs.
Check one out:
(You like that CSS3 in there, don’t you?)
Here’s the markup for that example:
<fieldset>
<legend>Contact Info:</legend>
<p>
<label for="author">Name (required)</label>
<input type="text" name="author" id="author" value="" />
</p>
<p>
<label for="email">Mail (will not be published)(required)</label>
<input type="email" name="email" id="email" value="" />
</p>
<p>
<label for="url">Website</label>
<input type="url" name="url" id="url" value="" />
</p>
</fieldset>
Tabindex
Tabindex is an interesting case. I’ve seen the attribute offered up as a best practice in a few places, but the reality is unless you’ve got a screwed up source order, you don’t really need to use them. Looking at the example (which is based on WordPress’ default theme) you can see that the order of the inputs is exactly the same as the tabindex. Which means the tabindex is superfluous.
I’ve actually set up a Jira issue to remove those from my theme. See, even I can learn something from these articles 🙂
Optgroup
The optgroup is a really nice way to organize select elements. Check this one out:
And here’s what the code looks like:
<label for="super">Choose your favorite super hero?</label>
<select id="super" name="super">
<optgroup label="Fantastic Four">
<option value="1">Mr. Fantastic</option>
<option value="2">Invisible Woman</option>
<option value="3">The Thing</option>
<option value="4">The Human Torch</option>
</optgroup>
<optgroup label="JLA">
<option value="5">Superman</option>
<option value="6">Batman</option>
<option value="7">Wonder Woman</option>
<option value="8">Flash</option>
<option value="9">Green Lantern</option>
<option value="10">Aquaman</option>
<option value="11">Martian Manhunter</option>
</optgroup>
<optgroup label="Avengers">
<option value="12">Captain America</option>
<option value="13">Iron Man</option>
<option value="14">Giant-Man</option>
<option value="15">Hawkeye</option>
<option value="16">The Vision</option>
<option value="17">The Wasp</option>
<option value="18">Wonder Man</option>
</optgroup>
<optgroup label="x-men">
<option value="19">Cable</option>
<option value="20">Angel</option>
<option value="21">The Beast</option>
<option value="22">Banshee</option>
<option value="23">Colossus</option>
<option value="24">Cyclops</option>
<option value="25">Havok</option>
<option value="26">Iceman</option>
<option value="27">Phoenix </option>
<option value="28">Nightcrawler</option>
<option value="29">Prof. Charles Xavier</option>
<option value="30">Polaris</option>
<option value="31">Storm</option>
<option value="32">Wolverine</option>
</optgroup>
<optgroup label="independent">
<option value="33">Daredevil</option>
<option value="34">Spider-Man</option>
<option value="35">the Hulk</option>
</optgroup>
</select>
</label>
If you’ve been reading along with me you’ll definitely see why I like the optgroup. It provides both visual and programmatic organization to the list. You don’t need them all the time, but when you do it’s great to have in your toolbox.
HTML5
HTML5 has introduced a ton of new input types an attributes. They’re really cool. They’re far more specific than type=”text” and will allow for plenty of enhancements from the browser vendors. Here’s a small sampling:
type=”search”
Indicates that the text is a search box.
type=”url”
Indicates that the field should contain a URL.
type=”email”
Indicates that the field is expecting an email address.
type=”datetime”
A date picker. This will save a ton of code as people will be able to rely on native date pickers instead of Javascript driven ones.
type=”color”
A color picker.
placeholder attribute
Indicates text that should be treated as a placeholder.
And there are plenty more where that came from.
Had enough of forms? I have. Next time, I’ll be going through some of the new HTML5 elements. Because they’re cool.
Good tips! Thanks for the info.