表單練習(xí)
我們寫完代碼，要有測試代碼的習(xí)慣：
下面我們檢驗"清空"按鈕：
如圖所示：
沒問題弓摘。
再來檢驗一下“注冊”按鈕
http://www.reibang.com/?zhouxingzhi=zhou&123456=123&sex=on&aihao=on&aihao=on&cc=555
我們需要進(jìn)一步完善代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表單</title>
</head>
<body>
<form action="http://www.reibang.com/">
<p>賬號：<input type="text" name="zhouxingzhi"/></p>
<p>密碼：<input type="password" name="123456"/></p>
<p>性別：
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
<input type="radio" name="sex" checked="checked"/>保密
</p>
<p>愛好：
<input type="checkbox" name="aihao"/>籃球
<input type="checkbox" name="aihao"/>讀書
<input type="checkbox" name="aihao" checked="checked"/>配音秀
</p>
<p>
簡介：
<textarea cols="30" rows="10" name="text"></textarea>
</p>
<p>
生日：<input type="date" name="day"/>
</p>
<p>
郵箱：<input type="email" name="email"/>
</p>
<p>
手機(jī)：<input type="number" name="phone"/>
</p>
<input type="submit" value="注冊"/> <input type="reset" value="清空"/>
<input type="hidden" name="cc" value="555"/>
</form>
</body>
</html>
運(yùn)行結(jié)果如圖所示：
最后分解一下地址欄的數(shù)據(jù)：
http://www.reibang.com/?
賬號部分
zhouxingzhi=zhouxingzhi&
密碼部分
123456=1223&
性別部分
sex=on&（疑問）
愛好部分
aihao=on&（疑問）
aihao=on&（疑問）
個人簡介部分
text=just++do+it&
生日部分
day=2004-12-01&
郵箱部分
email=134%40qq.com&
電話部分
phone=15213282306&cc=555
進(jìn)一步優(yōu)化代碼，給性別部分和愛好部分加上value屬性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表單</title>
</head>
<body>
<form action="http://www.reibang.com/">
<p>賬號：<input type="text" name="zhouxingzhi"/></p>
<p>密碼：<input type="password" name="123456"/></p>
<p>性別：
<input type="radio" value="boy"name="sex"/>男
<input type="radio"value="girl" name="sex"/>女
<input type="radio" value="secret"name="sex" checked="checked"/>保密
</p>
<p>愛好：
<input type="checkbox"name="aihao" value="basketball"/>籃球
<input type="checkbox" name="aihao"value="read"/>讀書
<input type="checkbox"name="aihao" value="movie dubbing" checked="checked"/>配音秀
</p>
<p>
簡介：
<textarea cols="30" rows="10" name="text"></textarea>
</p>
<p>
生日：<input type="date" name="day"/>
</p>
<p>
郵箱：<input type="email" name="email"/>
</p>
<p>
手機(jī)：<input type="number" name="phone"/>
</p>
<input type="submit" value="注冊"/> <input type="reset" value="清空"/>
<input type="hidden" name="cc" value="555"/>
</form>
</body>
</html>
運(yùn)行我們看一下地址欄：
地址欄：
http://www.reibang.com/?zhouxingzhi=zhouxingzhi&
123456=123&
sex=boy&
aihao=basketball&
aihao=movie+dubbing&
text=just+++do+++it&
day=2014-12-31&
email=134%40qq.com&
phone=12345677890&cc=555
