HTML and CSS Reference
In-Depth Information
<tr>
<td
class="myLabel"
><label for="myEmail">E-mail:</label></td>
<td><input type="text" name="myEmail" id="myEmail" /></td>
</tr>
<tr>
<td
class="myLabel"
><label for="myComments">Comments:</label>
</td>
<td><textarea name="myComments" id="myComments" rows="2"
cols="60"></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Get Newsletter" />
</td>
</tr>
</table>
</form>
Using “Pure” CSS to Style a Form.
In this method, the CSS box model is used to
create a series of boxes, as shown in Figure 9.23: the outermost box defining the form
area, a series of boxes contained in the form area (one for each line in the form), and
the innermost boxes to align the form text. CSS is used to configure each of the box
types previously described. The
myForm
id declares properties for the entire form area.
The
myRow
class sets the height of a typical line in the form. The
mySubmit
class config-
ures the display of the submit button with declarations for the left and top margins.
The
labelCol
class is the key to aligning the text. The area has a width of 100 pixels
and the text will align to the right.
Figure 9.23
A sketch of the box
model used to
configure the form
Figure 9.24 displays a Web page with a form configured in this manner (see
Chapter9/form2.html in the student files).
As you view the following CSS and XHTML, note that the
labelCol
class floats to the
left side of the form and results in a neatly aligned text label for each input box.
Search WWH ::
Custom Search