CSS 对表单操作实例~!

XHTTP:

<fieldset>
<legend>your contact details</legend>
<p>
<label for="author">name:<em class="required">(required)</em></label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">email address:</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url" > web address;</label>
<input name="url" id="url" type="text" />
</p></fieldset>

<fieldset>
<legend>commentes</legend>
<p>
<label for="text">message: </label>
<textarea name="text" id="text" cols="20" rows="10">
</textarea>
</p>

</fieldset>

<fieldset>
<p>
<label for="dateofbirth">Date of Birth:</label>
<input name="dateofbirth" id="dateofbirth" type="text" />
<label id="monthofbirthlabel" for="monthofbirth">
month of birth:</label>

<select name="monthofbirth" id="monthofbirth">
<option value="1">january</option>
<option value="2">february</option>
<option value="3">march</option>
</select>

<label id="yearofbirthlabel" for="yaerofbirth">year of birth:</label>
<input name="yearofbirth" id="yearofbirth" type="text" />
</p>

<fieldset id="favoritecolor">
<h2>Favorite color:</h2>
<div>
<p>
<input class="checkbox" id="red" name="red" type="checkbox" value="red" /><label>red</label>

<input class="checkbox" id="red2" name="red2" type="checkbox" value="red2" /><label>red</label>

<input class="checkbox" id="red3" name="red3" type="checkbox" value="red3" /><label>red</label>

<input class="checkbox" id="red4" name="red4" type="checkbox" value="red4" /><label>red</label>
</p>

</div>
<div>
<p>
<input class="checkbox" id="orange" name="orange" type="checkbox" value="orange" /><label>organge</label>

</p>
<p>
<input class="checkbox" id="orange2" name="orange2" type="checkbox"  value="orange2" />
<label>organge</label>

</p>
<p>
<input class="checkbox" id="orange3" name="orange3" type="checkbox"  value="orange3" />
<label>organge</label>

</p>
<p>
<input class="checkbox" id="orange4" name="orange4" type="checkbox"  value="orange4" />
<label>organge</label>

</p>

</div>

</fieldset>

</fieldset>

 

 

 

CSS:

fieldset{
margin: 1em 0;
padding:1em;
border:1px solid #ccc;
background:#f8f8f8;

 

}
legend{
font-weight:bold;
}

/*label{
display:block;

}*/

input{
width:200px;

}

textarea
{
width:300px;
height:100px;

}

input:focus,textarea:focus{
background:#ffc;

 

}

input[type="text"],textara{
border-top:2px solid #999;
border-left:2px solid #999;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;

 

}

.required{
font-size:0.75em;
color:#FF0000;

 

}

#monthofbirthlabel,#yearofbirthlabel{
text-indent:-10000em;
width:0;

}

input#dateofbirth{
width:3em;
margin-right:0.5em;

}

select#monthofbirth{
width:10em;
margin-right:0.5em;

}

input#yearofbirth{
width:5em;

}

fieldset #favoritecolor{
margin:0;
padding:0;
border:none;
background:transparent;
}

fieldset #favoritecolor h2{
width:10em;
float:left;
font-size:1em;
font-weight:normal;
}

fieldset #favoritecolor div{
width:8em;
float:left;

 

}

.clear{
clear:both;

}

fieldset #favoritecolor label{
width:3em;
float:none;
display:inline;

}

fieldset #favoritecolor p{
margin:0.3em 0;

}