成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

cnio / 714人閱讀

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

表單元素

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

form 1

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

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

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


    
    
    60

對于 output, 可以在 form.oninput 設(shè)置計算出來的 value
分組型 elements

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

下面列舉出來了一些:

fieldset

optgroup
label

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

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

不建議嵌套 label 


  

    Title
    
    
  



  

    用戶信息
用 JavaScript 處理表單 field 的抽象

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

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

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

對于復(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"
        }
      ]
    }
  };

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

一個完整的實現(xiàn)

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

checkbox 需要拿 checked 而不是 value

select-multiple 需要存多個值

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

form.html


    

        Login
        
        
        
    

    

        

            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, 請移步我的另一篇博客 React.js -- 優(yōu)化你的表單

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

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

    轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81290.html

    相關(guān)文章

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

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

      jimhs 評論0 收藏0

    • 【CSS練習(xí)】IT修真院--練習(xí)4-移動端界面

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

      kun_jian 評論0 收藏0

    • 【譯】HTML表單指南---第一個HTML表單

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

      yearsj 評論0 收藏0

    • 編寫高質(zhì)量Javascript的要點-Review深入理解Javascript系列(一)

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

      wh469012917 評論0 收藏0

    • 【譯】怎么樣構(gòu)建HTML表單

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

      hover_lew 評論0 收藏0

    發(fā)表評論

    0條評論

    cnio

    男|高級講師

    TA的文章

    閱讀更多
    最新活動
    閱讀需要支付1元查看
    <