Last time I went over my new pattern for forms.  It’s continued to serve me well so far, so I wanted to dig a little deeper into some more complex form layouts.

One input per line is pretty common for a form online.  However it’s not always the best-looking; sometimes it really improves the usability of your form to have inputs grouped together visually.  A great example of this is an address form.  Having one line per input (city, state, zip, etc) takes up a lot of vertical room and leaves for a lot of wasted horizontal space.

The layout for an address form I’ve decided on is above.  It’s good to leave plenty of room for address line 1 and 2 — they’ll usually contain lots more information than any other field.  City, on the other hand, is usually pretty short, as are the state, postal code, and country options.  As such I’ve gone with grouping city and state on one line, and then postal code and country on the last.

The first two lines are simple, pretty much just follow the same formatting from the previous post (note I’m assuming the final CSS from last post is active):

<fieldset>
<legend>Contact Information</legend>
<ol>
	<li><label for="address1">Address<span class="error"> *</span></label>
	      <div class="inputWrapper">
	      <input type="text" id="address1" name="address1" value="" size="50" />
	      <label for="address1">Address Line 1</label><br />

	      <input type="text" id="address2" name="address2" value="" size="50" />
	      <label for="address2">Address Line 2</label></div></li>
</ol>
</fieldset>

Pretty simple start.  We’re just having two inputs and labels within the inputWrapper div.  One item I’m not 100% on: I have two labels pointing to the first address prompt.  Both the main label, “Address:”, and the label under the input, “Address Line 1”, point to it.  Not sure if there is allowed to be multiple labels per input, but in this case it’s the markup I’m happiest with.

Anywho with the simple stuff out of the way let’s think about the remaining items.  At this point my paranoia sets in — I want to avoid floats if possible when dealing with multiple inputs on the same line to make sure floating doesn’t get in the way later.  So no wrapping each group (input/label) in a div and floating the divs.  Fear not, there is an equally as simple way to do this.

We’ll have two lines of items (per group): the inputs and then the labels.  We can follow the same basic format as have previously, we’ll just have to make everything inline and limit the width.  With them inlined we can use fixed widths to ensure that the labels line up under the inputs as we want (note CSS is inline to keep this simple, you should bring it out into classes where possible):

<fieldset>
<legend>Contact Information</legend>
<ol>
	<li><label for="address1">Address<span class="error"> *</span></label>
	      <div class="inputWrapper">
	      <!-- Address -->
	      <input type="text" id="address1" name="address1" value="" size="50" />
	      <label for="address1">Address Line 1</label><br />

	      <input type="text" id="address2" name="address2" value="" size="50" />
	      <label for="address2">Address Line 2</label><br />

	      <!-- City/State -->
	      <input type="text" id="city" name="city" value="" size="11" style="width: 200px; display:inline; margin-right: 30px;" />
	      <select name="state" id="state" style="width: 175px; display:inline;">
	          <option value="" selected="selected"></option>
	          <option value="AL">Alabama</option>
	          ...
	          <option value="WY">Wyoming</option>
	      </select><br />
	      <label for="city" style="width: 227px; display:inline;">City</label>
	      <label for="state" style="width: 175px; display:inline;">State / Province / Region</label><br />

	      <!-- Postal Code/Country -->
	      <input type="text" id="postalcode" name="postalcode" value="" size="11" style="width: 200px; display:inline; margin-right: 30px;" />
	      <select name="country" id="country" style="width: 175px; display:inline; ">
	          <option value=""></option>
	          <option value="CA">Canada</option>
	          ...
	          <option value="US" selected="selected">United States</option>
	      </select><br />
	      <label for="postalcode" style="width: 227px; display:inline;">Postal / Zip Code</label>
	      <label for="country" style="width: 175px; display:inline;">Country</label></div></li>	
</ol>
</fieldset>

And that’s it.  Not too bad once you take a second to read over it.  From here you can easily extend the pattern for any other multi-input group like first name/last name, etc.

Next Entry
Trek »

Previous Entry
« Semantically Delicious Forms