表單標(biāo)簽
作用: 用于收集用戶信息, 讓用戶填寫麻昼、選擇相關(guān)信息
格式:
? ? 所有的表單內(nèi)容秫舌,都要寫在form標(biāo)簽里面
注意事項(xiàng):
所有的表單內(nèi)容,都要寫在form標(biāo)簽里面
form標(biāo)簽中有兩個(gè)比較重要的屬性action和method, 但就現(xiàn)目前大家的知識儲(chǔ)備而言暫時(shí)無法理解, 所以放到后面的課程中講解
input標(biāo)簽
如果說td是表格最核心的標(biāo)簽, 那么input就是表單最核心的標(biāo)簽. nput標(biāo)簽有一個(gè)type屬性, 這個(gè)屬性有很多類型的取值, 取值的不同就決定了input標(biāo)簽的功能和外觀不同
明文輸入框
作用: 用戶可以在輸入框內(nèi)輸入內(nèi)容
賬號:
暗文輸入框
作用: 用戶可以在輸入框內(nèi)輸入內(nèi)容
密碼:
給輸入框設(shè)置默認(rèn)值
賬號:
密碼:
規(guī)定輸入字段中的字符的最大長度
賬號:
單選框(radio)
作用: 用戶只能從眾多選項(xiàng)中選擇其中一個(gè)
單選按鈕百拓,天生是不互斥的亮瓷,如果想互斥琴拧,必須要有相同的name屬性
男 女 妖
多選框(checkbox)
作用: 用戶只能從眾多選項(xiàng)中選擇多個(gè)
復(fù)選框,最好也是有相同的name(雖然他不需要互斥嘱支,但是也要有相同的name)
籃球 足球 棒球
給單選艾蓝、多選設(shè)置默認(rèn)值
指定radio和checkbox默認(rèn)值, 前提是同一組內(nèi)容必須設(shè)置相同name屬性
男? ? 女? ? 妖 籃球 足球 棒球
label標(biāo)簽
作用: label標(biāo)簽不會(huì)向用戶呈現(xiàn)任何特殊效果。不過斗塘,它為鼠標(biāo)用戶改進(jìn)了可用性
注意事項(xiàng):
表單元素要有一個(gè)id赢织,然后label標(biāo)簽就有一個(gè)for屬性,for屬性和id相同就表示綁定了
所有表單元素都可以通過label綁定
賬號:男籃球
按鈕
作用: 定義可點(diǎn)擊按鈕(多數(shù)情況下馍盟,用于通過 JavaScript 啟動(dòng)腳本)
圖片按鈕
作用:定義圖像形式的提交按鈕
重置按鈕
作用: 定義重置按鈕于置。重置按鈕會(huì)清除表單中的所有數(shù)據(jù)
注意事項(xiàng):
這個(gè)按鈕不需要寫value自動(dòng)就有“重置”文字
reset只對form表單中表單項(xiàng)有效果
提交按鈕
作用:定義提交按鈕。提交按鈕會(huì)把表單數(shù)據(jù)發(fā)送到action屬性指定的頁面
注意事項(xiàng):
這個(gè)按鈕不需要寫value自動(dòng)就有“提交”文字
要想通過submit提交數(shù)據(jù)到服務(wù)器, 被提交的表單項(xiàng)都必須設(shè)置name屬性
默認(rèn)明文傳輸(GET)不安全, 可以將method屬性設(shè)置為POST改為非明文傳輸(學(xué)到Ajax再理解)
隱藏域
作用: 定義隱藏的輸入字段
暫時(shí)不用掌握, 在Ajax中對數(shù)據(jù)的CRUD操作有非常大的作用
取色器
HTML5中input類型增加了很多type類型, 例如color贞岭、date但是都不兼容, 后面講到瀏覽器兼容時(shí)會(huì)重點(diǎn)講解
日期選擇器
HTML5中input類型增加了很多type類型, 例如color八毯、date但是都不兼容, 后面講到瀏覽器兼容時(shí)會(huì)重點(diǎn)講解
數(shù)據(jù)列表
作用: 給輸入框綁定待選項(xiàng)
格式:
datalist>待選項(xiàng)內(nèi)容
如何給輸入框綁定待選列表
搞一個(gè)輸入框
搞一個(gè)datalist列表
給datalist列表標(biāo)簽添加一個(gè)id
給輸入框添加一個(gè)list屬性,將datalist的id對應(yīng)的值賦值給list屬性即可
請輸入你的車型:奔馳寶馬奧迪路虎賓利
多行文本框(文本域)
作用: textarea標(biāo)簽用于在表單中定義多行的文本輸入控件
cols屬性表示columns“列”, 規(guī)定文本區(qū)內(nèi)的可見寬度
rows屬性表示rows“行”, 規(guī)定文本區(qū)內(nèi)的可見行數(shù)
格式:
默認(rèn)
注意點(diǎn):
可以通過cols和rows來指定輸入框的寬度和高度
默認(rèn)情況下輸入框是可以手動(dòng)拉伸的
textarea{resize: none;? }
下拉列表
作用: select標(biāo)簽和ul、ol瞄桨、dl一樣话速,都是組標(biāo)簽. 用于創(chuàng)建表單中的待選列表, 可以從選擇某一個(gè)帶選項(xiàng)
格式:
選擇籍貫:北京河北河南山東山西湖北貴州
給下拉列表設(shè)置默認(rèn)值
和radio、checkbox一樣select也可以設(shè)置默認(rèn)值, 通過selected屬性設(shè)置
北京河北河南山東山西湖北貴州
給下拉列表添加分組
海淀區(qū)昌平區(qū)朝陽區(qū)天河區(qū)白云區(qū)貴州