表單標(biāo)簽
- 作用: 用于收集用戶(hù)信息, 讓用戶(hù)填寫(xiě)蛹批、選擇相關(guān)信息
- 格式:
<form>
所有的表單內(nèi)容，都要寫(xiě)在form標(biāo)簽里面
</form>
-
注意事項(xiàng):- 所有的表單內(nèi)容，都要寫(xiě)在form標(biāo)簽里面
- form標(biāo)簽中有兩個(gè)比較重要的屬性
action和method, 但就現(xiàn)目前大家的知識(shí)儲(chǔ)備而言暫時(shí)無(wú)法理解, 所以放到后面的課程中講解
input標(biāo)簽
如果說(shuō)td是表格最核心的標(biāo)簽, 那么input就是表單最核心的標(biāo)簽. nput標(biāo)簽有一個(gè)type屬性, 這個(gè)屬性有很多類(lèi)型的取值, 取值的不同就決定了input標(biāo)簽的功能和外觀不同
-
明文輸入框
- 作用: 用戶(hù)可以在輸入框內(nèi)輸入內(nèi)容
賬號(hào):<input type="text"/>
-
暗文輸入框
- 作用: 用戶(hù)可以在輸入框內(nèi)輸入內(nèi)容
密碼:<input type="password"/>
-
給輸入框設(shè)置默認(rèn)值
賬號(hào):<input type="text" value="123"/>密碼:<input type="password" value="123"/>
-
規(guī)定輸入字段中的字符的最大長(zhǎng)度
-
賬號(hào): <input type="text" name="fullname" maxlength="8" />image
-
-
單選框(radio)
- 作用: 用戶(hù)只能從眾多選項(xiàng)中選擇其中一個(gè)
- 單選按鈕惕蹄，天生是不互斥的绎狭，如果想互斥，必須要有
相同的name屬性
<input type="radio" name="xingbie" /> 男
<input type="radio" name="xingbie" /> 女
<input type="radio" name="xingbie" /> 妖
image
- 多選框(checkbox)
- 作用: 用戶(hù)只能從眾多選項(xiàng)中選擇多個(gè)
- 復(fù)選框侥涵，最好也是有相同的name（雖然他不需要互斥沼撕，但是也要有相同的name）
<input type="checkbox" name="aihao"/> 籃球
<input type="checkbox" name="aihao"/> 足球
<input type="checkbox" name="aihao"/> 棒球
image
- 給單選、多選設(shè)置默認(rèn)值
- 指定radio和checkbox默認(rèn)值, 前提是同一組內(nèi)容必須設(shè)置相同name屬性
<input type="radio" name="xingbie" checked="checked"/> 男
<input type="radio" name="xingbie" /> 女
<input type="radio" name="xingbie" /> 妖
<input type="checkbox" name="aihao" checked="checked"/> 籃球
<input type="checkbox" name="aihao" checked="checked"/> 足球
<input type="checkbox" name="aihao"/> 棒球
- label標(biāo)簽
- 作用: label標(biāo)簽
不會(huì)向用戶(hù)呈現(xiàn)任何特殊效果芜飘。不過(guò)务豺，它為鼠標(biāo)用戶(hù)改進(jìn)了可用性 - 注意事項(xiàng):
- 表單元素要有一個(gè)id，然后label標(biāo)簽就有一個(gè)for屬性嗦明，for屬性和id相同就表示綁定了
- 所有表單元素都可以通過(guò)label綁定
- 作用: label標(biāo)簽
<!--給文本框添加綁定-->
<label for="account">賬號(hào):</label>
<input type="text" id="account" />
<!--給單選框添加綁定-->
<input type="radio" name="sex" id="man" /> <label for="man">男</label>
<!--給多選框添加綁定-->
<input type="checkbox" id="basketball" />
<label for="basketball">籃球</label>
image
-
按鈕
- 作用: 定義可點(diǎn)擊按鈕（多數(shù)情況下笼沥，用于通過(guò) JavaScript 啟動(dòng)腳本）
<input type="button" value="點(diǎn)我丫" />
-
圖片按鈕
- 作用:定義圖像形式的提交按鈕
<input type="image" src="lnj.jpg" />
-
重置按鈕
- 作用: 定義重置按鈕。重置按鈕會(huì)清除表單中的所有數(shù)據(jù)
<input type="reset" />-
注意事項(xiàng):- 這個(gè)按鈕不需要寫(xiě)value自動(dòng)就有“重置”文字
- reset只對(duì)form表單中表單項(xiàng)有效果
-
提交按鈕
- 作用:定義提交按鈕娶牌。提交按鈕會(huì)把表單數(shù)據(jù)發(fā)送到action屬性指定的頁(yè)面
<input type="submit" />-
注意事項(xiàng):這個(gè)按鈕不需要寫(xiě)value自動(dòng)就有“提交”文字
要想通過(guò)submit提交數(shù)據(jù)到服務(wù)器, 被提交的表單項(xiàng)都必須設(shè)置name屬性
-
默認(rèn)明文傳輸(GET)不安全, 可以將method屬性設(shè)置為POST改為非明文傳輸(學(xué)到Ajax再理解)
[圖片上傳中...(image-1168b7-1550580686186-0)]
-
隱藏域
- 作用: 定義隱藏的輸入字段
<input type="hidden">- 暫時(shí)不用掌握, 在Ajax中對(duì)數(shù)據(jù)的CRUD操作有非常大的作用
-
取色器
<input type="color">-
HTML5中input類(lèi)型增加了很多type類(lèi)型, 例如color奔浅、date但是都不兼容, 后面講到瀏覽器兼容時(shí)會(huì)重點(diǎn)講解
image
-
日期選擇器
<input type="date">-
HTML5中input類(lèi)型增加了很多type類(lèi)型, 例如color、date但是都不兼容, 后面講到瀏覽器兼容時(shí)會(huì)重點(diǎn)講解
[圖片上傳中...(image-4cc960-1550580686186-1)]
數(shù)據(jù)列表
作用: 給輸入框綁定待選項(xiàng)
格式:
datalist>
<option>待選項(xiàng)內(nèi)容</option>
</datalist>
- 如何給輸入框綁定待選列表
- 搞一個(gè)輸入框
- 搞一個(gè)datalist列表
- 給datalist列表標(biāo)簽添加一個(gè)id
- 給輸入框添加一個(gè)list屬性,將datalist的id對(duì)應(yīng)的值賦值給list屬性即可
請(qǐng)輸入你的車(chē)型: <input type="text" list="cars">
<datalist id="cars">
<option>奔馳</option>
<option>寶馬</option>
<option>奧迪</option>
<option>路虎</option>
<option>賓利</option>
</datalist>
image
image
多行文本框(文本域)
- 作用: textarea標(biāo)簽用于在表單中定義多行的文本輸入控件
- cols屬性表示columns“列”, 規(guī)定文本區(qū)內(nèi)的可見(jiàn)寬度
- rows屬性表示rows“行”, 規(guī)定文本區(qū)內(nèi)的可見(jiàn)行數(shù)
- 格式:
<textarea cols="30" rows="10">默認(rèn)</textarea>
- 注意點(diǎn):
- 可以通過(guò)cols和rows來(lái)指定輸入框的寬度和高度
- 默認(rèn)情況下輸入框是可以手動(dòng)拉伸的
<!--禁止手動(dòng)拉伸-->
<style type="text/css">
textarea{
resize: none;
}
</style>
下拉列表
- 作用: select標(biāo)簽和ul诗良、ol汹桦、dl一樣，都是組標(biāo)簽. 用于創(chuàng)建表單中的待選列表, 可以從選擇某一個(gè)帶選項(xiàng)
- 格式:
選擇籍貫:
<select>
<option>北京</option>
<option>河北</option>
<option>河南</option>
<option>山東</option>
<option>山西</option>
<option>湖北</option>
<option>貴州</option>
</select>
- 給下拉列表設(shè)置默認(rèn)值
- 和radio鉴裹、checkbox一樣select也可以設(shè)置默認(rèn)值, 通過(guò)selected屬性設(shè)置
<select>
<option>北京</option>
<option>河北</option>
<option>河南</option>
<option>山東</option>
<option>山西</option>
<option>湖北</option>
<option selected="selected">貴州</option>
</select>
image
- 給下拉列表添加分組
<select>
<optgroup label="北京市">
<option>海淀區(qū)</option>
<option>昌平區(qū)</option>
<option>朝陽(yáng)區(qū)</option>
</optgroup>
<optgroup label="廣州市">
<option>天河區(qū)</option>
<option>白云區(qū)</option>
</optgroup>
<option selected="selected">貴州</option>
</select>
image
作者：極客江南
鏈接：http://www.reibang.com/p/e4a36feadc64
來(lái)源：簡(jiǎn)書(shū)
簡(jiǎn)書(shū)著作權(quán)歸作者所有舞骆，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處。
單標(biāo)簽
- 作用: 用于收集用戶(hù)信息, 讓用戶(hù)填寫(xiě)径荔、選擇相關(guān)信息
- 格式:
<form>
所有的表單內(nèi)容督禽，都要寫(xiě)在form標(biāo)簽里面
</form>
-
注意事項(xiàng):- 所有的表單內(nèi)容，都要寫(xiě)在form標(biāo)簽里面
- form標(biāo)簽中有兩個(gè)比較重要的屬性
action和method, 但就現(xiàn)目前大家的知識(shí)儲(chǔ)備而言暫時(shí)無(wú)法理解, 所以放到后面的課程中講解
input標(biāo)簽
如果說(shuō)td是表格最核心的標(biāo)簽, 那么input就是表單最核心的標(biāo)簽. nput標(biāo)簽有一個(gè)type屬性, 這個(gè)屬性有很多類(lèi)型的取值, 取值的不同就決定了input標(biāo)簽的功能和外觀不同
-
明文輸入框
- 作用: 用戶(hù)可以在輸入框內(nèi)輸入內(nèi)容
賬號(hào):<input type="text"/>
-
暗文輸入框
- 作用: 用戶(hù)可以在輸入框內(nèi)輸入內(nèi)容
密碼:<input type="password"/>
-
給輸入框設(shè)置默認(rèn)值
賬號(hào):<input type="text" value="123"/>密碼:<input type="password" value="123"/>
-
規(guī)定輸入字段中的字符的最大長(zhǎng)度
-
賬號(hào): <input type="text" name="fullname" maxlength="8" />image
-
-
單選框(radio)
- 作用: 用戶(hù)只能從眾多選項(xiàng)中選擇其中一個(gè)
- 單選按鈕猖凛，天生是不互斥的赂蠢，如果想互斥，必須要有
相同的name屬性
<input type="radio" name="xingbie" /> 男
<input type="radio" name="xingbie" /> 女
<input type="radio" name="xingbie" /> 妖
image
- 多選框(checkbox)
- 作用: 用戶(hù)只能從眾多選項(xiàng)中選擇多個(gè)
- 復(fù)選框辨泳，最好也是有相同的name（雖然他不需要互斥虱岂，但是也要有相同的name）
<input type="checkbox" name="aihao"/> 籃球
<input type="checkbox" name="aihao"/> 足球
<input type="checkbox" name="aihao"/> 棒球
image
- 給單選玖院、多選設(shè)置默認(rèn)值
- 指定radio和checkbox默認(rèn)值, 前提是同一組內(nèi)容必須設(shè)置相同name屬性
<input type="radio" name="xingbie" checked="checked"/> 男
<input type="radio" name="xingbie" /> 女
<input type="radio" name="xingbie" /> 妖
<input type="checkbox" name="aihao" checked="checked"/> 籃球
<input type="checkbox" name="aihao" checked="checked"/> 足球
<input type="checkbox" name="aihao"/> 棒球
- label標(biāo)簽
- 作用: label標(biāo)簽
不會(huì)向用戶(hù)呈現(xiàn)任何特殊效果。不過(guò)第岖，它為鼠標(biāo)用戶(hù)改進(jìn)了可用性 - 注意事項(xiàng):
- 表單元素要有一個(gè)id难菌，然后label標(biāo)簽就有一個(gè)for屬性，for屬性和id相同就表示綁定了
- 所有表單元素都可以通過(guò)label綁定
- 作用: label標(biāo)簽
<!--給文本框添加綁定-->
<label for="account">賬號(hào):</label>
<input type="text" id="account" />
<!--給單選框添加綁定-->
<input type="radio" name="sex" id="man" /> <label for="man">男</label>
<!--給多選框添加綁定-->
<input type="checkbox" id="basketball" />
<label for="basketball">籃球</label>
image
-
按鈕
- 作用: 定義可點(diǎn)擊按鈕（多數(shù)情況下蔑滓，用于通過(guò) JavaScript 啟動(dòng)腳本）
<input type="button" value="點(diǎn)我丫" />
-
圖片按鈕
- 作用:定義圖像形式的提交按鈕
<input type="image" src="lnj.jpg" />
-
重置按鈕
- 作用: 定義重置按鈕郊酒。重置按鈕會(huì)清除表單中的所有數(shù)據(jù)
<input type="reset" />-
注意事項(xiàng):- 這個(gè)按鈕不需要寫(xiě)value自動(dòng)就有“重置”文字
- reset只對(duì)form表單中表單項(xiàng)有效果
-
提交按鈕
- 作用:定義提交按鈕。提交按鈕會(huì)把表單數(shù)據(jù)發(fā)送到action屬性指定的頁(yè)面
<input type="submit" />-
注意事項(xiàng):這個(gè)按鈕不需要寫(xiě)value自動(dòng)就有“提交”文字
要想通過(guò)submit提交數(shù)據(jù)到服務(wù)器, 被提交的表單項(xiàng)都必須設(shè)置name屬性
-
默認(rèn)明文傳輸(GET)不安全, 可以將method屬性設(shè)置為POST改為非明文傳輸(學(xué)到Ajax再理解)
image
-
隱藏域
- 作用: 定義隱藏的輸入字段
<input type="hidden">- 暫時(shí)不用掌握, 在Ajax中對(duì)數(shù)據(jù)的CRUD操作有非常大的作用
-
取色器
<input type="color">-
HTML5中input類(lèi)型增加了很多type類(lèi)型, 例如color键袱、date但是都不兼容, 后面講到瀏覽器兼容時(shí)會(huì)重點(diǎn)講解
image
-
日期選擇器
<input type="date">-
HTML5中input類(lèi)型增加了很多type類(lèi)型, 例如color燎窘、date但是都不兼容, 后面講到瀏覽器兼容時(shí)會(huì)重點(diǎn)講解
image
數(shù)據(jù)列表
作用: 給輸入框綁定待選項(xiàng)
格式:
datalist>
<option>待選項(xiàng)內(nèi)容</option>
</datalist>
- 如何給輸入框綁定待選列表
- 搞一個(gè)輸入框
- 搞一個(gè)datalist列表
- 給datalist列表標(biāo)簽添加一個(gè)id
- 給輸入框添加一個(gè)list屬性,將datalist的id對(duì)應(yīng)的值賦值給list屬性即可
請(qǐng)輸入你的車(chē)型: <input type="text" list="cars">
<datalist id="cars">
<option>奔馳</option>
<option>寶馬</option>
<option>奧迪</option>
<option>路虎</option>
<option>賓利</option>
</datalist>
image
image
多行文本框(文本域)
- 作用: textarea標(biāo)簽用于在表單中定義多行的文本輸入控件
- cols屬性表示columns“列”, 規(guī)定文本區(qū)內(nèi)的可見(jiàn)寬度
- rows屬性表示rows“行”, 規(guī)定文本區(qū)內(nèi)的可見(jiàn)行數(shù)
- 格式:
<textarea cols="30" rows="10">默認(rèn)</textarea>
- 注意點(diǎn):
- 可以通過(guò)cols和rows來(lái)指定輸入框的寬度和高度
- 默認(rèn)情況下輸入框是可以手動(dòng)拉伸的
<!--禁止手動(dòng)拉伸-->
<style type="text/css">
textarea{
resize: none;
}
</style>
下拉列表
- 作用: select標(biāo)簽和ul、ol蹄咖、dl一樣褐健，都是組標(biāo)簽. 用于創(chuàng)建表單中的待選列表, 可以從選擇某一個(gè)帶選項(xiàng)
- 格式:
選擇籍貫:
<select>
<option>北京</option>
<option>河北</option>
<option>河南</option>
<option>山東</option>
<option>山西</option>
<option>湖北</option>
<option>貴州</option>
</select>
- 給下拉列表設(shè)置默認(rèn)值
- 和radio、checkbox一樣select也可以設(shè)置默認(rèn)值, 通過(guò)selected屬性設(shè)置
<select>
<option>北京</option>
<option>河北</option>
<option>河南</option>
<option>山東</option>
<option>山西</option>
<option>湖北</option>
<option selected="selected">貴州</option>
</select>
image
- 給下拉列表添加分組
<select>
<optgroup label="北京市">
<option>海淀區(qū)</option>
<option>昌平區(qū)</option>
<option>朝陽(yáng)區(qū)</option>
</optgroup>
<optgroup label="廣州市">
<option>天河區(qū)</option>
<option>白云區(qū)</option>
</optgroup>
<option selected="selected">貴州</option>
</select>
image
作者：極客江南
來(lái)源：簡(jiǎn)書(shū)
