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

jimhs 发布于2019-08-01 16:14 / 2025人阅读

摘要：表单元素从到表单相关的元素已经得到了很大的扩充基本能够满足我们常见的需求。但在此之前清楚的了解并掌握各种表单元素还是很重要的。在本文中我们将对表单元素默认是指表单元素进行详细的阐述。

表单元素

从 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表单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50383.html

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

摘要：表单元素从到表单相关的元素已经得到了很大的扩充基本能够满足我们常见的需求。但在此之前清楚的了解并掌握各种表单元素还是很重要的。在本文中我们将对表单元素默认是指表单元素进行详细的阐述。表单元素从 HTML 到 HTML5, 表单相关的元素已经得到了很大的扩充, 基本能够满足我们常见的需求。但在实际工作中, 因为交互或者浏览器兼容的需要, 有时候不得不对原生的表单元素进行扩展或者模拟。...

cnio 2019-08-20 13:52 评论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