HTML 表單_ZenDei技術網路在線

<form>元素： <input>元素：常用屬性： type 文本框類型 name 指定了name的欄位才會被提交（不能用id代替name屬性） placeholder 占位符 value 輸入框中的文本 autofocus 自動聚焦 disabled 禁用 readonly 只讀 require ...

<form>元素：

<form action="" method="get|post">

</form>

<input>元素：

<input type="" name="" placeholder="" />

常用屬性：

type 文本框類型
name 指定了name的欄位才會被提交（不能用id代替name屬性）
placeholder 占位符
value 輸入框中的文本
autofocus 自動聚焦
disabled 禁用
readonly 只讀
required 該欄位是必填的，會自動檢查該欄位是否已填寫，未填寫會提示
size 指定輸入框的寬度，以字元計。
form屬性指定此表單組件屬於哪個表單（常用於<form>外的表單元素）
formaction指定將此表單組件提交給xx來處理，會覆蓋所屬<form>的action屬性。
title 提示信息，滑鼠移到輸入框上時會顯示提示信息
pattern 指定正則表達式，瀏覽器會自動用這個正則表達式來驗證內容，不符合會提示

<input>的type屬性可能的值：

text 單行文本框
password 密碼框
radio 單選按鈕
checkbox 覆選框
file 選擇文件
image 圖片
button 普通按鈕
reset 重置按鈕
submit 提交按鈕
image 以圖片作為提交按鈕，點擊會提交表單
hidden 隱藏域，不顯示在頁面上，提交時仍會提交此欄位，常用來提交隱秘信息
file 選擇文件

color 顏色選擇器
date 日期選擇器（年月日）
month 日期選擇器（年月）
datetime-local 時間日期選擇器（年月日+時分）
email email格式。會自動檢查內容是否符合email格式，不符合會提示
number 數字格式。會自動檢查內容是否符合要求，不符合會提示
range 水平滑動條
search 搜索框，和普通的文本框差不多，只是框內右側有一個X，點擊可清空框中文本。
tel 電話號碼
time 時間選擇器（時分）
url 網址，會自動檢查內容是否符合url格式，不符合會提示

上面的這些屬性值，有的瀏覽器尚未實現，最好自己寫正則表達式驗證。

<input />、<img />是少數幾個能設置width、height的行內元素。

單行文本框：

<input type="text" name="" />

密碼框：

<input type="password" name="" />

單選按鈕：

性別：<input type="radio" name="gender" value="male" />男
    <input type="radio" name="gender" value="女" />女<br />

一組單選按鈕的name要相同。

覆選框：

愛好：<br />
    <input type="checkbox" name="hobby" value="basketball" />籃球<br />
    <input type="checkbox" name="hobby" value="running" />跑步<br />
    <input type="checkbox" name="hobby" value="swimming" />游泳<br />

覆選框的欄位會分別提交，比如?hobby=basketball&hobby=running，並不是放在一個數組中提交，就是說一組覆選框的name可以不同。

輸入數字：

<input type="number" name="" min="0" max="10">

只能輸入[0,10]上的10個整數其中之一。可指定步長：

<input type="number" name="" min="0" max="10" step="2">

只能輸入0,2,4,6,8,10這幾個數字其中之一。

會自動檢查內容是否要求，不符合會提示。

<input>的form屬性：

<form id="form1" action="" method="get">

</form>
    
<input type="" name="" form="form1" />

<input>元素可以通過form屬性與一個或多個表單（的id）綁定，綁定後此<input>屬於所綁定的表單，提交表單時會提交此<input>。

可與多個表單綁定，通過逗號隔開即可，form="from1,form2"。

<input>的formaction屬性：

<form action="1.php" method="">
    <input type="" name="" formaction="2.php" />
</form>

提交時會把此<input>提交給2.php處理，不會提交給1.php（覆蓋<form>元素的action屬性），表單的其他欄位提交給1.php處理。

<input>的title屬性：

請輸入密碼：<input type="password" name=""  title="密碼只能為字母、數字" />

滑鼠移到輸入框上時，會彈出title設置的提示信息。

<input>的pattern屬性：

<input type="text" name="" pattern="[A-Za-z]{3}" title="Three letter country code">

瀏覽器會自動使用這個正則表達式來驗證內容，不符合要求會提示。

水平滑動條：

<input type="range" name="" min="0" max="100">

可用step屬性指定步長，可用value屬性指定預設值。

隱藏域：

input type="hidden" name="" value="" />

上傳文件：

<form action="" method="post" enctype="multipart/form-data">
    <input type="file" name="" />
</form>

method必須指定為post，enctype必須指定為multipart/form-data。

預設可以選擇所有類型的文件，可以使用accept屬性來限定文件類型：

<input type="file" name="" accept="image/jpeg" />

可以使用通配符： accept="image/*"

預設只能選擇一個文件，可使用multiple屬性指定可選擇多個文件：

<input type="file" name=""  multiple />

<label>元素：綁定輸入框，點擊<label>元素，輸入框也會聚焦

<label for="user">用戶名：</label>
<input type="text" name="user" id="user">

通過<label>的for屬性綁定輸入框的id（必須是id，不能用name代替）。

按鈕：

<input type="button" value="普通按鈕" />
<input type="reset" value="重置" />
<input type="submit" value="提交" />
<input type="image" src="image/1.jpg" width="" height="" />

type="image"是以圖片作為提交按鈕上的內容，點擊會提交表單，可以通過設置<input>的width、heigth來設置圖片的寬、高。

<button type="button">普通按鈕</button>
<button type="reset">重置按鈕</button>
<button type="submit">提交</button>

下拉列表:<select>+<option> 只能從所給項中選擇一項

請選擇國籍：
<select name="nationality">
  <option value="China">中國</option>  <!--預設選擇第一項-->
  <option value="America">美國</option>
  <option value="other">其他</option>
</select>

提示文字可以這樣寫：

<select name="nationality">
  <option>請選擇國籍</option>
  <option value="China">中國</option>
  <option value="America">美國</option>
  <option value="other">其他</option>
</select>

此處的<option>是雙標簽。

文本框，可以從所給項中選擇一項，也可以自己輸入、編輯內容：<input>+<datalist>

請選擇您使用的瀏覽器：
<input list="browsers">
    
<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>

通過<input>的list屬性綁定<datalist>的id（只能是id，不能是name）。

此處的<option>是單標簽。

文本域：

<textarea name="" rows="10" cols="50">此處可以寫預設值</textarea>

文本域的預設值不是通過value屬性指定的。