Web Development and Design Foundations with XHTML, 5th Edition

9.4 Using CSS to Style a Form^377

Figure 9.24
This page does not
use a table—just
CSS

The CSS follows:

#myForm { border: 3px solid #000000;

padding: 10px;

margin: 10px;

min-width: 500px;

}

.myRow { padding-bottom: 20px;

}

.mySubmit { margin-top: 10px;

margin-left: 110px;

}

.labelCol { float: left;

width: 100px;

text-align: right;

padding-right: 10px;

}

The XHTML code follows. Note the use of <div> elements.

<div id="myForm">

<form method="post">

<div class="myRow">

<label class="labelCol" for="myName">Name:</label>

<input type="text" name="myName" id="myName" />

</div>

<div class="myRow">

<label class="labelCol" for="myEmail">E-mail:</label>

<input type="text" name="myEmail" id="myEmail" />

</div>

<div>

<label class="labelCol" for="myComments">Comments:</label>

<textarea name="myComments" id="myComments" rows="2" cols="60">

</textarea>

</div>