An example of making a form with CSS

CSS   as follows:  html code <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "<a href=" http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "target=" _blank ">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>" ><ptml xmlns= "<a href= http://www.w3.org/1999/xhtml" target= "_blank" >http://www.w3.org/1999/xhtml< /a> "><pead> <meta http-equiv=" Content-type "content=" text/html;charset=gb2312 "/> <title> Untitled document </title> <styletype= "Text/css" > <!--label{float:left; width:150px;text-align:right;} input, Tex tarea{width:150px margin-bottom:5px;} textarea{width:250px; height:150px; boxes{width:1em;} #submitbutton {margin-left:150px; margin-top:5px; width:50px;} #resetbutton {margin-left:150px margin-top:5px; width:50px;} br{clear:left;}--> </style> </pead> &L t;body><form> <label for= "name" >NAME:</label> <inputtype= "text" name= "name" value= ""/> <br/> <labelfor= "adDress ">ADDRESS:</label> <input type=" text "name=" Address "value=" "/><br/> <labelfor=" Country ">COUNTRY:</label> <input type=" text "name=" Country "value=" "/><br/> <labelfor=" Contact ">CONTACT:</label> <input type=" text "Name=" Contacts "value=" "/><br/> <labelfor=" Phone ">phone: </label> <input type=" text "name=" PHONE "value=" "/><br/> <label for=" Fax "> Fax: </label><input type= "text" name= "Fax" value= "/><br/> <labelfor=" Subject ">SUBJECT:< /label> <input type= "text" name= "subject" value= ""/><br/> <labelfor= "description" >description: </label> <textareaname= "description" ></textarea> <br/> <inputtype= "Submit" Name= " Submitbutton "id=" Submitbutton "value=" Submit "/> <input type=" reset "name=" Resetbutton "id=" Resetbutton "value= "Reset"/> </form> </body> </ptml>

idea:This form is special, the left side is the text to the right of the input box, we can also have a floating method to achieve, the text plus lable tag, not because we want to define the style and join the lable, but this writing is one of the standard. A newline that is produced with a BR can also be used to define a clear left float. To sum up, that is, a lable definition of its left float, another input is the inline element so it will immediately follow the floating element, after adding a br to clear the float, the purpose of the purge is to not affect the next set of floating around.

The above form is simpler, so it can be used with style, but I recommend using tables for complex forms.

Supplementary NET Picks:
layout for a form
http://www.5dlog.com/article.asp?id=126
When designing a form layout, it is often tempting to want to use table, and now Quirksmode teaches us to use tableless forms.

In fact, the principle is to let <label> and <input> (including other form elements, such as: <select&gt, <textarea>) display properties for block and then float to the left, At the end of the line there are <br/> responsible for clearing floats. There is a fixed width, and the text is aligned again, so the beautiful layout will come out!

HTML section:

<form>
<label for= "Name" >Name</label>
<input id= "name" name= "name" ><br/>
<label for= "Address" >Address</label>
<input id= "Address" name= "address" ><br/>
<label for= "City" >City</label>
<input id= "City" Name= "City" ><br/>
</form>

CSS section:
Label,input {
Display:block;
width:150px;
Float:left;
margin-bottom:10px;
}

Label {
Text-align:right;
width:75px;
padding-right:20px;
}

BR {
Clear:left;
}

I like to use the end of the <br/> plus class= "clear", because so in <label> if you want to use <br/> will not be a problem.