form簡介

<form>是HTML中的一個元素，它表示文檔中的一個區域，這個區域包含了交互控件，用于向web服務器提交信息。

除全局屬性外，<form>還有如下一些屬性：

• accept-charset：一個以空格或逗號分隔（在HTML5中，僅能以空格作為分隔符）的列表，這個列表包括了服務器支持的字符編碼。瀏覽器以這些編碼被列舉的順序使用它們。默認值是一個保留字符串“UNKNOWN”。這個字符串指的是，和包含這個<form>元素的文檔相同的字符編碼。
• action：處理<form>表單數據的程序所在的URL地址，即向何處提交表單數據。
• autocomplete：用于設置<input>元素是否能夠有默認值，這個默認值是由瀏覽器自動補全的。這個設置可以被<form>的子元素的 autocomplete 屬性覆蓋。
  有兩個取值：off（瀏覽器不會自動補全），on（瀏覽器會根據用戶之前在form中輸入的值自動補全）。
• enctype：提交給服務器的表單數據內容的MIME類型，有三個取值：
  application/x-www-form-urlencoded（屬性未指定時的默認值），multipart/form-data（用于 type為 "file" 的 <input>元素），
  text/plain (HTML5)。
  enctype值可以被<button>或者<input>元素中的 formenctype 屬性覆蓋。
• method：向瀏覽器提交form表單的HTTP方法，有兩種方法：
  post方法：表單數據被包含在請求體中發送給服務器；
  get方法：表單數據會被追加到查詢字符串中發送給服務器。
  這個值可以被<button>或者<input>元素中的 formmethod 屬性覆蓋。
• name：指定form的名稱。
• novalidate：這個屬性是一個布爾屬性，指定了是否對表單提交的數據進行驗證。這個屬性可以被<button>或<input>的formnovalidate屬性覆蓋。
• target：指定<form>提交后，在哪里顯示響應。有以下幾種取值：
  _self：默認值，在當前文檔頁面加載返回值；
  _blank：在新窗口加載返回值；
  _parent：在父級上下文中加載，如果沒有父級，按_self執行；
  _top：如果是HTML 4文檔，清空當前文檔，加載返回內容；如果是HTML5，在頂級上下文內加載返回值。如果沒有父級，按_self執行。
  iframename: 指定的frame中加載。

form表單控件

1.<input>

<input>是form表單中最常用的輸入對象之一，具有如下屬性：

• type：設置控件的類型，默認為text。
  根據type屬性的不同，<input>有不同的作用，<input>的常見type如下：
  • button：無缺省行為按鈕。
  • radio：單選按鈕。必須使用 value 屬性定義此控件被提交時的值，使用checked指示控件是否被默認選擇。在同一個“單選按鈕組”中，所有單選按鈕的 name 屬性使用同一個值； 一個單選按鈕組中，同一時間只有一個單選按鈕可以被選擇。
  • checkbox：復選框。必須使用 value 屬性定義此控件被提交時的值，使用 checked 屬性指示控件是否被選擇，也可以使用 indeterminate 指示復選框在一種不確定狀態。
  • color：用來指定顏色的控件。
  • date：用來輸入日期的控件。
  • datetime：基于UTC時區的日期時間輸入控件。
  • datetime-local:用于輸入日期時間的控件，不包含時區。
  • month：輸入年月的控件，不帶時區。
  • week：用于輸入一個由星期-年組成的日期，日期不包括時區。
  • time：用于輸入不含時區的時間控件。
  • email：用于編輯email的字段，當提交表單時，會自動地對 email 字段的值進行驗證。合適的時候可以使用 :valid 和 :invalid CSS 偽類。
  • tel：用于輸入電話號碼的控件。
  • url：用于編輯URL的字段。
  • file：此控件可以讓用戶選擇文件。使用 accept 屬性可以定義控件可以選擇的文件類型。
  • hidden：不顯示在頁面上的控件，但它的值會被提交到服務器。
  • image：圖片提交按鈕，必須使用 src 屬性定義圖片的來源及使用 alt 定義替代文本。
  • number：用于輸入浮點數的控件。
  • password：用于輸入值被掩蓋的單行文本字段，可以用maxlength指定輸入值的最大長度。
  • range：用于輸入不精確值控件。
  • reset：用于將表單所內容設置為缺省值的按鈕。
  • submit：用于提交表單的按鈕。
  • search：用于輸入搜索字符串的單行文本字段，如果換行會從輸入的值中自動移除。
  • text：單行字段，換行會將自動從輸入的值中移除。
• accept：如果該元素的 type 屬性的值是file,則該屬性表明了服務器端可接受的文件類型；否則它將被忽略。
• autocomplete：設置是否自動填充，如果type屬性的值是hidden、checkbox、radio、file，或為按鈕類型（button、submit、reset、image），則本屬性被忽略。
• autofocus：設置在頁面加載時自動獲得焦點，如果type屬性設置為隱藏則不能應用。
• autosave：設置保存填寫數據，如果type的屬性的值是search，當頁面加載時，之前的搜索項目會在下拉菜單中出現。
• checked：如果該元素的type屬性的值為radio或者checkbox，則該布爾屬性的存在與否表明了該控件是否是默認選擇狀態。
• disabled：表示此控件被禁用，在禁用的控件中， click事件將不會被分發，且禁用的控件的值在提交表單時也不會被提交 。如果type屬性為hidden，此屬性將被忽略。
• form：設置與此控件關聯的<form>表單，該屬性的值與所關聯的<form>的id一致。
• formaction：表示處理<input>提交信息的程序的URI，如果指定了，將重寫<input>所屬<form>的action屬性。
• formenctype：如果<input>的類型是submit或image，此屬性值指定提交表單到服務器的內容類型，如果指定了，將重寫所屬<form>的enctype屬性。
• formmethod：如果<input>的類型是submit或image，此屬性指定了提交表單的HTTP方法。
• height： 如果type屬性是image，此屬性指定image的顯示高度。
• width：如果type屬性是image，此屬性指定image的顯示寬度。
• list：這個屬性可為用戶預設一組輸入選項，其值與同一文檔中的 <datalist>的id一致。
• max：設置日期或數字的最大值。
• min：設置日期或數字的最小值。
• multiple：當type屬性為email或file時，設置用戶是否可以輸入多個值。
• name：設置控件的名稱。
• pattern：檢查輸入值的正則表達式。
• placeholder：提示用戶可能的輸入值。
• readonly：設置輸入值是否不可修改；如果type是hidden，range，color，checkbox，radio，file或button，則該屬性可忽略。
• required：設置用戶在提交表單時該控件的值必填。
• spellcheck：設置拼寫檢查。
• src：如果type為image，該屬性設置了image的source。
• value：設置控件的初始值，除了type是checkbox或radio時必須指定value的值，其他情況下該屬性是可選的。

2.<button>

<button>表示一個可以點擊的按鈕，<button>元素比<input>元素更易樣式化，<button>元素內部可以添加內聯HTML內容（如<em>，<strong> 甚至<img>），并使用:after和:before偽元素實現復雜的渲染。但是不可以放圖像映射，因為它對鼠標和鍵盤敏感的動作會干擾按鈕的行為。

<button>有如下常見屬性：

• autofocus：一個布爾屬性，規定頁面加載時按鈕自動獲得輸入焦點。
• disabled：設置用戶不能與按鈕進行交互。
• form：表示<button>元素關聯的<form>元素（它的表單擁有者）。
• formaction：表示處理<button>提交信息的程序的URI，如果指定了，將重寫<button>所屬<form>的action屬性。
• formenctype：如果<button>是的類型是submit，此屬性值指定提交表單到服務器的內容類型。如果指定了，將重寫<button>所屬<form>的enctype屬性。
• formnovalidate：此屬性指定<button>提交時不需要驗證。如果指定了，它會重寫<button>所屬<form>的novalidate屬性。
• formtarget：如果<button>是submit類型，此屬性指定表單數據提交后在哪里顯示響應。如果指定了，它會重寫<button>所屬<form>的target屬性。
• name：指定<button>的名稱。
• type：指定<button>的類型。包括：submit，reset，button和menu。
• value：指定<button>的初始值。

3.<select>，<optgroup>，<option>，<datalist>

<select>可創建選項菜單，菜單內的選項為<option>，可由<optgroup>分組。
<select>具有如下屬性：

• autofocus：讓一個對象在頁面加載后自動獲得焦點。
• disabled：禁用下拉列表。
• form：指定<select>所關聯的<form>表單。
• multiple：設置select是否可以多選，默認為單選。
• name：指定控件名稱。
• required：規定用戶提交表單時，select的值不能為空。
• size：規定下拉列表可見選項的數量。
  <optgroup>會創建包含在<select>中的一組<option>選項，有兩個屬性：
• disabled 該選項組中的選項被禁用。
• label 設置選項組的名字。
  <option>可以在設置彈出窗口或其他項目列表中的菜單項，有如下屬性：
• disabled：設置選項不可選。
• label：表示選項含義。
• selected：設置初始被選中的選項。
• value：設置選項被選中時，提交給表單的值。
  例如：

<select>
  <optgroup label="Group 1">
    <option>Option 1.1</option>
  </optgroup> 
  <optgroup label="Group 2">
    <option disabled>Option 2.1</option>
    <option selected>Option 2.2</option>
  </optgroup>
</select>

<datalist>包含了一組<option>元素，規定了輸入域的選項列表。如果需要把<datalist>綁定到輸入域，則輸入域的list屬性需引用<datalist>的id，<option>元素一定要設置value的值。
例如：

<input list="list" name="input">
<datalist id="list">
    <option value="1">
    <option value="2">
    <option value="3">
</datalist>

4.<label>

<label>元素用于為表單控件設置標注，建立文字標簽與表單控件的關系，點擊<label>元素，相應的表單控件會獲得焦點。
<label>元素具有如下屬性：

• accesskey：設置從鍵盤訪問該元素的快捷鍵。
• for：規定<label>綁定到哪個表單元素，for的值設置為該元素的id。
• form：指定<label>所屬的<form>。
  用法如下：

<!-- for舉例 -->
<label for="option1">option1</label>
<input type="radio" name='option' id='option1'>
<!-- 嵌套舉例 -->
<label>option2<input type="radio" name='option'></label>

5.<textarea>

<textarea>表示一個多行文本編輯控件，包含如下屬性：

• autocomplete：設置是否自動補全。
• autofocus：設置頁面加載后自動獲得焦點。
• cols：設置文本域的可視列數（高度）。
• rows：設置文本域的可視行數（高度）。
• disabled：設置禁用文本域。
• form：指定所屬<form>。
• maxlength：設置允許用戶輸入字符的最大長度（Unicode）。
• minlength：設置允許用戶輸入字符的最小長度（Unicode）。
• name：設置元素的名稱。
• placeholder：占位符，用于提示用戶輸入的內容。
• readonly：設置用戶不可以修改文本，但是可以點擊和選擇。
• required：提示用戶該元素必填。
• wrap：指定文本換行的方式，有兩個取值：hard（文本達到最大寬度時，瀏覽器自動插入換行符），soft（文本達到最大寬度時不會自動插入換行符）。

6.<fieldset>和<legend>

<fieldset>通常用于對表單內的控件進行分組，<legend>用于給<fieldset>命名。

  <fieldset>
    <legend>Title</legend>
    <input type="radio" id="radio"> <label for="radio">Click me</label>
  </fieldset>

參考

• MDN
• 了解HTML表單之13個表單控件