Html中的form表單常用于用戶信息的填寫(xiě)和提交券膀，在前端開(kāi)發(fā)中使用較為廣泛渴析。
form對(duì)象
建立一個(gè)form表單窍箍，提交方式method設(shè)置為郵件發(fā)送讯檐，自動(dòng)填寫(xiě)autocomplete打開(kāi)琉闪，填寫(xiě)驗(yàn)證novalidate打開(kāi)
<form action="" method="post" autocomplete="on" novalidate="novalidate"></form>
label對(duì)象
屬性:
- for: 指明綁定控件的id.
- formid: 指明所屬的一個(gè)或多個(gè)表單
<label for="username">姓名：</label> <input id="username" type="text" name="username" placeholder="用戶名">
text對(duì)象
注意一旦 disabled=true, POST后就沒(méi)有值,對(duì)于別的空間也是
<input id="username" type="text" name="username" placeholder="用戶名">
textarea對(duì)象
屬性和方法：
- rows: 顯示行數(shù). 輸入超過(guò)了就下拉
- cols: 寬度.
- height/width: 也可以控制大小.
- readonly: 只讀的.
- disabled: 不可用,true/false.
- name: 名稱,用于表單調(diào)用.
- required: 必須填的.HTML5.
- maxlength: 最大字符數(shù)
- form: 所屬的一個(gè)或多個(gè)表單.
<textarea name="comments" placeholder="ddd" cols="80" rows="20"></textarea>
password對(duì)象
<input id="password" type="password" name="password">
radio對(duì)象
屬性：
- checked: 被選中. 也用來(lái)最終獲取值
<label><input name="Fruit" type="radio" value="" checked/>蘋(píng)果 </label>
<label><input name="Fruit" type="radio" value="" />桃子 </label>
<label><input name="Fruit" type="radio" value="" />香蕉 </label>
<label><input name="Fruit" type="radio" value="" />梨 </label>
<label><input name="Fruit" type="radio" value="" />其它 </label>
##checkbox對(duì)象
屬性：
- checked: 被選中. 也用來(lái)最終獲取值
> ```
<label><input name="Fruit1" type="checkbox" value="" checked/>蘋(píng)果 </label>
<label><input name="Fruit2" type="checkbox" value="" />桃子 </label>
<label><input name="Fruit3" type="checkbox" value="" />香蕉 </label>
<label><input name="Fruit4" type="checkbox" value="" />梨 </label>
select對(duì)象
常用屬性事件:
- text: 顯示內(nèi)容
- value: 具體值
- index: 返回索引值(下拉時(shí)位置)
- selected: 是否被選中,可以用于默認(rèn)值
<select id="sel">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
##hidden對(duì)象
一般用于儲(chǔ)存一些不顯示的信息,又可以通過(guò)JS進(jìn)行操作修改,保存內(nèi)容,被進(jìn)一步調(diào)用等
> `<input type="hidden" name="country" value="Norway" />`