The Problem
Many web pages have <input> form elements like this:
what would you like with your drink? <input type="checkbox" name="withice">ice <input type="checkbox" name="withlid">plastic lid <input type="checkbox" name="withstraw">straw
or:
what kind of ice? <input type="radio" name="ice" value="crush">crushed ice <input type="radio" name="ice" value="cube">ice cubes
The problem is, you have to click the little box or circle to mark/unmark the item. You cannot click the words next to them! Try clicking on the words:
what would you like with your drink? ice plastic lid straw
what kind of ice? crushed ice ice cubes
This inconsistency makes it difficult for your users, leaving them with a difficult experience on your web site. Your site doesn't feel as "friendly" as other sites, even if they can't figure out why.
The Solution
There is a way to connect the text near a form element with the element itself, so either one can be clicked to activate the control:
what would you like with your drink? <label for=ice1><input type="checkbox" name="withice" id=ice1>ice</label> <label for=ice2><input type="checkbox" name="withlid" id=ice2>plastic lid</label> <label for=ice3><input type="checkbox" name="withstraw" id=ice3>straw</label>
what kind of ice? <label for=icecrush><input type="radio" id=icecrush name="ice" value="crush">crushed ice</label> <label for=icecube><input type="radio" id=icecube name="ice" value="cube">ice cubes</label>
Here, try it out:
what would you like with your drink?
what kind of ice?
Notes
You can use the same values for "id" and "name" fields of each form element if you want to. In these examples I used different values to show it can be done.
Paying attention to detail, and making life easier for your customers, is what distinguishes a great web site from an ordinary one.
Don't miss the latest web tips and tricks!
Subscribe to our low-volume mailing list:
Privacy Policy
| Copyright © 2006 Fastech Learning LLC, all rights reserved. |
| Phone toll free 1-866-464-6688, Phoenix Metro area 480-895-6688 |
| Problem with this web site? please let us know |
