Html中的form表單常用于用戶信息的填寫和提交,在前端開發(fā)中使用較為廣泛。
form對象
建立一個form表單,提交方式method設(shè)置為郵件發(fā)送,自動填寫autocomplete打開,填寫驗證novalidate打開
<form action="" method="post" autocomplete="on" novalidate="novalidate"></form>
label對象
屬性:
- for: 指明綁定控件的id.
- formid: 指明所屬的一個或多個表單
<label for="username">姓名:</label> <input id="username" type="text" name="username" placeholder="用戶名">
text對象
注意一旦 disabled=true, POST后就沒有值,對于別的空間也是
<input id="username" type="text" name="username" placeholder="用戶名">
textarea對象
屬性和方法:
- rows: 顯示行數(shù). 輸入超過了就下拉
- cols: 寬度.
- height/width: 也可以控制大小.
- readonly: 只讀的.
- disabled: 不可用,true/false.
- name: 名稱,用于表單調(diào)用.
- required: 必須填的.HTML5.
- maxlength: 最大字符數(shù)
- form: 所屬的一個或多個表單.
<textarea name="comments" placeholder="ddd" cols="80" rows="20"></textarea>
password對象
<input id="password" type="password" name="password">
radio對象
屬性:
- checked: 被選中. 也用來最終獲取值
<label><input name="Fruit" type="radio" value="" checked/>蘋果 </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對象
屬性:
- checked: 被選中. 也用來最終獲取值
> ```
<label><input name="Fruit1" type="checkbox" value="" checked/>蘋果 </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對象
常用屬性事件:
- text: 顯示內(nèi)容
- value: 具體值
- index: 返回索引值(下拉時位置)
- selected: 是否被選中,可以用于默認值
<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對象
一般用于儲存一些不顯示的信息,又可以通過JS進行操作修改,保存內(nèi)容,被進一步調(diào)用等
> `<input type="hidden" name="country" value="Norway" />`