深入理解 form 系列（一）-- HTML 表單

cnio 發布于2019-08-20 13:52 / 709人閱讀

摘要：表單元素從到表單相關的元素已經得到了很大的擴充基本能夠滿足我們常見的需求。但在此之前清楚的了解并掌握各種表單元素還是很重要的。在本文中我們將對表單元素默認是指表單元素進行詳細的闡述。

表單元素

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

form ¹

form 會自動處理 submit 事件 (submit 事件通常由 type=submit 的 input 或者 button 的元素觸發)

form 會自動做一層校驗，使用 form.novalidate 可以關閉原生的 validate

form 會根據每一個表單元素的 name 取得對應的用戶輸入, 然后將 form data 以 query string 的形式添加到 action 屬性對應的 url 后面。默認的請求方法是 GET, 默認的action 是當前的 url。

event.target.elements 將會返回所有表單元素

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

可交互型 elements

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

下面列舉出來了一些：

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

textarea

select

option

反饋型 elements

只是單純地反饋信息, 不需要跟用戶進行交互的表單元素，我們把它們歸類為 反饋型表單元素。

下面列舉出來了一些:

meter

output

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

分組型 elements

用來對多個表單元素進行分組的這一類表單元素, 我們把他們歸類為 分組型表單元素。

下面列舉出來了一些:

fieldset

optgroup

label

用 for 可與對應關聯了 id 的交互 element 相連

可以用來包裹可交互 elment, 包括多個, 控制第一個

不建議嵌套 label


  
    Title
    Click me

用 JavaScript 處理表單 field 的抽象

最基本的結構:

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

value 的 String[] 通常是用 , 分割后合成為一個 String

對于復雜結構的 name 可以使用 keyPath

  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"
        }
      ]
    }
  };

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

一個完整的實現

阻止 form 默認的 submit 事件

checkbox 需要拿 checked 而不是 value

select-multiple 需要存多個值

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

form.html


    
        Login
        
        
        
            remember password
            
        
    
    
        
            More Info
            
                男
                
            
            
                女

form.js

var $form = document.querySelector("form");

function getFormValues(form) {
  var values = {};
  var elements = form.elements; // elemtns is an array-like object

  for (var i = 0; i < elements.length; i++) {
    var input = elements[i];
    if (input.name) {
      switch (input.type.toLowerCase()) {
        case "checkbox":
          if (input.checked) {
            values[input.name] = input.checked;
          }
          break;
        case "select-multiple":
          values[input.name] = values[input.name] || [];
          for (var j = 0; j < input.length; j++) {
            if (input[j].selected) {
              values[input.name].push(input[j].value);
            }
          }
          break;
        default:
          values[input.name] = input.value;
          break;
      }
    }

  }

  return values;
}

$form.addEventListener("submit", function(event) {
  event.preventDefault();
  getFormValues(event.target);
  console.log(event.target.elements);
  console.log(getFormValues(event.target));
});

結尾

如果你還想繼續了解在 react 中如何使用 form, 請移步我的另一篇博客 React.js -- 優化你的表單

MDN 上關于 form 的介紹 ?

GPU云服務器云服務器深入理解系列 html form表單 html表單form html的form表單

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81290.html

深入理解 form 系列（一）-- HTML 表單

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

jimhs 2019-08-01 16:14 評論0 收藏0
【CSS練習】IT修真院--練習4-移動端界面

摘要：任務四一個最常見的移動端頁面完成的事情完成簡單布局，然后填充界面與效果圖對比優化完成驗收要求擴展性頂欄固定進行樣式兼容性研究完成任務四深度思考跟隨深度思考師兄建議進行修改輸入欄左側換用輸入限制電話位，密碼位根據結構的語義化修改嘗試下再加一任務四、一個最常見的移動端頁面完成的事情完成簡單布局，然后填充界面與效果圖對比優化完成驗收要求：header擴展性 & 頂欄固定進行p...

kun_jian 2019-08-29 15:39 評論0 收藏0
【譯】HTML表單指南---第一個HTML表單

摘要：一個表單由一或多個部件組成，這些部件可以是文本框單行或多行選擇框按鈕復選框或單選按鈕。在我們的示例里，一個文本框中用了該屬性的默認值，該值表示一個基本的單行文本框，用于接收無控制或驗證的任何文本。前言這個系列譯自mdn上的一份表單指南，原文詳盡闡述了表單相關的基礎知識。而表單作為一個經典的頁面交互方式，是每個前端工程師繞不開的話題，通過翻譯這個系列的文章既是有助于掃清自己的知識盲區...

yearsj 2019-08-02 15:55 評論0 收藏0
編寫高質量Javascript的要點-Review深入理解Javascript系列(一)

摘要：編寫高質量的要點深入理解系列一知識點最小全局變量全局變量命名易與第三方的腳本引起沖突所以盡可能少的使用全局變量是很重要的相關策略有命名空間模式或是函數立即自動執行，但是要想讓全局變量少最重要的還是始終使用來聲明變量。 Title: 編寫高質量Javascript的要點-Review深入理解Javascript系列(一)date: 2017-6-9 14:14:20 status: p...

wh469012917 2019-08-21 11:44 評論0 收藏0
【譯】怎么樣構建HTML表單

摘要：當你構建表單時，可以試著聽一下屏幕閱讀器如何讀取它，若聽起來很奇怪，那就有必要改進你的表單結構了。該規則必須在表單頭部以保證在用戶找到必填元素之前，屏幕閱讀器等無障礙設備能將其展示或讀給用戶。系列文章說明原文在建立HTML表單時，最重要的一件事就是如何用正確的方式構建它。而之所以重要，原因有二：一是保證表單能被正確使用、二是這能保證你的表單是無障礙的（可以被能力不同的人使用）...

hover_lew 2019-08-02 15:55 評論0 收藏0