定義和用法
<form> 標(biāo)簽用于為用戶輸入創(chuàng)建 HTML 表單。
表單能夠包含input 元素,比如文本字段、復(fù)選框、單選框、提交按鈕等等。
表單還可以包含 menus、textarea、fieldset、legend、label元素
表單用于向服務(wù)器傳輸數(shù)據(jù)。
- 定義:
<form action="提交到服務(wù)器地址" method="get/post"> </form>
- 單行文本框<input type="text"/>(input 的type 屬性的默認(rèn)值就是"text")
<input type = “text” name=“名稱”/>
單行文本框的主要屬性:
size:指定文本框的寬度,以字符個(gè)數(shù)為單位;在大多數(shù)瀏覽器中,文本框的缺省寬度是20個(gè)字符。
value:指定文本框的默認(rèn)值,是在瀏覽器第一次顯示表單或者用戶單擊<input type="reset"/>按鈕之后在文本框中顯示的值。
maxlength:指定用戶輸入的最大字符長(zhǎng)度。
readonly:只讀屬性,當(dāng)設(shè)置readonly屬性后,文本框可以獲得焦點(diǎn),但用戶不能改變文本框中的value。
disabled:禁用,當(dāng)文本框被禁用時(shí),不能獲得焦點(diǎn),當(dāng)然,用戶也不能改變文本框的值。并且在提交表單時(shí),瀏覽器不會(huì)將該文本框的值發(fā)送給服務(wù)器。 - 密碼框<input type="password"/>
<input type=“password” name=“名稱”/> - 單選按鈕<input type="radio"/>
使用方式:使用name相同的一組單選按鈕,不同radio設(shè)定不同的value值,這樣通過(guò)取指定name的值就可以知道誰(shuí)被選中了,不用單獨(dú)的判斷。單選按鈕的元素值由value屬性顯式設(shè)置,表單提交時(shí),選中項(xiàng)的value和name被打包發(fā)送,不顯式設(shè)置value。
<input type=“radio” name=“gender” value=“male”/> <input type=“radio” name=“gender” value=“female”/> - 復(fù)選框<input type="checkbox"/>
復(fù)選框的checked屬性表示是否被選中,<input type="checkbox" checked />
<label><input type="checkbox" name="" value="dota">dota</label> <label><input type="checkbox" name="" value="旅游" checked>旅游</label> <label><input type="checkbox" name="" value="寵物" checked>寵物</label>
<label></label>標(biāo)簽
在<input type=“”>前可以寫普通的文本來(lái)修飾,但是單擊修飾文本的時(shí)候input并不會(huì)得到焦點(diǎn),而用label則可以,for屬性指定要修飾的控件的id,<label for=“txt1” >內(nèi)容</label>.
隱藏域<input type="hidden"/>
隱藏域通常用于向服務(wù)器提交不需要顯示給用戶的信息
<input type=“hidden” name=“隱藏域”/>文件上傳<input type="file"/>
<input type="file" name="" accept="定義上傳文件類型">下拉框<select>標(biāo)簽
<select>標(biāo)記創(chuàng)建一個(gè)列表框,<option>標(biāo)記創(chuàng)建一個(gè)列表項(xiàng),<select>與嵌套的<option>一起使用,共同提供在一組選項(xiàng)中進(jìn)行選擇的方式。
<option selected>可以將這個(gè)項(xiàng)設(shè)定為選擇項(xiàng)
<select> <option value="beijing">北京</option> <option value="shanghai" selected>上海</option> <option value="hangzhou">杭州</option> </select>多行文本<textarea></textarea>
<textarea name="" cols="10" rows="5" > 默認(rèn)顯示的文本 </textarea>提交按鈕<input type="submit"/>
當(dāng)用戶單擊<inputt type="submit"/>的提交按鈕時(shí),表單數(shù)據(jù)會(huì)提交給<form>標(biāo)簽的action屬性所指定的服務(wù)器處理程序??梢栽O(shè)置value屬性修改按鈕的顯示文本。
<input type="submit" value="提交"/>重置按鈕<input type="reset"/>
當(dāng)用戶單擊<input type="reset"/>按鈕時(shí),表單中的值被重置為初始值。在用戶提交表單時(shí),重置按鈕的name和value不會(huì)提交給服務(wù)器。
<input type=“reset” value=“重置按鈕"/>