Forms style guide

This is brief guide to write usable and designer-friendly HTML forms. Following the tips described below makes very easy to style and customize the appearance of the forms later.

The markup

Start with this markup while writing a new form.

<form action="#" method="post">

    <fieldset>
      <legend>Personal information</legend>
      
        <label id="fname">First name</label>
        <input type="text" size="20" id="fname" name="fname" value="" />
        <p class="tip">Some help text here.</p>

        <label for="lname">Last name</label>
        <input type="text" size="20" id="lname" name="lname" value="" />
        
        <label>
          <input type="checkbox" name="remember" value="1" />
            Remember my personal details
        </label>

    </fieldset>

    <fieldset>
      <legend>Pick one</legend>
      <label><input type="radio"  name="p" value="1" /> One</label>
      <label><input type="radio"  name="p" value="2" /> Two</label>
      <label><input type="radio"  name="p" value="3" /> Three</label>
    </fieldset>

    <input type="submit" class="button" name="" value="Submit Info" />

</form>

Rails helpers like start_form_tag, submit_tag, text_field are a good starting points, since they do not add boilerplate to the generated markup.

Five easy steps

• Use <fieldset> to group fields logically.

• Use <legend> to specify a label for a group of related fields.

• Wrap into a label check boxes and radio buttons. This will made the label of the check boxes and radio buttons clickable in modern browsers like IE7, Firefox, Opera, etc.

• Use <label> and the its for attribute to connect a the label to its relative input field.

• Assign a button class to to submit and reset buttons. This will allow to style the buttons via CSS in IE6 too. While using the submit_tag helper do the following:

submit_tag 'Submit Info', :class => 'button'

Check Rumrz forms for a live example. You can copy the Rumrz's form.css file found in the SVN repos for this new project. I'll later tweak it for match the new theme.

Thank you.