每次写表单都像受刑？为了一个校验，动不动就引入一大坨JS库。其实HTML里的input早就进化了，自带一堆功能。今天我把22个类型全给你列出来，能用原生的就别自己写JS。

很多开发者都遇到过这样的问题：在React表单里输入内容时，每敲一个字符都能感觉到明显的延迟。字符显示慢半拍，删除时也要等一会儿才消失。

本文介绍了如何实现一个FormPrompt组件，在用户尝试离开具有未保存更改的页面时发出警告。文章讨论了如何使用纯JavaScript和beforeunload事件处理这类情况

表单自动填充是个好功能，因为可以省去用户自己输入的麻烦。比方说一个 name 属性值是 email 的输入框，聚焦点击后，可能就出现下图所示的邮箱列表：

在本文中，我们会介绍Vue 3中 v-model 指令的变化。然后，再通过一个事例讲解下如何使用多个v-model绑定来简化Vue中复杂表单的构建过程。

在日常的中后台系统开发中，表单是和我们打交道非常多的名词。但是在一般的表单实现中、我们会做着很多重复的工作，不停在写 FormItem...，以及为组件加上

前端拦截是指通过 HTML 页面来拦截重复请求，比如在用户点击完“提交”按钮后，我们可以把按钮设置为不可用或者隐藏状态。

action提交到的url，如果不写action的话，提交表单将重新请求当前页面。如果此时写了method，将按method方法去请求对应的url。请求方法，可选值为GET和POST。

使用ajax可以实现无刷新提交表单，但有人表示ajax的效率不行，或者是其他缺点，例如客户端臃肿，太多客户段代码造成开发上的成本，如果网速慢，则会出现ajax请求缓慢，页面空白的情况，对客户的体验不好。ajax请求不利于搜索引擎优化

要从HTML表单中获取所有字段，可以使用：this.elements或event.target.elements，只有在预先知道所有字段并且它们保持稳定的情况下，才能使用。使用FormData构建具有所有字段的对象，之后可以转换，更新或将其发送到远程API。

表单是前端开发中最棘手的部分之一，您可能会在其中发现很多混乱的代码。基于组件的框架，如 Vue.js，在提高前端代码的可扩展性方面做了很多工作，但是表单的问题仍然存在。

表单一点击提交按钮(submit)必然跳转页面，如果表单的action为空也会跳转到自己的页面，即效果为刷新当前页。 如下，可以看到一点击提交按钮

这些情况都会导致表单重复提交，造成数据重复，增加服务器负载，严重甚至会造成服务器宕机。因此有效防止表单重复提交有一定的必要性。

在 React 中，表单元素通过组件的 state 属性来自己维护 state，并根据用户输入调用setState()来进行数据更新，使 React 的 state 成为“唯一数据源”，被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

在做移动端项目开发的时候，经常会遇到各种表单验证，有时候不同的页面，验证规则是一样的；之前项目里的验证代码写的很凌乱，最近刚好遇到这个模块的功能需要重构