Layout a form instance with CSS (discard table)

Css

This is an example of learning web standards, where we typically use tables for form layouts before we use them, and in this case we discard tables to use CSS to lay out the form.

CSS Setup code:

<style type= "Text/css" >

label{
Float:left;
width:120px;
Font-weight:bold;
}

Input, textarea{
width:180px;
margin-bottom:5px;
}

textarea{
width:250px;
height:150px;
}

. boxes{
Width:1em;
}

#submitbutton {
margin-left:120px;
margin-top:5px;
width:90px;
}

br{
Clear:left;
}

</style>

HTML code:

<form>

<label for= "User" >Name</label>
<input type= "text" name= "user" value= "/><br/>

<label for= "EmailAddress" >email address:</label>
<input type= "text" name= "EmailAddress" value= ""/><br/>

<label for= "Comments" >Comments:</label>
<textarea name= "Comments" ></textarea><br/>

<label for= "terms" >agree to terms?</label>
<input type= "checkbox" name= "terms" class= "boxes"/><br/>

<input type= "Submit" Name= "Submitbutton" id= "Submitbutton" value= "Submit"/>

</form>

In this example, the "label" label to layout the left part of the form, that is, the form's hints, so that the effect of the form display is divided into about two parts, the width of the left we can use the "label" label to Control.