表單 · HTML 教程

# 表單標簽表單（form）是用戶輸入信息與網頁互動的一種形式。大多數情況下，用戶提交的信息會發給服務器，比如網站的搜索欄就是表單。表單由一種或多種的小部件組成，比如輸入框、按鈕、單選框或復選框。這些小部件稱為控件（controls）。 ## `<form>` ### 簡介 `<form>`標簽用來定義一個表單，所有表單內容放到這個容器元素之中。 ```html <form>  </form> ``` 上面代碼就是表單的基本形式。下面是一個比較常見的例子。 ```html <form action="https://example.com/api" method="post"> <label for="POST-name">用戶名：</label> <input id="POST-name" type="text" name="user"> <input type="submit" value="提交"> </form> ``` 上面代碼就是一個表單，一共包含三個控件：一個`<label>`標簽，一個文本輸入框，一個提交按鈕。其中，文本輸入框的`name`屬性是`user`，表示將向服務器發送一個鍵名為`user`的鍵值對，鍵值就是這個控件的`value`屬性，等于用戶輸入的值。用戶在文本輸入框里面，輸入用戶名，比如`foobar`，然后點擊提交按鈕，瀏覽器就會向服務器`https://example.com/api`發送一個 POST 請求，發送`user=foobar`這樣一段數據。 `<form>`有以下屬性。 - `accept-charset`：服務器接受的字符編碼列表，使用空格分隔，默認與網頁編碼相同。 - `action`：服務器接收數據的 URL。 - `autocomplete`：如果用戶沒有填寫某個控件，瀏覽器是否可以自動填寫該值。它的可能取值分別為`off`（不自動填寫）和`on`（自動填寫）。 - `method`：提交數據的 HTTP 方法，可能的值有`post`（表單數據作為 HTTP 數據體發送），`get`（表單數據作為 URL 的查詢字符串發送），`dialog`（表單位于`<dialog>`內部使用）。 - `enctype`：當`method`屬性等于`post`時，該屬性指定提交給服務器的 MIME 類型。可能的值為`application/x-www-form-urlencoded`（默認值），`multipart/form-data`（文件上傳的情況），`text/plain`。 - `name`：表單的名稱，應該在網頁中是唯一的。注意，如果一個控件沒有設置`name`屬性，那么這個控件的值就不會作為鍵值對，向服務器發送。 - `novalidate`：布爾屬性，表單提交時是否取消驗證。 - `target`：在哪個窗口展示服務器返回的數據，可能的值有`_self`（當前窗口），`_blank`（新建窗口），`_parent`（父窗口），`_top`（頂層窗口），`<iframe>`標簽的`name`屬性（即表單返回結果展示在`<iframe>`窗口）。 ### enctype 屬性 `<form>`表單的`enctype`屬性，指定了采用 POST 方法提交數據時，瀏覽器給出的數據的 MIME 類型。該屬性可以取以下值。（1）`application/x-www-form-urlencoded` `application/x-www-form-urlencoded`是默認類型，控件名和控件值都要轉義（空格轉為`+`號，非數字和非字母轉為`%HH`的形式，換行轉為CR LF），控件名和控件值之間用`=`分隔。控件按照出現順序排列，控件之間用`&`分隔。（2）`multipart/form-data` `multipart/form-data`主要用于文件上傳。這個類型上傳大文件時，會將文件分成多塊傳送，每一塊的 HTTP 頭信息都有`Content-Disposition`屬性，值為`form-data`，以及一個`name`屬性，值為控件名。 ```bash Content-Disposition: form-data; name="mycontrol" ``` 下面是上傳文件的表單。 ```html <form action="https://example.com/api" enctype="multipart/form-data" method="post"> 用戶名：<input type="text" name="submit-name"><br> 文件：<input type="file" name="files"><br> <input type="submit" value="上傳"> <input type="reset" value="清除"> </form> ``` 上面代碼中，輸入用戶名`Larry`，選中一個`file1.txt`文件，然后點擊“上傳”。瀏覽器發送的實際數據如下。 ```http Content-Type: multipart/form-data; boundary=--AaB03x --AaB03x Content-Disposition: form-data; name="submit-name" Larry --AaB03x Content-Disposition: form-data; name="files"; filename="file1.txt" Content-Type: text/plain ... contents of file1.txt ... --AaB03x-- ``` 上面代碼中，瀏覽器將這個表單發成多個數據塊。最上面使用`Content-Type`字段告訴服務器，數據格式是`multipart/form-data`（即多個數據塊），每個數據塊的分隔標志是`--AaB03x`。每個數據塊的第一行是`Content-Disposition`，其中的`name`字段表示這個數據塊的控件名，數據體則是該控件的數據值，比如第一個數據塊的`name`屬性是`submit-name`控件，數據體是該控件的值`Larry`。第二個數據塊是控件`files`，由于該控件是上傳文件，所以還要用`filename`屬性給出文件名`file1.txt`，數據體是`file1.txt`的內容。 ## `<fieldset>`，`<legend>` `<fieldset>`標簽是一個塊級容器標簽，表示控件的集合，用于將一組相關控件組合成一組。 ```html <form> <fieldset> <p>年齡：<input type="text" name="age"></p> <p>性別：<input type="text" name="gender"></p> </fieldset> </form> ``` 上面代碼中，兩個輸入框是一組，它們的外面會顯示一個方框。 `<fieldset>`有以下屬性。 - `disabled`：布爾屬性，一旦設置會使得`<fieldset>`內部包含的控件都不可用，都變成灰色狀態。 - `form`：指定控件組所屬的`<form>`，它的值等于`<form>`的`id`屬性。 - `name`：該控件組的名稱。 `<legend>`標簽用來設置`<fieldset>`控件組的標題，通常是`<fieldset>`內部的第一個元素，會嵌入顯示在控件組的上邊框里面。 ```html <fieldset> <legend>學生情況登記</legend> <p>年齡：<input type="text" name="age"></p> <p>性別：<input type="text" name="gender"></p> </fieldset> ``` 上面代碼中，這個控件組的標題會，嵌入顯示在`<fieldset>`的上邊框。 ## `<label>` `<label>`標簽是一個行內元素，提供控件的文字說明，幫助用戶理解控件的目的。 ```html <label for="user">用戶名：</label> <input type="text" name="user" id="user"> ``` 上面代碼中，輸入框前面會有文字說明“用戶名：”。 `<label>`的一大優勢是增加了控件的可用性。有些控件比較小（比如單選框），不容易點擊，那么點擊對應的`<label>`標簽，也能選中該控件。點擊`<label>`，就相當于控件本身的`click`事件。 `<label>`的`for`屬性關聯相對應的控件，它的值是對應控件的`id`屬性。所以，控件最好設置`id`屬性。控件也可以放在`<label>`之中，這時不需要`for`屬性和`id`屬性。 ```html <label>用戶名： <input type="text" name="user"> </label> ``` `<label>`的屬性如下。 - `for`：關聯控件的`id`屬性。 - `form`：關聯表單的`id`屬性。設置了該屬性后，`<label>`可以放置在頁面的任何位置，否則只能放在`<form>`內部。一個控件可以有多個關聯的`<label>`標簽。 ```html <label for="username">用戶名：</label> <input type="text" id="username" name="username"> <label for="username"><abbr title="required">*</abbr></label> ``` 上面代碼中，`<input>`有兩個關聯的`<label>`。 ## `<input>` ### 簡介 `<input>`標簽是一個行內元素，用來接收用戶的輸入。它是一個單獨使用的標簽，沒有結束標志。它有多種類型，取決于`type`屬性的值，默認值是`text`，表示一個輸入框。 ```html <input>  <input type="text"> ``` 上面代碼會生成一個單行的輸入框，用戶可以在里面輸入文本。 `<input>`的屬性非常多，有些屬性是某個類型專用的，放在下文的“類型”部分介紹。這里介紹一些所有類型的共同屬性。 - `autofocus`：布爾屬性，是否在頁面加載時自動獲得焦點。 - `disabled`：布爾屬性，是否禁用該控件。一旦設置，該控件將變灰，用戶可以看到，但是無法操作。 - `form`：關聯表單的`id`屬性。設置了該屬性后，控件可以放置在頁面的任何位置，否則只能放在`<form>`內部。 - `list`：關聯的`<datalist>`的`id`屬性，設置該控件相關的數據列表，詳見后文。 - `name`：控件的名稱，主要用于向服務器提交數據時，控件鍵值對的鍵名。注意，只有設置了`name`屬性的控件，才會向服務器提交，不設置就不會提交。 - `readonly`：布爾屬性，是否為只讀。 - `required`：布爾屬性，是否為必填。 - `type`：控件類型，詳見下文。 - `value`：控件的值。 ### 類型 `type`屬性決定了`<input>`的形式。該屬性可以取以下值。 **（1）text** `type="text"`是普通的文本輸入框，用來輸入單行文本。如果用戶輸入換行符，換行符會自動從輸入中刪除。 ```html <input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10"> ``` `text`輸入框有以下配套屬性。 - `maxlength`：可以輸入的最大字符數，值為一個非負整數。 - `minlength`：可以輸入的最小字符數，值為一個非負整數，且必須小于`maxlength`。 - `pattern`：用戶輸入必須匹配的正則表達式，比如要求用戶輸入4個～8個英文字符，可以寫成`pattern="[a-z]{4,8}"`。如果用戶輸入不符合要求，瀏覽器會彈出提示，不會提交表單。 - `placeholder`：輸入字段為空時，用于提示的示例值。只要用戶沒有任何字符，該提示就會出現，否則會消失。 - `readonly`：布爾屬性，表示該輸入框是只讀的，用戶只能看，不能輸入。 - `size`：表示輸入框的顯示長度有多少個字符寬，它的值是一個正整數，默認等于20。超過這個數字的字符，必須移動光標才能看到。 - `spellcheck`：是否對用戶輸入啟用拼寫檢查，可能的值為`true`或`false`。 **（2）search** `type="search"`是一個用于搜索的文本輸入框，基本等同于`type="text"`。某些瀏覽器會在輸入的時候，在輸入框的尾部顯示一個刪除按鈕，點擊就會刪除所有輸入，讓用戶從頭開始輸入。下面是一個例子。 ```html <form> <input type="search" id="mySearch" name="q" placeholder="輸入搜索詞……" required> <input type="submit" value="搜索"> </form> ``` **（3）button** `type="button"`是沒有默認行為的按鈕，通常腳本指定`click`事件的監聽函數來使用。 ```html <input type="button" value="點擊"> ``` 建議盡量不使用這個類型，而使用`<button>`標簽代替，一則語義更清晰，二則`<button>`標簽內部可以插入圖片或其他 HTML 代碼。 **（4）submit** `type="submit"`是表單的提交按鈕。用戶點擊這個按鈕，就會把表單提交給服務器。 ```html <input type="submit" value="提交"> ``` 如果不指定`value`屬性，瀏覽器會在提交按鈕上顯示默認的文字，通常是`Submit`。該類型有以下配套屬性，用來覆蓋`<form>`標簽的相應設置。 - `formaction`：提交表單數據的服務器 URL。 - `formenctype`：表單數據的編碼類型。 - `formmethod`：提交表單使用的 HTTP 方法（`get`或`post`）。 - `formnovalidate`：一個布爾值，表示數據提交給服務器之前，是否要忽略表單驗證。 - `formtarget`：收到服務器返回的數據后，在哪一個窗口顯示。 **（5）image** `type="image"`表示將一個圖像文件作為提交按鈕，行為和用法與`type="submit"`完全一致。 ```html <input type="image" alt="登陸" src="login-button.png"> ``` 上面代碼中，圖像文件是一個可以點擊的按鈕，點擊后會提交數據到服務器。該類型有以下配套屬性。 - `alt`：圖像無法加載時顯示的替代字符串。 - `src`：加載的圖像 URL。 - `height`：圖像的顯示高度，單位為像素。 - `width`：圖像的顯示寬度，單位為像素。 - `formaction`：提交表單數據的服務器 URL。 - `formenctype`：表單數據的編碼類型。 - `formmethod`：提交表單使用的 HTTP 方法（`get`或`post`）。 - `formnovalidate`：一個布爾值，表示數據提交給服務器之前，是否要忽略表單驗證。 - `formtarget`：收到服務器返回的數據后，在哪一個窗口顯示。用戶點擊圖像按鈕提交時，會額外提交兩個參數`x`和`y`到服務器，表示鼠標的點擊位置，比如`x=52&y=55`。`x`是橫坐標，`y`是縱坐標，都以圖像左上角作為原點`(0, 0)`。如果圖像按鈕設置了`name`屬性，比如`name="position"`，那么將以該值作為坐標的前綴，比如`position.x=52&position.y=55`。這個功能通常用來地圖類型的操作，讓服務器知道用戶點擊了地圖的哪個部分。 **（6）reset** `type="reset"`是一個重置按鈕，用戶點擊以后，所有表格控件重置為初始值。 ```html <input type="reset" value="重置"> ``` 如果不設置`value`屬性，瀏覽器會在按鈕上面加上默認文字，通常是`Reset`。這個控件用處不大，用戶點錯了還會使得所有已經輸入的值都被重置，建議不要使用。 **（7）checkbox** `type="checkbox"`是復選框，允許選擇或取消選擇該選項。 ```html <input type="checkbox" id="agreement" name="agreement" checked> <label for="agreement">是否同意</label> ``` 上面代碼會在文字前面，顯示一個可以點擊的選擇框，點擊可以選中，再次點擊可以取消。上面代碼中，`checked`屬性表示默認選中。 `value`屬性的默認值是`on`。也就是說，如果沒有設置`value`屬性，以上例來說，選中復選框時，會提交`agreement=on`。如果沒有選中，提交時不會有該項。多個相關的復選框，可以放在`<fieldset>`里面。 ```html <fieldset> <legend>你的興趣</legend> <div> <input type="checkbox" id="coding" name="interest" value="coding"> <label for="coding">編碼</label> </div> <div> <input type="checkbox" id="music" name="interest" value="music"> <label for="music">音樂</label> </div> </fieldset> ``` 上面代碼中，如果用戶同時選中兩個復選框，提交的時候就會有兩個`name`屬性，比如`interest=coding&interest=music`。 **（8）radio** `type="radio"`是單選框，表示一組選擇之中，只能選中一項。單選框通常為一個小圓圈，選中時會被填充或突出顯示。 ```html <fieldset> <legend>性別</legend> <div> <input type="radio" id="male" name="gender" value="male"> <label for="male">男</label> </div> <div> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label> </div> </fieldset> ``` 上面代碼中，性別只能在兩個選項之中，選擇一項。注意，多個單選框的`name`屬性的值，應該都是一致的。提交到服務器的就是選中的那個值。該類型的配套屬性如下。 - `checked`：布爾屬性，表示是否默認選中當前項。 - `value`：用戶選中該項時，提交到服務器的值，默認為`on'`。 **（9）email** `type="email"`是一個只能輸入電子郵箱的文本輸入框。表單提交之前，瀏覽器會自動驗證是否符合電子郵箱的格式，如果不符合就會顯示提示，無法提交到服務器。 ```html <input type="email" pattern=".+@foobar.com" size="30" required> ``` 上面代碼會生成一個必填的文本框，只能輸入后綴為`foobar.com`的郵箱地址。該類型有一個`multiple`的布爾屬性，一旦設置，就表示該輸入框可以輸入多個逗號分隔的電子郵箱。 ```html <input id="emailAddress" type="email" multiple required> ``` 注意，如果同時設置了`multiple`屬性和`required`屬性，零個電子郵箱是允許的，也就是該輸入框允許為空。該類型的配套屬性如下。 - `maxlength`：可以輸入的最大字符數。 - `minlength`：可以輸入的最少字符數。 - `multiple`：布爾屬性，是否允許輸入多個以逗號分隔的電子郵箱。 - `pattern`：輸入必須匹配的正則表達式。 - `placeholder`：輸入為空時的顯示文本。 - `readonly`：布爾屬性，該輸入框是否只讀。 - `size`：一個非負整數，表示輸入框的顯示長度為多少個字符。 - `spellcheck`：是否對輸入內容啟用拼寫檢查，可能的值為`true`或`false`。該類型還可以搭配`<datalist>`標簽，提供輸入的備選項。 ```html <input type="email" size="40" list="defaultEmails"> <datalist id="defaultEmails"> <option value="jbond007@mi6.defence.gov.uk"> <option value="jbourne@unknown.net"> <option value="nfury@shield.org"> <option value="tony@starkindustries.com"> <option value="hulk@grrrrrrrr.arg"> </datalist> ``` 上面代碼中，輸入焦點進入輸入框以后，會顯示一個下拉列表，里面有五個參考項，供用戶參考。 **（10）password** `type="password"`是一個密碼輸入框。用戶的輸入會被遮擋，字符通常顯示星號（`*`）或點（`·`）。 ```html <input type="password" id="pass" name="password" minlength="8" required> ``` 瀏覽器對該類型輸入框的顯示，會有所差異。一種常見的處理方法是，用戶每輸入一個字符，先在輸入框里面顯示一秒鐘，然后再遮擋該字符。如果用戶輸入內容包含換行符（`U+000A`）和回車符（`U+000D`），瀏覽器會自動將這兩個字符過濾掉。該類型的配套屬性如下。 - `maxlength`：可以輸入的最大字符數。 - `minlength`：可以輸入的最少字符數。 - `pattern`：輸入必須匹配的正則表達式。 - `placeholder`：輸入為空時的顯示文本。 - `readonly`：布爾屬性，該輸入框是否只讀。 - `size`：一個非負整數，表示輸入框的顯示長度為多少個字符。 - `autocomplete`：是否允許自動填充，可能的值有`on`（允許自動填充）、`off`（不允許自動填充）、`current-password`（填入當前網站保存的密碼）、`new-password`（自動生成一個隨機密碼）。 - `inputmode`：允許用戶輸入的數據類型，可能的值有`none`（不使用系統輸入法）、`text`（標準文本輸入）、`decimal`（數字，包含小數）、`numeric`（數字0-9）等。 **（11）file** `type="file"`是一個文件選擇框，允許用戶選擇一個或多個文件，常用于文件上傳功能。 ```html <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> ``` 該類型有以下屬性。 - `accept`：允許選擇的文件類型，使用逗號分隔，可以使用 MIME 類型（比如`image/jpeg`），也可以使用后綴名（比如`.doc`），還可以使用`audio/*`（任何音頻文件）、`video/*`（任何視頻文件）、`image/*`（任何圖像文件）等表示法。 - `capture`：用于捕獲圖像或視頻數據的源，可能的值有`user`（面向用戶的攝像頭或麥克風），`environment`（外接的攝像頭或麥克風）。 - `multiple`：布爾屬性，是否允許用戶選擇多個文件。 **（12）hidden** `type="hidden"`是一個不顯示在頁面的控件，用戶無法輸入它的值，主要用來向服務器傳遞一些隱藏信息。比如，CSRF 攻擊會偽造表單數據，那么使用這個控件，可以為每個表單生成一個獨一無二的隱藏編號，防止偽造表單提交。 ```html <input id="prodId" name="prodId" type="hidden" value="xm234jq"> ``` 上面這個控件，頁面上是看不見的。用戶提交表單的時候，瀏覽器會將`prodId=xm234jq`發給服務器。 **（13）number** `type="number"`是一個數字輸入框，只能輸入數字。瀏覽器通常會在輸入框的最右側，顯示一個可以點擊的上下箭頭，點擊向上箭頭，數字會遞增，點擊向下箭頭，數字會遞減。 ```html <input type="number" id="tentacles" name="tentacles" min="10" max="100"> ``` 上面代碼指定數字輸入框，最小可以輸入10，最大可以輸入100。該類型可以接受任何數值，包括小數和整數。可以通過`step`屬性，限定只接受整數。該類型有以下配套屬性。 - `max`：允許輸入的最大數值。 - `min`：允許輸入的最小數值。 - `placeholder`：用戶輸入為空時，顯示的示例值。 - `readonly`：布爾屬性，表示該控件是否為只讀。 - `step`：點擊向上和向下箭頭時，數值每次遞減的步長值。如果用戶輸入的值，不符合步長值的設定，瀏覽器會自動四舍五入到最近似的值。默認的步長值是`1`，如果初始的`value`屬性設為`1.5`，那么點擊向上箭頭得到`2.5`，點擊向下箭頭得到`0.5`。 **（14）range** `type="range"`是一個滑塊，用戶拖動滑塊，選擇給定范圍之中的一個數值。因為拖動產生的值是不精確的，如果需要精確數值，不建議使用這個控件。常見的例子是調節音量。 ```html <input type="range" id="start" name="volume" min="0" max="11"> ``` 上面代碼會產生一個最小值為`0`、最大值為`11`的滑塊區域。用戶拖動滑塊，選擇想要的音量。該類型的配套屬性如下，用法與`type="number"`一致。 - `max`：允許的最大值，默認為100。 - `min`：允許的最小值，默認為0。 - `step`：步長值，默認為1。 `value`屬性的初始值就是滑塊的默認位置。如果沒有設置`value`屬性，滑塊默認就會停在最大值和最小值中間。如果`max`屬性、`min`屬性、`value`屬性都沒有設置，那么`value`屬性為50。該類型與`<datalist>`標簽配合使用，可以在滑動區域產生刻度。 ```html <input type="range" list="tickmarks"> <datalist id="tickmarks"> <option value="0" label="0%"> <option value="10"> <option value="20"> <option value="30"> <option value="40"> <option value="50" label="50%"> <option value="60"> <option value="70"> <option value="80"> <option value="90"> <option value="100" label="100%"> </datalist> ``` 上面代碼會在0～100之間產生11個刻度。其中，`0%`、`50%`和`100%`三個位置會有文字提示，不過瀏覽器很可能不支持。注意，瀏覽器生成的都是水平滑塊。如果想要生成垂直滑塊，可以使用 CSS 改變滑塊區域的方向。 **（15）url** `type="url"`是一個只能輸入網址的文本框。提交表單之前，瀏覽器會自動檢查網址格式是否正確，如果不正確，就會無法提交。 ```html <input type="url" name="url" id="url" placeholder="https://example.com" pattern="https://.*" size="30" required> ``` 上面代碼的`pattern`屬性指定輸入的網址只能使用 HTTPS 協議。注意，該類型規定，不帶有協議的網址是無效的，比如`foo.com`是無效的，`http://foo.com`是有效的。該類型的配套屬性如下。 - `maxlength`：允許的最大字符數。 - `minlength`：允許的最少字符串。 - `pattern`：輸入內容必須匹配的正則表達式。 - `placeholder`：輸入為空時顯示的示例文本。 - `readonly`：布爾屬性，表示該控件的內容是否只讀。 - `size`：一個非負整數，表示該輸入框顯示寬度為多少個字符。 - `spellcheck`：是否啟動拼寫檢查，可能的值為`true`（啟用）和`false`（不啟用）。該類型與`<datalist>`標簽搭配使用，可以形成下拉列表供用戶選擇。隨著用戶不斷鍵入，會縮小顯示范圍，只顯示匹配的備選項。 ```html <input id="myURL" name="myURL" type="url" list="defaultURLs"> <datalist id="defaultURLs"> <option value="https://developer.mozilla.org/" label="MDN Web Docs"> <option value="http://www.google.com/" label="Google"> <option value="http://www.microsoft.com/" label="Microsoft"> <option value="https://www.mozilla.org/" label="Mozilla"> <option value="http://w3.org/" label="W3C"> </datalist> ``` 上面代碼中，`<option>`的`label`屬性表示文本標簽，顯示在備選下拉框的右側，網址顯示在左側。 **（16）tel** `type="tel"`是一個只能輸入電話號碼的輸入框。由于全世界的電話號碼格式都不相同，因此瀏覽器沒有默認的驗證模式，大多數時候需要自定義驗證。 ```html <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required> <small>Format: 123-456-7890</small> ``` 上面代碼定義了一個只能輸入10位電話號碼的輸入框。該類型的配套屬性如下。 - `maxlength`：允許的最大字符數。 - `minlength`：允許的最少字符串。 - `pattern`：輸入內容必須匹配的正則表達式。 - `placeholder`：輸入為空時顯示的示例文本。 - `readonly`：布爾屬性，表示該控件的內容是否只讀。 - `size`：一個非負整數，表示該輸入框顯示寬度為多少個字符。 **（17）color** `type="color"`是一個選擇顏色的控件，它的值一律都是`#rrggbb`格式。 ```html <input type="color" id="background" name="background" value="#e66465"> ``` 上面代碼在 Chrome 瀏覽器中，會顯示一個`#e66465`的色塊。點擊色塊，就會出現一個拾色器，供用戶選擇顏色。如果沒有指定`value`屬性的初始值，默認值為`#000000`（黑色）。 **（18）date** `type="date"`是一個只能輸入日期的輸入框，用戶可以輸入年月日，但是不能輸入時分秒。輸入格式是`YYYY-MM-DD`。 ```html <input type="date" id="start" name="start" value="2018-07-22" min="2018-01-01" max="2018-12-31"> ``` 上面代碼會顯示一個輸入框，默認日期是2018年7月22日。用戶點擊以后，會日期選擇器，供用戶選擇新的日期。該類型有以下配套屬性。 - `max`：可以允許的最晚日期，格式為`yyyy-MM-dd`。 - `min`：可以允許的最早日期，格式為`yyyy-MM-dd`。 - `step`：步長值，一個數字，以天為單位。 **（19）time** `type="time"`是一個只能輸入時間的輸入框，可以輸入時分秒，不能輸入年月日。日期格式是24小時制的`hh:mm`，如果包括秒數，格式則是`hh:mm:ss`。日期選擇器的形式則隨瀏覽器不同而不同。 ```html <input type="time" id="appt" name="appt" min="9:00" max="18:00" required> <small>營業時間上午9點到下午6點</small> ``` 該類型有以下配套屬性。 - `max`：允許的最晚時間。 - `min`：允許的最早時間。 - `readonly`：布爾屬性，表示用戶是否不可以編輯時間。 - `step`：步長值，單位為秒。 ```html <input id="appt" type="time" name="appt" step="2"> ``` 上面代碼中，調節控件的話，時間每次改變的幅度是2秒鐘。 **（20）month** `type="month"`是一個只能輸入年份和月份的輸入框，格式為`YYYY-MM`。 ```html <input type="month" id="start" name="start" min="2018-03" value="2018-05"> ``` 該類型有以下配套屬性。 - `max`：允許的最晚時間，格式為`yyyy-MM`。 - `min`：允許的最早時間，格式為`yyyy-MM`。 - `readonly`：布爾屬性，表示用戶是否不可以編輯時間。 - `step`：步長值，單位為月。 **（21）week** `type="week"`是一個輸入一年中第幾周的輸入框。格式為`yyyy-Www`，比如`2018-W18`表示2018年第18周。 ```html <input type="week" name="week" id="camp-week" min="2018-W18" max="2018-W26" required> ``` 該類型有以下配套屬性。 - `max`：允許的最晚時間，格式為`yyyy-Www`。 - `min`：允許的最早時間，格式為`yyyy-Www`。 - `readonly`：布爾屬性，表示用戶是否不可以編輯時間。 - `step`：步長值，單位為周。 **（22）datetime-local** `type="datetime-local"`是一個時間輸入框，讓用戶輸入年月日和時分，格式為`yyyy-MM-ddThh:mm`。注意，該控件不支持秒。 ```html <input type="datetime-local" id="meeting-time" name="meeting-time" value="2018-06-12T19:30" min="2018-06-07T00:00" max="2018-06-14T00:00"> ``` 該類型有以下配套屬性。 - `max`：允許的最晚時間，格式為`yyyy-MM-ddThh:mm`。 - `min`：允許的最早時間，格式為`yyyy-MM-ddThh:mm`。 - `step`：步長值，單位為秒，默認值是60。 ## `<button>` `<button>`標簽會生成一個可以點擊的按鈕，沒有默認行為，通常需要用`type`屬性或腳本指定按鈕的功能。 ```html <button>點擊</button> ``` 上面代碼會產生一個按鈕，上面的文字就是“點擊”。 `<button>`內部不僅放置文字，還可以放置圖像，這可以形成圖像按鈕。 ```html <button name="search" type="submit"> <img src="search.gif">搜索 </button> ``` `<button>`具有以下屬性。 - `autofocus`：布爾屬性，表示網頁加載時，焦點就在這個按鈕。網頁里面只能有一個元素，具有這個屬性。 - `disabled`：布爾屬性，表示按鈕不可用，會導致按鈕變灰，不可點擊。 - `name`：按鈕的名稱（與`value`屬性配合使用），將以`name=value`的形式，隨表單一起提交到服務器。 - `value`：按鈕的值（與`name`屬性配合使用），將以`name=value`的形式，隨表單一起提交到服務器。 - `type`：按鈕的類型，可能的值有三種：`submit`（點擊后將數據提交給服務器），`reset`（將所有控件的值重置為初始值），`button`（沒有默認行為，由腳本指定按鈕的行為）。 - `form`：指定按鈕關聯的`<form>`表單，值為`<form>`的`id`屬性。如果省略該屬性，默認關聯按鈕所在父表單。 - `formaction`：數據提交到服務器的目標 URL，會覆蓋`<form>`元素的`action`屬性。 - `formenctype`：數據提交到服務器的編碼方式，會覆蓋`<form>`元素的`enctype`屬性。可能的值有三種：`application/x-www-form-urlencoded`（默認值），`multipart/form-data`（只用于文件上傳），`text/plain`。 - `formmethod`：數據提交到服務器使用的 HTTP 方法，會覆蓋`<form>`元素的`method`屬性，可能的值為`post`或`get`。 - `formnovalidate`：布爾屬性，數據提交到服務器時關閉本地驗證，會覆蓋`<form>`元素的`novalidate`屬性。 - `formtarget`：數據提交到服務器后，展示服務器返回數據的窗口，會覆蓋`<form>`元素的`target`屬性。可能的值有`_self`（當前窗口），`_blank`（新的空窗口）、`_parent`（父窗口）、`_top`（頂層窗口）。 ## `<select>` `<select>`標簽用于生成一個下拉菜單。 ```html <label for="pet-select">寵物：</label> <select id="pet-select" name="pet-select"> <option value="">--請選擇一項--</option> <option value="dog">狗</option> <option value="cat">貓</option> <option value="others">其他</option> </select> ``` 上面代碼中，`<select>`生成一個下拉菜單，菜單標題是“--請選擇一項--”，最右側有一個下拉箭頭。點擊下拉箭頭，會顯示三個菜單項，供用戶點擊選擇。下拉菜單的菜單項由`<option>`標簽給出，每個`<option>`代表可以選擇的一個值。選中的`<option>`的`value`屬性，就是`<select>`控件發送的服務器的值。 `<option>`有一個布爾屬性`selected`，一旦設置，就表示該項是默認選中的菜單項。 ```html <select name="choice"> <option value="first">First Value</option> <option value="second" selected>Second Value</option> <option value="third">Third Value</option> </select> ``` 上面代碼中，第二項`Second Value`是默認選中的。頁面加載的時候，會直接顯示在下拉菜單上。 `<select>`有如下屬性。 - `autofocus`：布爾屬性，頁面加載時是否自動獲得焦點。 - `disabled`：布爾屬性，是否禁用當前控件。 - `form`：關聯表單的`id`屬性。 - `multiple`：布爾屬性，是否可以選擇多個菜單項。默認情況下，只能選擇一項。一旦設置，多數瀏覽器會顯示一個滾動列表框。用戶可能需要按住`Shift`或其他功能鍵，選中多項。 - `name`：控件名。 - `required`：布爾屬性，是否為必填控件。 - `size`：設置了`multiple`屬性時，頁面顯示時一次可見的行數，其他行需要滾動查看。 ## `<option>`，`<optgroup>` `<option>`標簽用在`<select>`、`<optgroup>`、`<datalist>`里面，表示一個菜單項，參見`<select>`的示例。它有如下屬性。 - `disabled`：布爾屬性，是否禁用該項。 - `label`：該項的說明。如果省略，則等于該項的文本內容。 - `selected`：布爾屬性，是否為默認值。顯然，一組菜單中，只能有一個菜單項設置該屬性。 - `value`：該項提交到服務器的值。如果省略，則等于該項的文本內容。 `<optgroup>`表示菜單項的分組，通常用在`<select>`內部。 ```html <label>寵物： <select name="pets" multiple size="4"> <optgroup label="四條腿的寵物"> <option value="dog">狗</option> <option value="cat">貓</option> </optgroup> <optgroup label="鳥類"> <option value="parrot">鸚鵡</option> <option value="thrush">畫眉</option> </optgroup> </select> </label> ``` 上面代碼中，`<select>`是一個下拉菜單，它的內部使用`<optgroup>`將菜單項分成兩組。每組有自己的標題，會加粗顯示，但是用戶無法選中。它的屬性如下。 - `disabled`：布爾設置，是否禁用該組。一旦設置，該組所有的菜單項都不可選。 - `label`：菜單項的標題。 ## `<datalist>` `<datalist>`標簽是一個容器標簽，用于為指定控件提供一組相關數據，通常用于生成輸入提示。它的內部使用`<option>`，生成每個菜單項。 ```html <label for="ice-cream-choice">冰淇淋：</label> <input type="text" list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice"> <datalist id="ice-cream-flavors"> <option value="巧克力"> <option value="椰子"> <option value="薄荷"> <option value="草莓"> <option value="香草"> </datalist> ``` 上面代碼中，`<input>`生成一個文本輸入框，用戶可以輸入文本。`<input>`的`list`屬性指定關聯的`<datalist>`的`id`屬性。`<datalist>`的數據列表用于輸入建議，用戶點擊輸入框的時候，會顯示一個下拉菜單，里面是建議的輸入項。并且還會自動匹配用戶已經輸入的字符，縮小可選的范圍，比如用戶輸入“香”，則只會顯示“香草”這一項。注意，`<option>`在這里可以不需要閉合標簽。 `<option>`標簽還可以加入`label`屬性，作為說明文字。Chrome 瀏覽器會將其顯示在`value`的下一行。 ```html <datalist id="ide"> <option value="Brackets" label="by Adobe"> <option value="Coda" label="by Panic"> </datalist> ``` 上面代碼的渲染結果是，Chrome 瀏覽器會在下拉列表顯示`value`值（比如`Brackets`），然后在其下方以小字顯示`label`值（比如`by Adobe`）。 ## `<textarea>` `<textarea>`是一個塊級元素，用來生成多行的文本框。 ```html <textarea id="story" name="story" rows="5" cols="33"> 這是一個很長的故事。 </textarea> ``` 上面代碼會生成一個長度為5行，寬度為33個字符的文本框。該標簽有如下屬性。 - `autofocus`：布爾屬性，是否自動獲得焦點。 - `cols`：文本框的寬度，單位為字符，默認值為20。 - `disabled`：布爾屬性，是否禁用該控件。 - `form`：關聯表單的`id`屬性。 - `maxlength`：允許輸入的最大字符數。如果未指定此值，用戶可以輸入無限數量的字符。 - `minlength`：允許輸入的最小字符數。 - `name`：控件的名稱。 - `placeholder`：輸入為空時顯示的提示文本。 - `readonly`：布爾屬性，控件是否為只讀。 - `required`：布爾屬性，控件是否為必填。 - `rows`：文本框的高度，單位為行。 - `spellcheck`：是否打開瀏覽器的拼寫檢查。可能的值有`true`（打開），`default`（由父元素或網頁設置決定），`false`（關閉）。 - `wrap`：輸入的文本是否自動換行。可能的值有`hard`（瀏覽器自動插入換行符`CR + LF`，使得每行不超過控件的寬度），`soft`（輸入內容超過寬度時自動換行，但不會加入新的換行符，并且瀏覽器保證所有換行符都是`CR + LR`，這是默認值），`off`（關閉自動換行，單行長度超過寬度時，會出現水平滾動條）。 ## `<output>` `<output>`標簽是一個行內元素，用于顯示用戶操作的結果。 ```html <input type="number" name="a" value="10"> + <input type="number" name="b" value="10"> = <output name="result">20</output> ``` 該標簽有如下屬性。 - `for`：關聯控件的`id`屬性，表示為該控件的操作結果。 - `form`：關聯表單的`id`屬性。 - `name`：控件的名稱。 ## `<progress>` `<progress>`標簽是一個行內元素，表示任務的完成進度。瀏覽器通常會將顯示為進度條。 ```html <progress id="file" max="100" value="70"> 70% </progress> ``` 該標簽有如下屬性。 - `max`：進度條的最大值，應該是一個大于`0`的浮點數。默認值為1。 - `value`：進度條的當前值。它必須是`0`和`max`屬性之間的一個有效浮點數。如果省略了`max`屬性，該值則必須在`0`和`1`之間。如果省略了`value`屬性，則進度條會出現滾動，表明正在進行中，無法知道完成的進度。 ## `<meter>` `<meter>`標簽是一個行內元素，表示指示器，用來顯示已知范圍內的一個值，很適合用于任務的當前進度、磁盤已用空間、充電量等帶有比例性質的場合。瀏覽器通常會將其顯示為一個不會滾動的指示條。 ```html <p>烤箱的當前溫度是<meter min="200" max="500" value="350"> 350 度</meter>。</p> ``` 上面代碼會顯示一個指示條，左側表示`200`，右側表示`500`，當前位置停留在`350`。注意，`<meter>`元素的子元素，正常情況下不會顯示。只有在瀏覽器不支持`<meter>`時才會顯示。該標簽有如下屬性。 - `min`：范圍的下限，必須小于`max`屬性。如果省略，則默認為`0`。 - `max`：范圍的上限，必須大于`min`屬性。如果省略，則默認為`1`。 - `value`：當前值，必須在`min`屬性和`max`屬性之間。如果省略，則默認為`0`。 - `low`：表示“低端”的上限門檻值，必須大于`min`屬性，小于`high`屬性和`max`屬性。如果省略，則等于`min`屬性。 - `high`：表示“高端”的下限門檻值，必須小于`max`屬性，大于`low`屬性和`min`屬性。如果省略，則等于`max`屬性。 - `optimum`：指定最佳值，必須在`min`屬性和`max`屬性之間。它應該與`low`屬性和`high`屬性一起使用，表示最佳范圍。如果`optimum`小于`low`屬性，則表示“低端”是最佳范圍；如果大于`high`屬性，則表示“高端”是最佳范圍；如果在`low`和`high`之間，則表示“中間地帶”是最佳范圍。如果省略，則等于`min`和`max`的中間值。 - `form`：關聯表單的`id`屬性。 Chrome 瀏覽器使用三種顏色，表示指示條所處的位置。較好情況時，當前位置為綠色；一般情況時，當前位置為黃色；較差情況時，當前位置為紅色。 ```html <meter id="fuel" name="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50"> at 50/100 </meter> ``` 上面代碼中，指示條可以分成三段：0 ～ 32，33 ～ 65，66 ～ 100。由于`optimum`屬性是`80`，因此`66 ～ 100`是較好情況，`33 ～ 65`是一般情況，`0 ～ 32`是較差情況。瀏覽器因此會根據`value`屬性，將當前位置顯示為不同顏色，小于`33`時顯示紅色，大于`65`時顯示綠色，兩者之間顯示黃色。 ## 參考鏈接 - [HTML Interactive Form Validation](https://webkit.org/blog/7099/html-interactive-form-validation/), by Chris Dumez