Styling Forms - Pro CSS Techniques - page 250

Figure 11-13. Form labels to the left of their input fields, but with text right-aligned, creating
a clean center line
Many developers have used nonsemantic table elements to create this look—but it's not
necessary. Instead, we can take advantage of the fact that input elements need not be nested
within their label.
We've modified our form's (X)HTML so that each input element is a sibling of, rather than
a child of, its label (note the addition of the for attribute on label elements to explicitly state
the relationship):
<form id="payment_form" action="/path/to/action" method="post">
<fieldset id="name">
<legend>Name</legend>
<label for="title">Title</label>
<select id="title1" name="title1">
<option selected="selected">Mr.</option>
<option>Mrs.</option>
<option>Ms.</option>
</select>
<label for="first-name">First name</label>
<input id="first-name" name="first-name" type="text" />
<label for="last-name">Last name</label>
<input id="last-name" name="last-name" type="text" />
<br />
</fieldset>
<fieldset id="address">
<legend>Address</legend>
<label for="street">Street</label>
<input id="street" name="street" type="text" />
<br />
<label for="city">City</label>
<input id="city" name="city" type="text" />
<label for="state">State</label>
<input id="state" name="state" type="text" />
<label for="zip">Zip code</label>
<input id="zip" name="zip" type="text" />
<br />
<label for="country">Country</label>