在前端開發(fā)中經(jīng)常使用到表單來向服務(wù)器傳值.
form
form標(biāo)簽是一個(gè)表單標(biāo)簽的容器,該標(biāo)簽的開始和結(jié)束直接定義了一個(gè)表單.
- 屬性name 定義改表單的名字
- method屬性定義以什么方式向后臺(tái)提交數(shù)據(jù),一般使用post
- action屬性指定以什么腳本來處理提交的數(shù)據(jù)
input
input是一個(gè)自結(jié)束標(biāo)簽.他可以制定表單中的許多元素.常用屬性為name,type.
其中type屬性的不同創(chuàng)建出的input也不同
- type="text" 這是一個(gè)文本框
- type="password"這是一個(gè)密碼框
- type="radio" 這是一個(gè)單選按鈕
- type="checkbox"這是一個(gè)多選按鈕 value屬性表示提交到服務(wù)器的值
- type="image"定義圖片域 點(diǎn)擊可以提交 其中包含src屬性和width以及height屬性
- type="file"定義文件域
- type="submit"定義提交按鈕,其中id標(biāo)簽可定制按鈕上顯示的文字
- type="reset"表示充值所有表單數(shù)據(jù)
- type="button"表示一個(gè)按鈕,按鈕的功能可以使用js定制
- type="hidden"隱藏域
input的一些屬性
當(dāng)input為輸入框的時(shí)候可以使用maxlength指定文本框的最大輸入長度,readonly表示不可輸入 size指定根據(jù)輸入長度指定框的size
當(dāng)input為按鈕的時(shí)候使用checked訂制默認(rèn)選中,disabled指定可選狀態(tài)
button
button標(biāo)簽可以格式化按鈕上的文字,type屬性可以使用submit,reset和button指定與input同樣的功能.
select
select可以定制列表框,下拉菜單和選項(xiàng)組列表框.當(dāng)select為列表框和選項(xiàng)組列表框的時(shí)候可以指定列表框的size以及多選狀態(tài)mutiple
option為列表框中的元素.value屬性指定提交到服務(wù)器的值,selected屬性指定默認(rèn)選中的元素
optgroup為選項(xiàng)組,其中l(wèi)abel屬性表示該組的名字.
textarea
多行文本框
- cols必填屬性指定高度問多少字符
- rows必填屬性指定寬度
- readonly指定改文本框?yàn)橹蛔x
示例代碼
<!DOCTYPE Html>
<html>
<head>
<title>Joe</title>
</head>
<body>
<form name="regform" method="post" action="http://www.baidu.com"/>
單行文本框<input type="text" name="username" id="username" maxlength="10" readonly="readonly"/> <br/>
<label for="password">密碼框</label><input type="password" name="password" id="password" size="5"/> <br/>
隱藏域<input type="hidden" name="hidden" id="hidden"/> <br/>
單選按鈕<input type="radio" name="sex" id="male" checked="checked"/> 男
<input type="radio" name="sex" id="female"/> 女<br/>
復(fù)選框<input type="checkbox" name="hobby" value ="1" id="hfootball" disabled="disabled"/> 足球
<input type="checkbox" name="hobby" value ="2" id="hfootball" checked="checked"/> 籃球
<input type="checkbox" name="hobby" value ="3" id="hfootball"/> 網(wǎng)球<br/>
圖像域<input type="image" src="album.png" width="100px" height="20px" name="hobby" id="hfootball"/><br/>
文件上傳域<input type="file" name="file" id="file"/><br/>
提交按鈕<input type="submit" name="submit" id="提交按鈕"/><br/>
充值按鈕<input type="reset" name="reset" id="重置按鈕"/><br/>
普通按鈕<input type="button" name="button" id="普通按鈕"/><br/>
button提交按鈕<button type="submit" name="submit2">提交按鈕</button><br/>
button重置按鈕<button type="reset" name="reset2"><b>重置按鈕</b></button><br/>
button普通按鈕<button type="button" name="button2" disabled="disabled"><i>普通按鈕</i></button><br/>
下拉菜單<br/>
<select name="city" id="city">
<option value="beijing">北京</option>
<option>上海</option>
<option selected="selected">南京</option>
<option>天津</option>
</select>
<br/>
列表框<br/>
<select name="city1" id="city1" size="3" mutiple="mutiple">
<option value="beijing">北京</option>
<option>上海</option>
<option selected="selected">南京</option>
<option>天津</option>
</select>
<br/>
選項(xiàng)組列表框<br/>
<select name="city2" id="city2" size="6" mutiple="mutiple">
<optgroup label="一線城市">
<option value="beijing">北京</option>
<option>上海</option>
</optgroup>
<optgroup label="二線城市">
<option>南京</option>
<option>杭州</option>
<option>大連</option>
</optgroup>
</select>
<br/>
多行文本框<br/>
<textarea name="content" cols="28" rows="4" readonly="readonly">
1. 協(xié)議要求很多
2. 你別管,只要同意即可
</textarea>
</form>
</body>
</html>
