網站表單-與數據合作
這篇指南提供了一系列的文章，幫你掌握 HTML 表單的基本知識。對於與使用者互動，網站表單是一項十分有力的工具，最常使用於用戶數據蒐集，或控制使用者介面。但由於一些歷史與技術上的因素，並沒有顯著的方法發揮表單的潛力。在下面的指引中，我們將介紹網站表單所有基本面向，包括標記他們的 HTML 結構、設定控制器樣式、驗證數據及將數距提送至伺服器
參考文章列表
HTML 文件
HTML 元素
| HTML 元素 | 元素的 DOM interface | 說明 |
|---|---|---|
<button> |
HTMLButtonElement |
該按鈕元素表示一個可點擊的按鈕。 |
<datalist> |
HTMLDataListElement |
該數據列表元素包含了一組 <option> 表示對其他表單元素的值可能的選擇要素。 |
<fieldset> |
HTMLFieldSetElement |
該字段集是用來在表單中的組數表單元素。 |
<form> |
HTMLFormElement |
的形式元素表示的文件的一部分，它包含使用戶能夠提交信息給 web 服務器的交互元件。 |
<input> |
HTMLInputElement |
該 輸入元素用於創建表格的交互式控制。 |
<label> |
HTMLLabelElement |
該標籤元素代表一個項目在用戶界面的標題 |
<legend> |
HTMLLegendElement |
在傳說元素代表一個標題為其父 <fieldset> 的內容。 |
<meter> |
HTMLMeterElement |
所述米元素表示一個已知的範圍內的任一標量值或分數值。 |
<optgroup> |
HTMLOptGroupElement |
在 OPTGROUP 元素創建一個 <select> 元素中的一組選項。 |
<option> |
HTMLOptionElement |
在 HTML 選項元素用於創建表示 <select> ，一個 <optgroup> 或 <datalist> 元素中的項目的控制。 |
<output> |
HTMLOutputElement |
的輸出元素表示一個計算的結果。 |
<progress> |
HTMLProgressElement |
的進展元素用於查看任務的完成進度。 |
<select> |
HTMLSelectElement |
在選擇元素代表呈現一個選項菜單的控制。 |
<textarea> |
HTMLTextAreaElement |
該 textarea 的元素代表多行純文本編輯控制。 |
備註：
所有的表單元素，因為所有的 HTML 元素，支持 HTMLElement DOM 接口。
HTML 屬性
| 屬性 | 能使用該屬性的 HTML 元素 | 說明 |
|---|---|---|
| accept |
<form>, <input>
|
的類型列表服務器接受，通常是文件類型。 |
| accept-charset | <form> |
字符集，必須指定為 "UTF-8"（若提供）。 |
| action | <form> |
一個程序處理通過表單提交的信息的URI。 |
| autocomplete |
<form>、<input>
|
指示是否在這個表單控件可以在默認情況下有其值由瀏覽器自動完成。 |
| autofocus |
<button>、
<input>、
<select>、
<textarea>
|
該元素應該在頁面加載後自動聚焦。 |
| checked | <input> |
指示是否應將元素在頁面加載檢查。 |
| cols | <textarea> |
限定在一個textarea的列數。 |
| data | <object> |
指定的資源的URL。 |
| dirname |
<input>,
<textarea>
|
|
| disabled |
<button>、<fieldset>、<input>、<optgroup>、<option>、<select>、<textarea>
|
表明用戶是否可以與元件進行交互。 |
| enctype | <form> |
定義當表單數據的內容類型的方法是POST。 |
| for |
<label>、<output>
|
描述了屬於這一種元素。 |
| form |
<button>、<fieldset>、<input>、<label>、<meter>、<object>、<output>、<progress>、<select>、<textarea>
|
表明是元件的所有者的形式。 |
| high | <meter> |
表示下界的上限範圍。 |
| list |