表單標簽作用: 用于收集用戶信息, 讓用戶填寫、選擇相關信息
格式:
<form> 所有的表單內容牲剃,都要寫在form標簽里面</form>
注意事項:
所有的表單內容,都要寫在form標簽里面
form標簽中有兩個比較重要的屬性action
和method
input標簽
如果說td是表格最核心的標簽, 那么input就是表單最核心的標簽. nput標簽有一個type屬性, 這個屬性有很多類型的取值, 取值的不同就決定了input標簽的功能和外觀不同
明文輸入框
作用: 用戶可以在輸入框內輸入內容
賬號:<input type="text"/>
暗文輸入框作用: 用戶可以在輸入框內輸入內容
密碼:<input type="password"/>
給輸入框設置默認值賬號:
<input type="text" value="123"/>
密碼:<input type="password" value="123"/>
規(guī)定輸入字段中的字符的最大長度賬號:
<input type="text" name="fullname" maxlength="8" />
單選框(radio)作用: 用戶只能從眾多選項中選擇其中一個
單選按鈕歇攻,天生是不互斥的驮樊,如果想互斥,必須要有相同的name屬性
<input type="radio" name="xingbie" /> 男
<input type="radio" name="xingbie" /> 女
<input type="radio" name="xingbie" /> 妖
多選框(checkbox)作用: 用戶只能從眾多選項中選擇多個
復選框柑晒,最好也是有相同的name(雖然他不需要互斥欧瘪,但是也要有相同的name)
<input type="checkbox" name="aihao"/> 籃球
<input type="checkbox" name="aihao"/> 足球
<input type="checkbox" name="aihao"/> 棒球
給單選、多選設置默認值指定radio和checkbox默認值, 前提是同一組內容必須設置相同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標簽作用: label標簽不會向用戶呈現(xiàn)任何特殊效果
匙赞。不過佛掖,它為鼠標用戶改進了可用性
注意事項:表單元素要有一個id,然后label標簽就有一個for屬性涌庭,for屬性和id相同就表示綁定了
所有表單元素都可以通過label綁定
<!--給文本框添加綁定-->
<label for="account">賬號:</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>```
重置按鈕
作用: 定義重置按鈕芥被。重置按鈕會清除表單中的所有數(shù)據(jù)
`<input type="reset" />`
注意事項:
這個按鈕不需要寫value自動就有“重置”文字
reset只對form表單中表單項有效果
提交按鈕
作用:定義提交按鈕。提交按鈕會把表單數(shù)據(jù)發(fā)送到action屬性指定的頁面
`<input type="submit" />`
注意事項:
這個按鈕不需要寫value自動就有“提交”文字
要想通過submit提交數(shù)據(jù)到服務器, 被提交的表單項都必須設置name屬性
默認明文傳輸(GET)不安全, 可以將method屬性設置為POST改為非明文傳輸(學到Ajax再理解)
隱藏域
作用: 定義隱藏的輸入字段
`<input type="hidden">`
數(shù)據(jù)列表
作用: 給輸入框綁定待選項
格式:
`datalist> <option>待選項內容</option></datalist>`
如何給輸入框綁定待選列表
搞一個輸入框
搞一個datalist列表
給datalist列表標簽添加一個id
給輸入框添加一個list屬性,將datalist的id對應的值賦值給list屬性即可
請輸入你的車型:
<input type="text" list="cars">
<datalist id="cars">
<option>奔馳</option>
<option>寶馬</option>
<option>奧迪</option>
<option>路虎</option>
<option>賓利</option>
</datalist>```
下拉列表
作用: select標簽和ul坐榆、ol拴魄、dl一樣,都是組標簽. 用于創(chuàng)建表單中的待選列表, 可以從選擇某一個帶選項
格式:
選擇籍貫:
<select>
<option>北京</option>
<option>河北</option>
<option>河南</option>
<option>山東</option>
<option>山西</option>
<option>湖北</option>
<option>貴州</option>
</select>```