HTML and CSS Reference
In-Depth Information
<td><input type=”text” name=”name” id=”Name” /></td>
</tr>
<tr>
<td class=”labelText”><label for=”Email”>Email:</label></td>
<td><input type=”text” name=”email” id=”Email” /></td>
</tr>
<tr>
<td class=”labelText”><label for=”Tel”>Telephone:</label></td>
<td><input type=”text” name=”tel” id=”Tel” /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type=”submit” value=”Submit” /></td>
</tr>
</table>
</form>
When viewed in a browser (Figure 20-4), the labels move
closer to their associated form fields, making it easy for
users to follow the form at glance.
sTyLinG ForMs wiTH css
Although tables offer a very straightforward layout
option for forms, many web designers prefer a pure CSS
approach. In addition to opening up a more colorful
world of design possibilities, the two-column, right-
aligned label look-and-feel can easily be replicated with
just a few CSS rules.
FiGure 20-4
creating a Two-column Layout
The key to recreating a two-column form layout in CSS is separating the <label> tag from the
form control by using the for attribute as described in Lesson 19. Here's an example to refresh your
memory:
<label for=”fullName”> Name:</label>
<input type=”text” name=”fullName” id=”fullName” />
Because the <label> tag is not wrapped around the form control, you can declare a CSS rule for the
label selector that floats it to the left — and then align the text to the right within that floated width.
For example:
label {
width:100px;
float:left;
margin-right:10px;
text-align:right;
clear:left;
}
 
Search WWH ::




Custom Search