深入理解 HTML 表單

表單元素

從 HTML 到 HTML5, 表單相關的元素已經得到了很大的擴充, 基本上能夠滿足我們常見的需求。但在實際工作中, 因為互動或瀏覽器相容的需要, 有時候不得不對原生的表單元素進行擴充或模擬。但在此之前, 清楚的了解並掌握各種表單元素還是很重要的。在本文中, 我們將對表單元素 (預設是指 HTML5 表單元素)進行詳細的闡述。

form

●form 會自動處理submit 事件(submit 事件

●form 會自動處理submit 事件(submit 事件通常由校類驗，使用form.novalidate 可以關閉原生的validate

●form 會根據每個表單元素的name 取得對應的使用者輸入,  然後將form data 以query string 的形式加入action 屬性對應的url 後面。預設的請求方法是 GET, 預設的action 是目前的 url。

●event.target.elements 將會傳回所有可互動的元素

<form novalidate>
  <input name=&#39;username&#39; required/>
  <input name=&#39;passworkd&#39; type=&#39;password&#39; required/>
  <input name=&#39;email&#39; type=&#39;email&#39;/>
  <input type=&#39;submit&#39; value=&#39;submit&#39;/>
</form>

運行上面的程式碼可以看到, 提交表單之後，瀏覽器的位址會增加類似這樣的query string ?username=tom&passworkd=123&emaild=123&emaild=123&emaild=123&emaild=123&emaild=123&emaild=123&emaild=123&emaild=123&emaild=123&emaild=123&emaild=123&emaild=123&emaild=123&emaild=123&emaild=123&emaild=123&emaild。 =test%40gmail.com

可交互型elements

需要跟用戶進行交互，並獲得用戶輸入的這一類表單元素，我們把它們歸類為可交互型表單元素。

下面列舉出來了一些：

●input: 常用的type 有checkbox, tel, number, email 等

●textarea

●select

●option

型資訊, 不需要跟使用者互動的表單元素，我們把它們歸類為回饋表單元素。 下面列舉出來了一些:

●meter

●output

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type=&#39;number&#39; value=&#39;50&#39; name=&#39;a&#39; />
    <input type=&#39;number&#39; value=&#39;10&#39; name=&#39;b&#39; />
    <output name=&#39;result&#39;>60</output>
</form>

對於output, 可以在form.oninput 設定計算出來的value

型群組的這一類表單元素, 我們把他們歸類為分組型表單元素。

下面列舉了一些:

●fieldset

●optgroup

<form>
  <select>
    <optgroup label=&#39;group1&#39;>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </optgroup>
    <optgroup label=&#39;group2&#39;>
      <option>4</option>
      <option>5</option>
      <option>6</option>
    </optgroup>
    <optgroup label=&#39;group3&#39;>
      <option>7</option>
      <option>8</option>
      <option>9</optioin>
    </optgroup>
  </select>
</form>

label

●opt 可與對應關聯了id 的交互個, 控制第一個

●不建議嵌套label

<form>
  <fieldset>
    <legend>Title</legend>
    <label for=&#39;radio&#39;>Click me</label>
    <input type=&#39;radio&#39; id=&#39;radio&#39;/>
  </fieldset>
</form>

<form>
  <fieldset>
    <legend>用户信息</legend>
    <label>
      男 <input type=&#39;radio&#39; name=&#39;gender&#39; id=&#39;male&#39; />
    </label>
    <label>
      女 <input type=&#39;radio&#39; name=&#39;gender&#39; id=&#39;female&#39;/>
    </label>
  </fieldset>
</form>

用JavaScript 處理表單

field 的抽象

, 分割後合成為一個String

●對於複雜結構的name 可以使用keyPath

 field: {
    name: String,
    value: String || String[]
  }

如果對上面的程式碼不是很清楚的,參考qs

一個完整的實作

參考qs

一個完整的實作

參考qs

一個完整的實作

參考qs

阻止事件

●checkbox 需要拿checked 而不是value

●select-multiple 需要存多個值

●除了以上幾個特殊的交互元素之外, 其他的都默認從value 中去取值

form. html

  const fromKeyValues = {
    'user.name': 'Tom',
    'user.phone[0].number': '123456',
    'user.phone[0].type': 'mobile'
  };

  const fromValues = {
    user: {
      name: 'Tom',
      phone: [
        {
          number: '123456',
          type: 'mobile'
        }
      ]
    }
  };

form.js

<form>
    <fieldset>
        <legend>Login</legend>
        <input name=&#39;username&#39; placeholder=&#39;username&#39; minlength=&#39;2&#39;/>
        <input name=&#39;password&#39; type=&#39;password&#39; placeholder=&#39;password&#39;/>
        <label>
            remember password            <input name=&#39;checkbox&#39; type=&#39;checkbox&#39;/>
        </label>
    </fieldset>
    <fieldset>
        <p class="gender">
            <legend>More Info</legend>
            <label>
                男                <input name=&#39;gender&#39; type=&#39;radio&#39; value=&#39;male&#39; />
            </label>
            <label>
                女                <input name=&#39;gender&#39; type=&#39;radio&#39; value=&#39;female&#39; />
            </label>
        </p>
        <select name=&#39;select&#39; multiple>
            <option>1</option>
            <optgroup label=&#39;2&#39;>
                <option>2.1</option>
                <option>2.2</option>
            </optgroup>
        </select>
    </fieldset>
    <button type=&#39;submit&#39;>Submit</button></form>