精美的web表单设计-优快云博客

挺不错的web表单:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Web表单</title>
<style type="text/css">
/**/
input {
 background-color: #666699;
}
select {
 background-color: #666699;
 color: #ffffff;
}
textarea {
 background-color: #666699;
 color: #ffffff;
}
form {
 border: 1px solid #666699;
 padding: 5px;
}
.texta {
 font-size: 12px;
 background-color: #CCCCCC;
 border: 1px solid #666666;
}
form#login {  
 background-color: #CCCCCC;  
 color: #000000;  
 border: 1px solid #999999;  
 font-family: Verdana, Arial, Helvetica, sans-serif;  
 font-size: 10px;  
 text-align: right;  
}
#login .text {  
 font-family: Verdana, Arial, Helvetica, sans-serif;  
 font-size: 11px;  
 width: 100px;  
 margin-right: 6px;  
}
#login .buttons {  
 font-family: Verdana, Arial, Helvetica, sans-serif;  
 font-size: 10px;  
 background-color: #333333;  
 color: #FFFFFF;  
 margin-right: 6px;  
}
#signup table {  
 background-color: #F9FBFD;  
 color: #000000;  
 width: 440px;  
 border: 1px solid #D7E5F2;  
 border-collapse: collapse;  
} 
#signup td {  
 border: 1px solid #D7E5F2;  
 padding-left: 4px;  
}
.labelcell {    
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;    
 color: #3670A7;    
 background-color: transparent;    
 width: 220px;    
}    
.fieldcell {    
 background-color: #F2F7FB;    
 color: #000000;    
 text-align: right;    
 margin-right: 0px;    
 padding-right: 0px;    
}   
.smalllabelcell {    
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;    
 background-color: transparent;    
 color: #3670A7;    
 width: 100px;    
}    
.smallfieldcell {    
 background-color: #F2F7FB;    
 color: #000000;    
 text-align: right;    
}
.fieldcell input {    
 width: 200px;    
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;    
 background-color: #D7E5F2;    
 color: #102132;    
 border: 1px solid #284279;    
 margin-right: 0px;    
}
.smallfieldcell input {    
 width: 100px;    
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;    
 background-color: #D7E5F2;    
 color: #102132;    
 border: 1px solid #284279;    
}   
.smallfieldcell select {    
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;    
 background-color: #D7E5F2;    
 color: #102132;    
 border: 1px solid #284279;    
}
.button {    
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;    
 background-color: #D7E5F2;    
 color: #102132;    
 margin-left: 12px;    
 margin-top: 3px;    
 margin-bottom: 2px;    
}
</style>
</head>

<body>
<input name="" type="text" />
<input name="" type="radio" value="" />
<input name="" type="radio" value="" />
<input name="" type="button" />
<hr/>
<select name="">
	<option>高达立马</option>
	<option>新加坡</option>
	<option>吐鲁番</option>
</select>
<hr/>
<textarea name="" cols="80" rows="5"></textarea>
<hr/>
<form action="" method="get">
	<input name="" type="text" /><br/>
	<input name="" type="button" value="提交"/>
</form>
<hr/>
<input name="textfield" type="text" class="texta" />
<hr/>

<form name="login" id="login" method="post" action="#">  
 <label>Username:  
 <input type="text" name="user" tabindex="1" class="text"/>  <br/>
 </label>  
 <label>Password:  
 <input type="password" name="password" tabindex="2" class="text"/>    <br/>
 <input type="submit" name="Submit" value="Submit" tabindex="3"  class="buttons"/>  
 </label>  
</form>
<hr/>

<form name="signup" id="signup" method="post" action="#">  
 <table>  
   <tr>    
     <td colspan="2" class="labelcell"><label for="name">Name</label></td>  
     <td colspan="2" class="fieldcell"> <input type="text" name="name" id="name" tabindex="1" /></td>  
   </tr>  
   <tr>    
     <td colspan="2" class="labelcell"><label for="address1">Address Line 1</label></td>  
     <td colspan="2" class="fieldcell"> <input type="text" name="address1" id="address2" tabindex="2" /></td>  
   </tr>  
   <tr>    
     <td colspan="2" class="labelcell"><label for="address2">Address Line 2</label></td>  
     <td colspan="2" class="fieldcell"> <input type="text" name="address2" id="address2" tabindex="3" /></td>  
   </tr>  
   <tr>    
     <td colspan="2" class="labelcell"><label for="city">City</label></td>  
     <td colspan="2" class="fieldcell"> <input type="text" name="city" id="city" tabindex="4" /></td>  
   </tr>  
   <tr>    
     <td class="smalllabelcell"><label for="state">State</label></td>  
     <td class="smallfieldcell"><select name="state" id="state" tabindex="5">  
         <option value="">-- Select ---</option>  
         <option value="AL" >Alabama</option>  
         <option value="AK" >Alaska</option>  
       </select></td>  
     <td class="smalllabelcell"><label for="zip">Zip</label></td>  
     <td class="smallfieldcell"> <input type="text" name="zip" id="zip" tabindex="6" /></td>  
   </tr>  
   <tr>    
     <td colspan="2" class="labelcell"><label for="email">Email Address</label></td>  
     <td colspan="2" class="fieldcell"><input type="text" name="email" id="email" tabindex="7" /></td>  
   </tr>  
   <tr>    
     <td colspan="4"><input type="submit" name="Submit" value="Submit" tabindex="8" class="button"/></td>  
   </tr>  
 </table>  
</form>
</body>
</html>
效果图见附件