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

jimhs 發(fā)布于2019-08-01 16:14 / 2161人閱讀

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

表單元素

從 HTML 到 HTML5, 表單相關(guān)的元素已經(jīng)得到了很大的擴(kuò)充, 基本能夠滿足我們常見的需求。但在實(shí)際工作中, 因?yàn)榻换セ蛘邽g覽器兼容的需要, 有時(shí)候不得不對(duì)原生的表單元素進(jìn)行擴(kuò)展或者模擬。但在此之前, 清楚的了解并掌握各種表單元素還是很重要的。在本文中, 我們將對(duì)表單元素 (默認(rèn)是指 HTML5 表單元素)進(jìn)行詳細(xì)的闡述。

form ¹

form 會(huì)自動(dòng)處理 submit 事件 (submit 事件通常由 type=submit 的 input 或者 button 的元素觸發(fā))

form 會(huì)自動(dòng)做一層校驗(yàn)，使用 form.novalidate 可以關(guān)閉原生的 validate

form 會(huì)根據(jù)每一個(gè)表單元素的 name 取得對(duì)應(yīng)的用戶輸入, 然后將 form data 以 query string 的形式添加到 action 屬性對(duì)應(yīng)的 url 后面。默認(rèn)的請(qǐng)求方法是 GET, 默認(rèn)的action 是當(dāng)前的 url。

event.target.elements 將會(huì)返回所有表單元素

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

可交互型 elements

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

下面列舉出來了一些：

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

textarea

select

option

反饋型 elements

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

下面列舉出來了一些:

meter

output

對(duì)于 output, 可以在 form.oninput 設(shè)置計(jì)算出來的 value

分組型 elements

用來對(duì)多個(gè)表單元素進(jìn)行分組的這一類表單元素, 我們把他們歸類為 分組型表單元素。

下面列舉出來了一些:

fieldset

optgroup

label

用 for 可與對(duì)應(yīng)關(guān)聯(lián)了 id 的交互 element 相連

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

不建議嵌套 label


  
    Title
    Click me

用 JavaScript 處理表單 field 的抽象

最基本的結(jié)構(gòu):

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

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

對(duì)于復(fù)雜結(jié)構(gòu)的 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"
        }
      ]
    }
  };

如果對(duì)上面的代碼不是很清楚的, 請(qǐng)參考 qs

一個(gè)完整的實(shí)現(xiàn)

阻止 form 默認(rèn)的 submit 事件

checkbox 需要拿 checked 而不是 value

select-multiple 需要存多個(gè)值

除了以上幾個(gè)特殊的交互元素之外, 其他的都默認(rèn)從 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));
});

結(jié)尾

如果你還想繼續(xù)了解在 react 中如何使用 form, 請(qǐng)移步我的另一篇博客 React.js -- 優(yōu)化你的表單

MDN 上關(guān)于 form 的介紹 ?

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/50383.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

jimhs

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

深度學(xué)習(xí)框架tensorflow

閱讀 773·2023-04-25 19:53
主機(jī)的域名是什么-主機(jī)域名中哪個(gè)表示主機(jī)名？

閱讀 4413·2021-09-22 15:13
HTML contenteditable屬性

閱讀 2635·2019-08-30 10:56
如何在Vue里建立長(zhǎng)按指令

閱讀 1383·2019-08-29 16:27
HTML簡(jiǎn)單的提示框

閱讀 3020·2019-08-29 14:00
js異步從入門到放棄（四）- Generator 封裝異步任務(wù)

閱讀 2491·2019-08-26 13:56
深入理解 Undefined

閱讀 621·2019-08-26 13:29
||和&&返回什么?

閱讀 1684·2019-08-26 11:31

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

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

相關(guān)文章