網站表單-與數據合作

這篇指南提供了一系列的文章，幫你掌握 HTML 表單的基本知識。對於與使用者互動，網站表單是一項十分有力的工具，最常使用於用戶數據蒐集，或控制使用者介面。但由於一些歷史與技術上的因素，並沒有顯著的方法發揮表單的潛力。在下面的指引中，我們將介紹網站表單所有基本面向，包括標記他們的 HTML 結構、設定控制器樣式、驗證數據及將數距提送至伺服器

參考文章列表

  1. 我的第一個 HTML 表單 (en-US)
  2. 如何構建 HTML 表單 (en-US)
  3. 本機表單控件 (en-US)
  4. CSS 和 HTML 表單
    1. 造型 HTML 表單 (en-US)
    2. HTML 表單高級造型 (en-US)
    3. 表單控件屬性兼容表 (en-US)
  5. 發送和檢索表單數據 (en-US)
  6. 數據表單驗證 (en-US)
  7. 如何創建自定義表單控件 (en-US)
  8. 通過 JavaScript 發送形式 (en-US)
    1. 使用 FORMDATA 對象
  9. 在傳統的瀏覽器的 HTML 表單 (en-US)

HTML 文件

HTML 元素

HTML 元素 元素的 DOM interface 說明
<button> (en-US) HTMLButtonElement (en-US) 該按鈕元素表示一個可點擊的按鈕。
<datalist> (en-US) HTMLDataListElement (en-US) 該數據列表元素包含了一組 <option> (en-US) 表示對其他表單元素的值可能的選擇要素。
<fieldset> (en-US) HTMLFieldSetElement (en-US) 該字段集是用來在表單中的組數表單元素。
<form> (en-US) HTMLFormElement (en-US) 的形式元素表示的文件的一部分，它包含使用戶能夠提交信息給 web 服務器的交互元件。
<input> (en-US) HTMLInputElement (en-US) 該 輸入元素用於創建表格的交互式控制。
<label> (en-US) HTMLLabelElement (en-US) 該標籤元素代表一個項目在用戶界面的標題
<legend> (en-US) HTMLLegendElement (en-US) 在傳說元素代表一個標題為其父 <fieldset> (en-US) 的內容。
<meter> (en-US) HTMLMeterElement (en-US) 所述米元素表示一個已知的範圍內的任一標量值或分數值。
<optgroup> (en-US) HTMLOptGroupElement (en-US) 在 OPTGROUP 元素創建一個 <select> (en-US) 元素中的一組選項。
<option> (en-US) HTMLOptionElement (en-US) 在 HTML 選項元素用於創建表示 <select> (en-US) ，一個 <optgroup> (en-US) 或 <datalist> (en-US) 元素中的項目的控制。
<output> (en-US) HTMLOutputElement (en-US) 的輸出元素表示一個計算的結果。
<progress> (en-US) HTMLProgressElement (en-US) 的進展元素用於查看任務的完成進度。
<select> (en-US) HTMLSelectElement (en-US) 在選擇元素代表呈現一個選項菜單的控制。
<textarea> (en-US) HTMLTextAreaElement (en-US) 該 textarea 的元素代表多行純文本編輯控制。

備註： 所有的表單元素，因為所有的 HTML 元素，支持 HTMLElement (en-US) DOM 接口。

HTML 屬性

屬性 能使用該屬性的 HTML 元素 說明
accept <form> (en-US), <input> (en-US) 的類型列表服務器接受，通常是文件類型。
accept-charset <form> (en-US) 支持的字符集列表。
action <form> (en-US) 一個程序處理通過表單提交的信息的URI。
autocomplete <form> (en-US), <input> (en-US) 指示是否在這個表單控件可以在默認情況下有其值由瀏覽器自動完成。
autofocus <button> (en-US)、 <input> (en-US)、 <select> (en-US)、 <textarea> (en-US) 該元素應該在頁面加載後自動聚焦。
checked <input> (en-US) 指示是否應將元素在頁面加載檢查。
cols <textarea> (en-US) 限定在一個textarea的列數。
data <object> (en-US) 指定的資源的URL。
dirname <input> (en-US), <textarea> (en-US)
disabled <button> (en-US)、<fieldset> (en-US)、<input> (en-US)、<optgroup> (en-US)、<option> (en-US)、<select> (en-US)、<textarea> (en-US) 表明用戶是否可以與元件進行交互。
enctype <form> (en-US) 定義當表單數據的內容類型的方法是POST。
for <label> (en-US)、<output> (en-US) 描述了屬於這一種元素。
form <button> (en-US)、<fieldset> (en-US)、<input> (en-US)、<label> (en-US)、<meter> (en-US)、<object> (en-US)、<output> (en-US)、<progress> (en-US)、<select> (en-US)、<textarea> (en-US) 表明是元件的所有者的形式。
high <meter> (en-US) 表示下界的上限範圍。
list <input> (en-US) 標識的預定義的選項的列表，以向用戶建議。
low <meter> (en-US) 指示上限較低的範圍內。
max <input> (en-US)、<meter> (en-US)、<progress> (en-US) 指示所允許的最大值。
maxlength <input> (en-US) 、 <textarea> (en-US) 定義了在元件允許的字符的最大數目。
method <form> (en-US) 定義提交表單時使用的HTTP方法。可GET（默認）或POST。
min <input> (en-US) 、 <meter> (en-US) 指示所允許的最小值。
multiple <input> (en-US)、 <select> (en-US) 表示是否多個值所用的類型的輸入可以輸入電子郵件或文件。
name <button> (en-US)、<form> (en-US)、<fieldset> (en-US)、<input> (en-US)、<output> (en-US)、<select> (en-US)、<textarea> (en-US) 該元素的名稱。例如所使用的服務器，以確定在表單提交的字段。
novalidate <form> (en-US) 此屬性表明，當提交表單應該無法通過驗證。
optimum <meter> (en-US) 表示最佳數值。
pattern <input> (en-US) 定義一個正則表達式元素的值將針對驗證。
placeholder <input> (en-US)、 <textarea> (en-US) 提供一個提示什麼可以在字段中輸入的用戶。
readonly <input> (en-US) 、 <textarea> (en-US) 指示該元素是否可以編輯或沒有。
required <input> (en-US) 、 <select> (en-US)、 <textarea> (en-US) 指示此元素是否必填。
rows <textarea> (en-US) 限定在一個textarea的行數。
selected <option> (en-US) 定義了將在頁面加載所選的值。
size <input> (en-US)、 <select> (en-US) 限定了元件的寬度（以像素為單位）。如果該元素的類型的屬性是文本或密碼那麼它的字符數。
src <img> (en-US) 可嵌入內容的URL。
step <input> (en-US)
target <form> (en-US)
type <button> (en-US) 、 <input> (en-US) 限定了元件的類型。
usemap <img> (en-US)
value <button> (en-US)、 <option> (en-US)、 <input> (en-US)、 <meter> (en-US)、 <progress> (en-US) 定義了將被顯示在頁面上的負載元件的默認值。
wrap <textarea> (en-US) 指示文本是否應被包裹或沒有。

規範性引用文件