Quick Forms Markup: Mix-and-Match Elements
August 29, 2007
- ‹ previous
- 114 of 132
- next ›
After coding a few dozen or more forms, it finally occurred to me one day that I was going about form creation the wrong way. Writing the code from scratch for every new form was a pain—no matter how many times I did it, I still had to look up the correct attributes and format. So I created a list of the most common form elements that I can copy-n-paste for quick-n-easy forms. On the chance that others might find it useful, here's my list.
Note About Tabindex and Accesskey
Or should I say, their absence. Tabindex is generally considered unnecessary and "should only be used in cases where the default tab order is not ideal." (WebAIM) In my experience, accesskeys can cause more confusion than help.
Text Field
<label for="email">Your email:</label>
<input type="text" id="email" name="email" />
<input type="text" id="email" name="email" />
Text Field With Value
<label for="website">URL:</label>
<input type="text" id="website" name="website" value="http://" />
<input type="text" id="website" name="website" value="http://" />
Textarea
<label for="comments">Your comments:</label>
<textarea id="comments" name="comments"></textarea>
<textarea id="comments" name="comments"></textarea>
Select List
<label for="vote">Rate this book:</label>
<select id="vote" name="vote">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="vote" name="vote">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
Radio
<label for="gender">Gender:</label>
<input type="radio" id="gender" name="gender" value="f" /> Female
<input type="radio" id="gender" name="gender" value="m" /> Male
<input type="radio" id="gender" name="gender" value="f" /> Female
<input type="radio" id="gender" name="gender" value="m" /> Male
Checkbox
<label for="time">Times available:</label>
<input type="time" name="time" value="mornings" /> Mornings
<input type="time" name="time" value="afternoons" /> Afternoons
<input type="time" name="time" value="evenings" /> Evenings
<input type="time" name="time" value="mornings" /> Mornings
<input type="time" name="time" value="afternoons" /> Afternoons
<input type="time" name="time" value="evenings" /> Evenings
Buttons
<input type="submit" value="» SEND" />
<input type="reset" value="Reset" />
<input type="reset" value="Reset" />
Fieldsets
<fieldset>
<legend>Personal Information</legend>
...
</fieldset>
<legend>Personal Information</legend>
...
</fieldset>
UPDATE:
Since writing this, I've spent some time on the Yahoo! User Interface Library (YUI)—the ultimate in "mix-and-match" elements and a brilliant resource for designers. For another take on the design or patterns library idea, read SmashingMagazine's discussion of frameworks, CSS Frameworks + CSS Reset: Design From Scratch.
