23screens

Forms can be complicated. Here are a few guidelines to take the pain away.

• Use fieldsets to group sections of forms and related inputs
• Use tables to group labels, inputs, and help.  Using tables to lay out forms isn’t the best, in terms of semantic markup, but we’re making a slight compromise here to ease development.

<form id="oc-join-form" name="edit_form" method="post" enctype="multipart/form-data" action="/portal_memberdata/portal_factory/OpenMember/openmember.2007-05-08.0523490218/reg_form">
	<fieldset>
	  <legend class="headingBlock">
		<h1>Join OpenPlans</h1>
		<p class="oc-headingContext">Registration is free and your email will not be
		shared with anyone, however, you will need to confirm your email address in order to avoid
		spam bots abusing this system
		</p>
	  </legend>
	  <table class="oc-form">
		<tbody>
		  <tr class="oc-form-row">
			<th scope="row" class="oc-form-label">
			  <label for="">Username</label>
			</th>
			<td class="oc-form-value">
			  <input type="text" name="__ac_name" id="__ac_name" />
			</td>
			<td class="oc-form-help">
			  <span class="oc-form-context">
			  	Pick something funny
			  </span>
			  <span id="oc-username-validator" class="oc-form-validator">
			  	Sorry, that username is taken
			  </span>
			</td>
		  </tr>
		  <tr class="oc-form-row">
			<th scope="row" class="oc-form-label">
			  <label for="">Full Name</label>
			</th>
			<td class="oc-form-value">
			  <input type="text" />
			</td>
			<td class="oc-form-help">
			  <span class="oc-form-context">
				(optional)
			  </span>
			  <span class="oc-form-validator">

			  </span>
			</td>
		  </tr>
		</tbody>
	  </table>
	</fieldset>
  </form>

This markup will make the following naked html:

Add CSS, and you get the finished product: