一、form的各種元素及屬性
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style>
/*IE6下有外邊距問題*/
form{margin:0;}
/*記住默認border 2px*/
input{margin:0;padding:0;}
/*一般只設置寬度，不設置高度*/
select{margin:0;}
/*resize:none；禁止用戶調整尺寸 overflow:auto 溢出時纔出現滾動條 outline:none;去掉焦點框，看需求*/
textarea{margin:0; padding:0;resize:none; overflow:auto; outline:none;}
form{border:1px solid red;}/*用於測試form之間的間隙*/
</style>
</head>
<body>
<form action="http://www.miaov.com/" method="get" target="_blank">
提交按鈕：<input type="submit" value="提交OK" name="" />
<br/><br/>
文本框：<input type="text" name="" />
<br/><br/>
密碼框：<input type="password" name="" />
<br/><br/>
單選按鈕：
<input type="radio" name="gender" id="a" /><label for="a">男</label>
<input type="radio" name="gender" id="b" /><label for="b">女</label>
<br/><br/>
<!--
checked 默認選中
disabled 禁用
-->
複選框：
<input type="checkbox" name="" disabled />宅
<input type="checkbox" name="" disabled />腐
<input type="checkbox" name="" />逛街
<input type="checkbox" name="" />健身
<input type="checkbox" name="" />直排
<input type="checkbox" name="" checked/>旅遊
<input type="checkbox" name="" />美食
<br/><br/>
<hr/>
上傳：<input type="file" name="" />
<br/><br/>
圖片：<input src="sun.jpg" type="image" name="" />
<br/><br/>
按鈕：<input type="button" name="" />
<br/><br/>
重置：<input type="reset" name="" />
<br/><br/>
隱藏：<input type="hidden" name="" />
<br/><br/>
<hr/>
下拉選框：
<select>
<option>1999</option>
<option>1998</option>
<option selected>1997</option>
<option>1996</option>
<option>1995</option>
</select>
<br/><br/>
文本域：<textarea></textarea>
</form>
<form>form2</form>
</body>
</html>
二、form元素的問題：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style>
input{margin:0;padding:0;}
/*background：0 center左右居左，上下居中*/
.text{width:300px; height:40px; border:1px solid blue; background:url(sun.jpg) 0 center no-repeat #FFC;}
.box{width:300px; margin-top:50px; height:40px; border:1px solid blue; background:url(sun.jpg) 0 center no-repeat #FFC;}
/*用作於間隙*/
.box input{width:300px; height:40px;border:none; background:none;}
</style>
</head>
<body>
<input type="text" name="" class="text"/>
<!--解決input背景圖滾動的方法-->
<div class="box">
<input type="text" name=""/>
</div>
</body>
</html>