Quick Forms Markup: Mix-and-Match Elements

Error message

  • Deprecated function: The each() function is deprecated. This message will be suppressed on further calls in menu_set_active_trail() (line 2405 of /home1/markspap/public_html/kathy/includes/menu.inc).
  • Deprecated function: implode(): Passing glue string after array is deprecated. Swap the parameters in drupal_get_feeds() (line 394 of /home1/markspap/public_html/kathy/includes/common.inc).
August 29, 2007
Front-end Smithery

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" />

Text Field With Value

<label for="website">URL:</label>
<input type="text" id="website" name="website" value="http://" />

Textarea

<label for="comments">Your comments:</label>
<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>

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

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

Buttons

<input type="submit" value="» SEND" />
<input type="reset" value="Reset" />

Fieldsets

<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.

Similar Notes

Accessibility: No Longer an Option
Drupal vs. Movable Type and WordPress
Long Time, No See

Comments

Noted by Isaac Z. Schlueter on August 30, 2007

I'd like to second the accesskey and tabindex sentiment.

Tabindex is a great idea badly implemented. Unless EVERY single focusable on the page has a tabindex, it's a very disjointed and confusing user experience. It's better, IMO, to make sure that your elements are in the proper order in the source. If you're putting the last thing up on the top, then something is screwy anyhow, and tabindex probably isn't the best tool to fix the situation.

That being said, tabindex="-1" is the preferred way to make something focusable that wouldn't otherwise be, without adding it to the tab flow, according to the accessibility people here at Yahoo. (For example, say there's an H3 element that has a javascript onclick action--it might not make semantic sense to use an anchor, but blind users can't "click" on it unless their screen reader can focus it.)