網站表單-與數據合作
這篇指南提供了一系列的文章,幫你掌握 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> |
支持的字符集列表。 |
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 | <input> |
標識的預定義的選項的列表,以向用戶建議。 |
low | <meter> |
指示上限較低的範圍內。 |
max |
<input> 、<meter> 、<progress>
|
指示所允許的最大值。 |
maxlength |
<input> 、
<textarea>
|
定義了在元件允許的字符的最大數目。 |
method | <form> |
定義提交表單時使用的HTTP方法。可GET(默認)或POST。 |
min |
<input> 、
<meter>
|
指示所允許的最小值。 |
multiple |
<input> 、
<select>
|
表示是否多個值所用的類型的輸入可以輸入電子郵件 或文件 。
|
name |
<button> 、<form> 、<fieldset> 、<input> 、<output> 、<select> 、<textarea>
|
該元素的名稱。例如所使用的服務器,以確定在表單提交的字段。 |
novalidate | <form> |
此屬性表明,當提交表單應該無法通過驗證。 |
optimum | <meter> |
表示最佳數值。 |
pattern | <input> |
定義一個正則表達式元素的值將針對驗證。 |
placeholder |
<input> 、
<textarea>
|
提供一個提示什麼可以在字段中輸入的用戶。 |
readonly |
<input> 、
<textarea>
|
指示該元素是否可以編輯或沒有。 |
required |
<input> 、
<select> 、
<textarea>
|
指示此元素是否必填。 |
rows | <textarea> |
限定在一個textarea的行數。 |
selected | <option> |
定義了將在頁面加載所選的值。 |
size |
<input> 、
<select>
|
限定了元件的寬度(以像素為單位)。如果該元素的類型 的屬性是文本 或密碼 那麼它的字符數。
|
src | <img> |
可嵌入內容的URL。 |
step | <input> |
|
target | <form> |
|
type |
<button> 、
<input>
|
限定了元件的類型。 |
usemap | <img> |
|
value |
<button> 、
<option> 、
<input> 、
<meter> 、
<progress>
|
定義了將被顯示在頁面上的負載元件的默認值。 |
wrap | <textarea> |
指示文本是否應被包裹或沒有。 |