另發表于Levi.Blog和oschina
表單有兩個基礎組成部分：訪問者在頁面上可以看到并填寫的控件、標簽和按鈕的集合；以及用于獲取信息并將其轉化為可以讀取或計算的格式的處理腳本。 下面總結了HTML5大部分與表單相關的特性。
輸入和元素
| 輸入或者元素 | 簡略代碼 |
|---|---|
| 電子郵件框 | <input type="email"> |
| 搜索框 | <input type="search"> |
| 電話框 | <input type="tel"> |
| URL框 | <input type="url"> |
| 以下元素得到了部分瀏覽器的支持 | |
| 日期 | <input type="data"> |
| 數字 | <input type="number"> |
| 范圍 | <input type="range"> |
| 數據列表 | <input type="text"> name="favfruit" list="fruit"<datalist id="fruit">?<option>Grapes</option>?<option>Pears</option>?<option>Kiwi</option></datalist> |
| 輸入或者元素（下面的輸入或者元素得到的支持很少，W3C指出它們在2014年定案之時很可能不會列入HTLM5） | 簡略代碼 |
|---|---|
| 顏色 | <input type="color" /> |
| 全局日期和時間 | <input type="datatime" /> |
| 局部日期和時間 | <input type="datatime-local" /> |
| 月 | <input type="month" /> |
| 時間 | <input type="time" /> |
| 周 | <input type="week" /> |
| 輸出 | <output></output> |
屬性
| 屬性 | 總結 |
|---|---|
| accept | 限制用戶上傳文件的類型 |
| autocomplete | 如果對form元素或待定的字段添加autocomplete=”off”，就會關閉瀏覽器的對該表單或該字段的自動填寫功能。默認值為on。 |
| autofocus | 頁面加載后將焦點放到該字段 |
| multiple | 允許輸入多個電子郵件地址，或者上傳多個文件 |
| list | 將datalist與input聯系起來 |
| maxlength | 指定textarea的最大字符數（在HTML之前的文本框就支持該特性） |
| pattern | 定義一個用戶所輸入的文本在提交之前必須遵守的模式 |
| placeholder | 指定一個出現的文本框中的提示文本，用戶開始輸入后該文本消失 |
| required | 需要訪問者在提交表單之前必須完成該字段 |
| formnovalidate | 關閉HTML5的自動驗證功能。應用于提交按鈕 |
| novalidate | 關閉HTML5的自動驗證功能。應用于表單元素 |
??每個表單都以form開始標簽開始，以form結束標簽結束。兩個標簽之間是是組成表單的說明標簽、控件和按鈕。每個控件都有一個name屬性，用于在提交表單時對數據進行識別。訪問者通過你提供的提交按鈕提交表單—觸發提交按鈕時，他們填寫的數據就會發送至服務器上處理數據的腳本。
創建表單的步驟
輸入<form method="formmethod"，這里的formmethod是get或者post。輸入action="script.url">，這里的script.url是提交表單時要運行的腳本在服務器上的位置。創建表單的內容（包括一個提交按鈕）。輸入</form>以結束表單。method=”get”與method=”post”的區別 ??form元素的method屬性只有get和post兩種。 ??如果對表單使用method="get"，那么表單提交后，表單中的數據會顯示在瀏覽器的地址欄中。通常你希望表單提交后從服務器得到信息，就是用get。 ??如果對表單使用method="post"，那么提交表單后，表單中的數據不會顯示在瀏覽器的地址的欄中，這樣更安全。同時相比get，使用post可以向服務器發送更多的數據。因此，如果需要在數據庫中保存、添加和刪除數據就應該使用post。通常不確定使用哪種，就是用post，這樣不會泄露信息。
??表單驗證指的是提交表單時，對用戶輸入的每個字段的內容進行檢查，，看是否符合預期的格式。必須考慮將服務器端的驗證加入表單處理腳本。
??如果表單有很多內容需要填寫，可以使用fieldset元素將相關元素組合在一起，使表單更容易理解。還可以使用legend元素為每個fieldset提供一個標題（caption），用于描述每個組的目的。
對表單元素進行組織的步驟
在form開始標簽的下面、任何希望包含在第一個組的表單元素的上面，輸入<fieldset>。如果需要，輸入<legend>。（如果需要包含legend，它必須是fieldset里的第一個元素。）輸入標簽的文本。輸入</legend>以完成標簽。如果不使用legend，則創建一個標題從而可以識別屬于該fieldset的一組控件。創建屬于第一組的表單元素。輸入</fieldset>結束第一組表單元素。為每一組表單元素重復第1步至第7步。??文本框可以包含一行無格式的文本，它可以是訪問者想輸入的任何內容，通常用于姓名、地址等信息。
創建文本框的步驟
如果需要，輸入用于讓訪問者識別文本框的標簽，例如<lable for="idlable">Last Name:</lable>，其中idlable匹配第4步中的標簽。輸入<input type="text"。輸入name="datatime"，這里的datatime是用于讓服務器（和腳本）識別輸入數據的文本。如果在第1步中創建了lable，輸入id="idlable"，這里的idlable跟第1步中for屬性的文本一樣。這跟具有顯示文本框的lable元素關聯。很多程序員將id和name設為同一值。如果需要，輸入value="default"，這里的default是字段中最初現實的數據，如果訪問者沒有輸入別的內容的話，這一數據將被發送至服務器。如果需要，輸入placeholder="hinttext"，這里的hinttext是這個字段中最初顯示的數據，用于指導用戶的輸入，當input元素獲得焦點時，這些文本將會消失，讓用戶輸入內容。如果需要，輸入required="required"，表示僅在這個字段有值的情況下才能提交表單。如果需要，輸入autofocus或autofocus="autofocus"。如果這是第一個擁有此屬性的表單控件，input元素在頁面加載時會默認獲得焦點。如果需要，通過輸入size="n"定義文本框的大小，這里的n是需要設置的文本框的寬度，以字符為單位。也可以通過CSS設置輸入框的寬度。如果需要，輸入maxlength="n"，這里的n是該文本框允許輸入的最大字符數。最后，輸入>或/>，結束文本框。??注：默認情況下，大多數瀏覽器保存用戶輸入的文本，這樣就可以在日后節省用戶輸入的時間。可以通過對input添加autocomplete="off"來關閉這一特性。這對于要求輸入敏感信息（如信用卡）的字段來說很有用。如果將它用于form元素（<form method="post" action="PRocess.php" autocomplete="off">），那么其中的每個字段都會這樣。
??標簽（lable）是描述表單字段用途的文本。lable元素有一個特殊的屬性for，如果for的值與一個表單字段的id的值相同，該lable就與該字段顯示地關聯起來了。
為表單組件添加正式標簽
輸入<lable。如果需要，輸入for="idlable">，這里的idlable是對應表單元素的id屬性值。輸入標簽的內容。輸入</lable>。如果創建的是表單元素，確保包括id屬性，對應于第2步中指定的for屬性。??注：for、id和name屬性都可以擁有任意值，只要沒有空格。還可以將一個表單字段放在一個包含標簽文本的lable內，例如<lable>First Name: <input type="text" name="first_name" /></lable>。這種情況下就不需要使用for和id了。
??密碼框與文本框的唯一區別是密碼框中輸入的文本會使用圓點或星號進行隱藏。使用type=”passWord”創建密碼框，而不要使用type=”text”。
...<p class="row"> <label for="password">Password:</label> <input type="password" id="password" name="password" /></p><p class="row"> <label for="password2">Re-enter Password:</label> <input type="password" id="password2" name="password2" /></p>...創建密碼框的步驟
輸入用于讓訪問者識別密碼框的標簽。輸入<input type="password"。輸入id="idlable"，這里的idlable跟第1步中lable的for屬性值一樣。輸入name="dataname"，這里的datatime是用于讓服務器識別輸入數據的文本。通過輸入size="n"定義密碼框的大小，這里的n是需要設置的密碼框寬度，以字符為單位。如果需要，輸入maxlength="n"，這里的n是該密碼框允許輸入的最大字符數。如果需要，輸入required或者required="required"。如果需要，輸入autofocus或者autofocus="autofocus"。輸入>或/>，結束密碼框。??合適的type屬性值分別制定電子郵件框和電話框等。pattern屬性用于定制的驗證規則。
創建電子郵件框、搜索框、電話框和URL框的步驟
輸入用于讓訪問者識別輸入框的標簽。對于電子郵件框，輸入<input type="email">；對于搜索框，輸入<input type="search">；對于電話框，輸入<input type="tel">；對于URL框，輸入<input type="url">。輸入id="idlable"，這里的idlable跟第1步中lable的for屬性相同。輸入name="dataname"，這里的dataname是用于讓服務器識別輸入數據的文本。如果需要，輸入value="default"，這里的default是最初顯示在字段里的數據，也是訪問者什么都不輸入時將要發送給服務器的數據。如果需要，輸入placeholder="hinttext"，這里的hinttext是最初顯示在字段里作為對用戶輸入內容的提示的數據。如果需要，輸入required或者required="required"。如果需要，輸入autofocus或者autofocus="autofocus"。如果需要，通過輸入size="n"定義框的大小，這里的n是需要設置的框的寬度，以字符為單位。也可以用CSS設置寬度。如果需要，輸入maxlength="n"，這里的n是該框允許輸入的最大字符數。最后，輸入>或/>，結束輸入框。創建單選按鈕的步驟
如果需要，輸入單選按鈕的介紹文本。例如可以使用“選擇下列現象中的一個”。輸入<input type="radio"。輸入name="radioset"，這里的radioset用于識別發送至服務器的數據，同時用于將多個單選按鈕聯系在一起，確保同一組中最多只有一個被選中。輸入id="idlable"，這里的idlable對應在第8步中創建的for屬性值。跟name值不同（同一組單選按鈕的name值都是相同的），同一頁面中每個元素的id必須是唯一的。輸入value="data"，這里的data是該單選按鈕被選中時要發送給服務器的文本。如果需要，輸入checked或者checked="checked"讓該單選項按鈕在頁面打開時默認處于激活狀態。在一組單選按鈕中，只能對一個按鈕添加這一屬性。輸入>或者/>。輸入<lable for="idlable">radio lable</lable>，其中idlable與第4步中單選按鈕的id值相同，radio lable則用于讓訪問者識別該單選按鈕。radio lable的值通常與value的值相同，但這并不是必須的。對同一組內的所有單選按鈕，重復第2步至第8步。創建復選框的步驟
如果需要，輸入復選框的介紹文本。輸入<input type="checkbox"。輸入name="boxset"，這里的boxset用于識別發送至服務器的數據，同時用于將多個復選框聯系在一起（對所有的復選框使用同一個name值）。輸入id="idlable"，這里的idlable對應于第8步中lable的for屬性值。輸入value="data"，這里的data是該復選框被選中時要發送給服務器的文本。輸入checked或checked="checked"讓該復選框在頁面打開時默認處于選中狀態，建站者或訪問者可能會勾選默認的選項。輸入>或/>以結束復選框。輸入<lable for="idlable">checkbox lable</lable>，其中idlable與第4步復選框元素中的id值相同，checkbox lable則用于讓訪問者識別該復選框。對同一組內的所有復選框，重復第2步至第8步。創建文本區域的步驟
如果需要，輸入用于標識文本區域的解釋性文字。輸入<textarea。輸入id="idlable"，這里的idlable跟第1步中lable的for屬性值相同。輸入name="dataname"，這里的dataname是用于讓服務器（和腳本）識別輸入數據的文本。如果需要，輸入maxlength="n"，這里的n是可以輸入的最大字符數。輸入cols="n"，這里的n是文本區域的寬度（以字符為單位）。輸入rows="n"，這里的n是文本區域的高度（以行為單位）。輸入>。輸入文本區域的默認文本（如果有的話），這些文本會顯示在文本區域中。輸入</textarea>以完成文本區域。<select。輸入id="idlable"，這里的idlable跟第1步中lable的for屬性值一樣。輸入name="dataname"，這里的dataname用于在收集的數據發送至服務器時對數據進行識別。如果需要，輸入size="n"，這里的n代表選擇框的高度（以行為單位）。如果需要，輸入multiple或者multiple="multiple"，從而允許訪問者選擇一個以上的菜單選項。輸入>。輸入<option。輸入value="optiondata"，這里的optiondata是選項選中后要發送給服務器的數據。如果需要，輸入selested或者selected="selected"，指定該選項默認被選中。輸入>。輸入希望出現在菜單中的選項名稱。輸入</option>。對每個選項重復第8步至第13步。輸入</selected>。option元素之前輸入<optgroup。輸入lable="submenutitle">，這里的submenutitle是子菜單的標題。在該組的最后一個option元素之后輸入</option>。對每個子菜單重復第2步至第4步。<form method="post" enctype="multipart/form-data"。enctype屬性可以正確保存文件采用正確的格式上傳。接下來，輸入action="upload.url">，其中的upload.url是處理上傳文件的腳本的URL。為上傳文件區域輸入標簽。以方便訪問者知道上傳什么文件。輸入<input type="file"，創建一個文件上傳框和一個Browse（瀏覽）按鈕。輸入id="idlable"，這里的idlable跟第3步中lable的for屬性值相同。輸入name="dataname"，這里的dataname用于識別將要上傳的文件。如果需要，輸入size="n"，這里的n是訪問者可以輸入路徑和文件名的字段的寬度。如果需要，輸入multiple或者multiple="multiple"，這表示訪問者可以上傳一個以上的文件。輸入>或/>。結束表單，包括創建提交按鈕，輸入</form>結束標簽。 <form method="post" action="show-data.php" enctype="multipart/form-data"> ... <label for="picture">Picture:</label> <input type="file" id="picture" name="picture" /> <p class="instructions">Maximum size of 700k. JPG, GIF or PNG.</p> ... </form>??什么時候使用隱藏字段：假設有一個表單，希望讓訪問者在提交表單之前有機會檢查他們輸入的內容。處理表單的腳本可以向訪問者顯示提交的數據，同時創建一個表單，其中有包含同樣數據的隱藏字段。如果訪問者希編輯數據，他們只需后退即可，如果他們想提交表單，由于隱藏字段已經將數據填寫好了，因此他們不需要再次輸入數據了。隱藏字段出現在表單標記中的位置不重要，因為他們在瀏覽器中不可見。但是注意不要將敏感信息放入其中，因為查看html源代碼可以看見這些信息。
創建隱藏字段的步驟
輸入<input type="hidden"。輸入name="dataname"，這里的dataname確定要提交給服務器的信息。輸入value="data"，這里的data是要提交的信息本身。通常是表單處理腳本中的一個變量。輸入>或/>。??要創建訪問者可見但是不可修改的表單元素有兩種方法。一種是使用disabled（禁用）屬性。另一種是readonly（只讀）屬性。與禁用字段不同，只讀字段可以獲得焦點，訪問者可以選擇和復制里面的文本但不能修改這些文本，它只能應用于文本輸入框和文本區域，例如，<input type="text" id="coupon" name="coupon" value="FREE" readonly="readonly" />。還可以使用readonly="readonly"這樣的形式，結果是一樣的。
<input type="submit"。如果需要，輸入value="submit message"，這里的submit message是將要出現在按鈕上的文本。最后輸入>或者/>。<input type="submit" value="Create Profile" class="btn" /><input type="iamge"。輸入scr="image.url"，其中的image.url是圖像在服務器上的位置。輸入alt="description"，這里的description是當圖像無法顯示時需要出現的文本。輸入>或/>以結束圖像提交按鈕。<input type="image" scr="button-submit.png" width="188" height="95" alt="Create Profile" /><button type="submit" class="xxx">，其中class類可選，xxx為你所要指定的類的名稱。輸入將要出現在按鈕中圖像左側的文本（如果有的話）。輸入<img src="image.url"，這里的image.url是出現在按鈕上的圖像的名稱。輸入alt="alternate text"，這里的alternate text是當圖像無法顯示時需要出現的文本。如果需要，添加其他圖像屬性。輸入>或/>以結束圖像。輸入將要出現在圖像右側的文本（如果有的話）。輸入</button>。<button type="submit" class="btn"> <img src="check.png" width="188" height="95" alt=" " />Create Profile</button>??如果有多個提交按鈕，可以為每個按鈕設置name屬性和value屬性，從而讓腳本知道用戶按下的是哪個按鈕。否則最好省略name屬性。 ??可以使用submit元素創建不包含圖像的提交按鈕。任何時候，如果你的表單需要一個以上的提交按鈕，就應避免使用button元素，因為針對這種情況，不同瀏覽器的行為并不完全一致。 ??表單還可以有重置按鈕，用于將表單數據還原為頁面加載時（在訪問者填寫表單之前）的樣子。創建重置按鈕可以使用<input type="reset" />或<button type="reset">Reset</button>。我們也可以為重置按鈕添加樣式。 ??HTML5對type="email"和type="URL"的input添加自動驗證功能。對提交按鈕使用formnovalidate屬性可以關閉該功能，如<input type="submit" formnovalidate />。
??某些情況下，可能不想讓訪問者使用表單中的某些部分。例如，可能希望在所有必填字段完成之前禁用提交按鈕。禁用表單元素的值不會發送到服務器。 ??在表單元素的開始標簽后輸入disabled或者disabled="disabled"。
??CSS提供了一些根據表單元素狀態設置其樣式的偽類。其中大多數是CSS3新增的。下面是一些得到瀏覽器廣泛支持的偽類。
| 選擇器 | 應用 |
|---|---|
| :focus | 獲得焦點的字段 |
| :checked | 選中的單選按鈕或復選框 |
| :disabled | 具有disabled屬性的字段 |
| :enable | 與:disabled相反 |
| :required | 具有required屬性的字段 |
| :optional | 與:required相反 |
| :invalid | 其值于pattern屬性給出的模式不匹配的字段；或者值不是有效的電子郵件格式的電子郵件框，值不是有效URL格式的URL框，以及任何標記為required但值為空的字段。 |
| :valid | 與:invalid相反 |
一些例程
input:focus,textarea:focus { background-color: greenyellow;}input:checked + lable { color: green;}textarea:disabled { background-color: #ccc; border-color: #999; color: #666;}input:required,textarea:required { border: 2px solid #000;}針對特定狀態設置表單元素樣式的步驟
輸入selector，這里的selector包含本文上邊選擇器表中顯示的一種或多種狀態，接著輸入 { 開始樣式規則聲明。輸入你想為該狀態設置的任何property: value;聲明。輸入 } 結束樣式規則的聲明。HTML and CSS 讀書筆記
本文為本人原創，采用 知識共享 “署名-非商業性使用-相同方式共享” 4.0 (CC BY-NC-SA 4.0)”許可協議 進行許可。 本作品可自由復制、傳播及基于本作品進行演繹創作。如有以上需要，請通過E-mail等方式告知，并在文章開頭明顯位置加上署名 [ 丁學文.Blog ] 、原文鏈接及許可協議信息，并明確指出修改（如有），不得用于商業用途。謝謝合作。 詳情請點擊查看許可協議及版權聲明具體內容。
博主聯系方式： E-mail： xuewending1995@Gmail.com [ 請注明來意 ] GitHub： Levi.GitHub
新聞熱點
疑難解答
