Forms表單

form

• method

method提交表單的請求方式get或者post
<form method="get"></form>
<form method="post"></form>

• action

action提交表單的地址
<form action="/login"></form>

• enctype

enctype發送表單數據以前如何對其進行編碼
<form action="/login" method="post" enctype="application/x-www-form-urlencoded"></form>

application/x-www-form-urlencoded（默認編碼方式）在發送前編碼全部字符
multipart/form-data 不對字符編碼。在使用包含文件上傳控件的表單時，必須使用該值。
text/plain 空格轉換爲 "+" 加號，但不對特殊字符編碼。

更多form屬性

input

• type

值	描述
text	文本
radio	單選按鈕
checkbox	複選框
submit	提交按鈕
button	按鈕
hidden	隱藏的輸入字段
image	圖像形式的提交按鈕
password	密碼字段
file	上傳文件
reset	重置按鈕

radio單選按鈕。單選按鈕只容許用戶選擇中其中一個選項。
一組radio的name值要相同，例如：
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女

checkbox複選框按鈕。複選框按鈕容許用戶選擇中其中一個或者多個選項。
一組checkbox的name值要相同，例如：
<input type="checkbox" name="ball" value="basketball">籃球
<input type="checkbox" name="ball" value="football">足球
<input type="checkbox" name="ball" value="tennis">網球
<input type="checkbox" name="ball" value="volleyball">排球

button按鈕，點擊以後執行相應綁定的事件
image圖像形式的提交按鈕，submit提交按鈕，點擊以後提交表單中的數據
<input type="image" src="/image/submit.jpg">
<input type="submit">

• placeholder

placeholder提示信息
<input type="text" placeholder="提示信息">

• autocomplete

autocomplete自動填充功能
<input type="text" autocomplete="on">  開啓自動填充功能
<input type="text" autocomplete="off"> 關閉自動填充功能

• autofocus

autofocus頁面加載時是否得到焦點（不適用於type="hidden"）
<input type="text" autofocus="autofocus">

• pattern

pattern規定輸入字段值的格式（正則校驗）
<input type="text" pattern="[0-9]">

更多input屬性

label

label點擊label標籤時，瀏覽器會自動觸發對應將焦點轉到和標籤相關的表單元素上
label標籤的for屬性的值須要和對應表單元素的id值相同
<form>
    <label for="male">男</label>
    <input type="radio" name="sex" value="male" id="male">
    <label for="female">Female</label>
    <input type="radio" name="sex" value="female" id="female">
</form>

更多label屬性

textarea

textarea多行文本輸入表單元素
能夠經過rows和cols規定textarea尺寸
<textarea cols="30" rows="10"></textarea>

更多textarea屬性

select

select下拉菜單
<select>
    <option value="beijing" selected="selected">北京</option>
    <option value="shanghai">上海</option>
    <option value="shenzhen">深圳</option>
</select>

更多select屬性

查看瀏覽器支持狀況