form表单

表单在Web网页中用以让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给Web服务器端的程序以处理，从而使得Web服务器与用户之间具有交互功能。
表单实现前后台交互：用户将表单提交到后台再右后台提交到数据库的过程，实现前后端交互。
表单在网页中主要负责数据采集功能，它用< form >标签定义。用户输入的信息都要包含在form标签中，点击提交后，< form >和</ form >里面包含的数据将被提交到服务器或者电子邮件里。
所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。

form表单简介

表单是由窗体和控件组成的,一个表单一般应该包含用户填 写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。
表单标签的格式:
< form action＝"url" method=get|post name=“myform” >< /form >

• name：表单提交时的名称
• action：提交到的地址
• method：提交方式，默认为get
  post和get区别：

1. 数据提交方式，get把提交的数据url可以看到，post看不到
2. get一般用于提交少量数据，post用来提交大量数据
3. get最多提交2kb数据，post理论上没有限制
4. get提交的数据在浏览器历史记录中，安全性不好

一个完整的表单包含三个基本组成部分

• 表单标签
  是指< form >标签本身,它是一个包含表单元素的区域,使用< form >< /form >定义
• 表单域
  是< form >标签中用来收集用户输入的每一项,通常用input标签来定义,input标签有不同的类型,用以对用用户不同的数据(比如:文本域、下拉列表、单选框、复选框等等）
• 表单按钮
  用来提交< form >表单中所有信息到服务器
  *表单域和表单按钮都属于表单元素

form表单属性

form支持HTML的全局属性

accept

已弃用

accept-charset

定义和用法: accept-charset 属性规定服务器用哪种字符集处理表单数据。
语法:

<form accept-charset="value" >

常用值:

• UTF-8 - Unicode 字符编码
• ISO-8859-1 - 拉丁字母表的字符编码
• gb2312 - 简体中文字符集
  服务器可处理的一个或多个字符集。如需规定一个以上的字符集，请使用逗号来分隔各字符集。
  理论上讲，可使用任何字符编码，但没有浏览器可以理解所有的编码。字符编码使用得越广泛，浏览器对其支持越好。

action

定义和用法: 必需的 action 属性规定当提交表单时，向何处发送表单数据。
语法:

<form action="value">

常用值:

• 绝对 URL - 指向其他站点（比如 src=“www.example.com/example.htm”）
• 相对 URL - 指向站点内的文件（比如 src=“example.htm”

autocomplete

定义和用法: autocomplete 属性规定表单是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。autocomplete 属性适用于 < form>，以及下面的 < input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。
语法:

<form autocomplete="on|off">

常用值:

• on 默认。规定启用自动完成功能。
• off 规定禁用自动完成功能。

enctype

定义和用法: enctype 属性规定在将表单数据发送到服务器之前如何对其进行编码。( 只有 method=“post” 时才使用 enctype 属性。 )
语法:

<form enctype="value"> 

常用值:

• application/x-www-form-urlencoded 默认。在发送前对所有字符进行编码（将空格转换为 “+” 符号，特殊字符转换为 ASCII HEX 值,窗体数据被编码为名称/值对。这是标准的编码格式。 。
• multipart/form-data 不对字符编码。当使用有文件上传控件的表单时，该值是必需的,窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。
• text/plain 将空格转换为 “+” 符号，但不编码特殊字符,窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。

method

定义和用法: method 方法规定如何发送表单数据（form-data）（表单数据会被发送到在 action 属性中规定的页面中）。

表单数据可被作为 URL 变量的形式来发送（method=“get”）或者作为 HTTP post 事务的形式来发送（method=“post”）。

• 关于 GET 的注释：

  将表单数据以名称/值对的形式附加到 URL 中
  URL 的长度是有限的（大约 3000 字符）
  绝不要使用 GET 来发送敏感数据！（在 URL 中是可见的）
  对于用户希望加入书签的表单提交很有用
  GET 更适用于非安全数据，比如在 Google 中查询字符串

• 关于 POST 的注释：

  将表单数据附加到 HTTP 请求的 body 内（数据不显示在 URL 中）
  没有长度限制
  通过 POST 提交的表单不能加入书签
  语法:

<form method="get|post"> 

常用值:

• get 默认。将表单数据（form-data）以名称/值对的形式附加到 URL 中：URL?name=value&name=value。
• post 以 HTTP post 事务的形式发送表单数据（form-data）。

name

定义和用法: name 属性规定表单的名称。name 属性用于在 JavaScript 中引用元素，或者在表单提交之后引用表单数据。
语法:

<form name="text">

常用值:
text 规定表单的名称。

novalidate

定义和用法: novalidate 属性是一个布尔属性。
novalidate 属性规定当提交表单时不对表单数据（输入）进行验证。
语法: < form novalidate ="novalidate ">
常用值:

• novalidate 如果使用该属性，则提交表单时不进行验证。

target

定义和用法: target 属性规定一个名称或一个关键词，指示在何处打开 action URL，即在何处显示提交表单后接收到的响应。target 属性定义浏览器上下文（比如选项卡、窗口或内联框架）的名称或关键词。
语法:

<form target="_blank|_self|_parent|_top|framename">

常用值:

• _blank 在新窗口/选项卡中打开。

• _self 同一框架中打开。（默认）

• _parent 父框架中打开。

• _top 整个窗口中打开。

• framename 在指定的 iframe 中打开。

HTML 表单输入元素

多数情况下被用到的表单标签是输入标签（）。输入类型是由类型属性（type）定义的。
大多数经常被用到的输入类型如下：

文本域（Text Fields）

文本域通过< input type=“text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
    <span>First name:<span>
    <input type="text" name="firstname"><br>
    <span>Last name:<span/>
    <input type="text" name="lastname">
</form>

显示效果如下:

表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

密码字段

密码字段通过标签< input type=“password”> 来定义:

<form>

<span>Password:<span/>
<input type="password" name="pwd">

</form>

显示效果如下:

注意:密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮（Radio Buttons）

< input type=“radio”> 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male"><span>Male<span/><br>
<input type="radio" name="sex" value="female"><span>Female<span/>
</form>

显示效果如下:

复选框（Checkboxes）

< input type=“checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike"><span>I have a bike<span/><br>
<input type="checkbox" name="vehicle" value="Car"><span>I have a car<span/>
</form>

显示效果如下:

提交按钮(Submit Button)

< input type=“submit”> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">
<span>Username:<span/>
<input type="text" name="user">
<input type="submit" value="Submit">
</form>

fieldset标签

< fieldset> 标签可以将表单内的相关元素分组。
< fieldset> 标签会在相关表单元素周围绘制边框。

实例如下

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>

效果如下

标签

标签作为计算结果输出显示(比如执行脚本的输出)。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

效果如下

form表单

表单在Web网页中用以让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给Web服务器端的程序以处理，从而使得Web服务器与用户之间具有交互功能。
表单实现前后台交互：用户将表单提交到后台再右后台提交到数据库的过程，实现前后端交互。
表单在网页中主要负责数据采集功能，它用< form >标签定义。用户输入的信息都要包含在form标签中，点击提交后，< form >和</ form >里面包含的数据将被提交到服务器或者电子邮件里。
所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。

form表单简介

表单是由窗体和控件组成的,一个表单一般应该包含用户填 写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。
表单标签的格式:
< form action＝"url" method=get|post name=“myform” >< /form >

• name：表单提交时的名称
• action：提交到的地址
• method：提交方式，默认为get
  post和get区别：

1. 数据提交方式，get把提交的数据url可以看到，post看不到
2. get一般用于提交少量数据，post用来提交大量数据
3. get最多提交2kb数据，post理论上没有限制
4. get提交的数据在浏览器历史记录中，安全性不好

一个完整的表单包含三个基本组成部分

• 表单标签
  是指< form >标签本身,它是一个包含表单元素的区域,使用< form >< /form >定义
• 表单域
  是< form >标签中用来收集用户输入的每一项,通常用input标签来定义,input标签有不同的类型,用以对用用户不同的数据(比如:文本域、下拉列表、单选框、复选框等等）
• 表单按钮
  用来提交< form >表单中所有信息到服务器
  *表单域和表单按钮都属于表单元素

form表单属性

form支持HTML的全局属性

accept

已弃用

accept-charset

定义和用法: accept-charset 属性规定服务器用哪种字符集处理表单数据。
语法:

<form accept-charset="value" >

常用值:

• UTF-8 - Unicode 字符编码
• ISO-8859-1 - 拉丁字母表的字符编码
• gb2312 - 简体中文字符集
  服务器可处理的一个或多个字符集。如需规定一个以上的字符集，请使用逗号来分隔各字符集。
  理论上讲，可使用任何字符编码，但没有浏览器可以理解所有的编码。字符编码使用得越广泛，浏览器对其支持越好。

action

定义和用法: 必需的 action 属性规定当提交表单时，向何处发送表单数据。
语法:

<form action="value">

常用值:

• 绝对 URL - 指向其他站点（比如 src=“www.example.com/example.htm”）
• 相对 URL - 指向站点内的文件（比如 src=“example.htm”

autocomplete

定义和用法: autocomplete 属性规定表单是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。autocomplete 属性适用于 < form>，以及下面的 < input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。
语法:

<form autocomplete="on|off">

常用值:

• on 默认。规定启用自动完成功能。
• off 规定禁用自动完成功能。

enctype

定义和用法: enctype 属性规定在将表单数据发送到服务器之前如何对其进行编码。( 只有 method=“post” 时才使用 enctype 属性。 )
语法:

<form enctype="value"> 

常用值:

• application/x-www-form-urlencoded 默认。在发送前对所有字符进行编码（将空格转换为 “+” 符号，特殊字符转换为 ASCII HEX 值,窗体数据被编码为名称/值对。这是标准的编码格式。 。
• multipart/form-data 不对字符编码。当使用有文件上传控件的表单时，该值是必需的,窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。
• text/plain 将空格转换为 “+” 符号，但不编码特殊字符,窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。

method

定义和用法: method 方法规定如何发送表单数据（form-data）（表单数据会被发送到在 action 属性中规定的页面中）。

表单数据可被作为 URL 变量的形式来发送（method=“get”）或者作为 HTTP post 事务的形式来发送（method=“post”）。

• 关于 GET 的注释：

  将表单数据以名称/值对的形式附加到 URL 中
  URL 的长度是有限的（大约 3000 字符）
  绝不要使用 GET 来发送敏感数据！（在 URL 中是可见的）
  对于用户希望加入书签的表单提交很有用
  GET 更适用于非安全数据，比如在 Google 中查询字符串

• 关于 POST 的注释：

  将表单数据附加到 HTTP 请求的 body 内（数据不显示在 URL 中）
  没有长度限制
  通过 POST 提交的表单不能加入书签
  语法:

<form method="get|post"> 

常用值:

• get 默认。将表单数据（form-data）以名称/值对的形式附加到 URL 中：URL?name=value&name=value。
• post 以 HTTP post 事务的形式发送表单数据（form-data）。

name

定义和用法: name 属性规定表单的名称。name 属性用于在 JavaScript 中引用元素，或者在表单提交之后引用表单数据。
语法:

<form name="text">

常用值:
text 规定表单的名称。

novalidate

定义和用法: novalidate 属性是一个布尔属性。
novalidate 属性规定当提交表单时不对表单数据（输入）进行验证。
语法: < form novalidate ="novalidate ">
常用值:

• novalidate 如果使用该属性，则提交表单时不进行验证。

target

定义和用法: target 属性规定一个名称或一个关键词，指示在何处打开 action URL，即在何处显示提交表单后接收到的响应。target 属性定义浏览器上下文（比如选项卡、窗口或内联框架）的名称或关键词。
语法:

<form target="_blank|_self|_parent|_top|framename">

常用值:

• _blank 在新窗口/选项卡中打开。

• _self 同一框架中打开。（默认）

• _parent 父框架中打开。

• _top 整个窗口中打开。

• framename 在指定的 iframe 中打开。

HTML 表单输入元素

多数情况下被用到的表单标签是输入标签（）。输入类型是由类型属性（type）定义的。
大多数经常被用到的输入类型如下：

文本域（Text Fields）

文本域通过< input type=“text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
    <span>First name:<span>
    <input type="text" name="firstname"><br>
    <span>Last name:<span/>
    <input type="text" name="lastname">
</form>

显示效果如下:

表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

密码字段

密码字段通过标签< input type=“password”> 来定义:

<form>

<span>Password:<span/>
<input type="password" name="pwd">

</form>

显示效果如下:

注意:密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮（Radio Buttons）

< input type=“radio”> 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male"><span>Male<span/><br>
<input type="radio" name="sex" value="female"><span>Female<span/>
</form>

显示效果如下:

复选框（Checkboxes）

< input type=“checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike"><span>I have a bike<span/><br>
<input type="checkbox" name="vehicle" value="Car"><span>I have a car<span/>
</form>

显示效果如下:

提交按钮(Submit Button)

< input type=“submit”> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">
<span>Username:<span/>
<input type="text" name="user">
<input type="submit" value="Submit">
</form>

fieldset标签

< fieldset> 标签可以将表单内的相关元素分组。
< fieldset> 标签会在相关表单元素周围绘制边框。

实例如下

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>

效果如下

标签

标签作为计算结果输出显示(比如执行脚本的输出)。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

效果如下

antd3怎么用都很熟了。
但是antd4表单组件换了很多新东西，而且还是用hook或者ts去实现的。感觉看了一下文档脑子都乱了，因此整理一下记在这里。

会有一些关于3.x版本和4.x版本的Form使用对比。
把很多原本的函数实现，Form.create生成的表单实例东西都给放进了组件属性里。
这意味着啥呢。。
你再也不用用getFieldDecorator去包裹form组件了，可以直接在formItem里对表单填写进行操作。

先看看antd里怎么写form的API吧
https://ant.design/components/form-cn/

被设置了 name 属性的 Form.Item 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管

1、最普通的用法

现在最普通的用法，不用Form.create()注入，也可以使用方便快捷的表单函数了，做简单的表单校验没有问题，一些快捷的表单使用比3.x版本的方便。
我尝试用Hook+typescript的方式写

import React, { useEffect, useState } from 'react';
import { Input, Form, Button } from 'antd';
import { ColumnProps } from 'antd/es/table';

interface iformProps {
  /** 回调函数，传回form表单填写的text数据 */
  onSubmit: (value: string) => void;
}

export default function FormFC(props: iformProps): JSX.Element {
  return (
    <>
      <Form
        name="basic"
        /** 默认初始数据全部在Form里注入了，不用包装函数 */
        initialValues={{ text: '初始数据' }}
        /** 提交校验也不在button的onClick里，onFinish是成功的回调，onFinishFailed是失败的回调，注意Button要写在Form里，并且htmlType="submit" */
        onFinish={(value) => console.log(value)}
        onFinishFailed={(value) => console.log(value)}
        /** 不用提交，每一次数据变化都把值返回上层组件 */
        onFieldsChange={(changedFields, allFields) => console.log('onFieldsChange', changedFields, allFields)}
        onValuesChange={(changedFields, allFields) => console.log('onValuesChange', changedFields, allFields)}
        style={{ display: 'flex' }}
      >
        <Form.Item
          /** 以前写在包装函数里的东西全部作为formItem的属性了 */
          label="要做的事情"
          name="text"
          rules={[{ required: true, message: '今天你要做的事还没写' }]}
          style={{ flex: 1, paddingRight: '10px' }}
        >
          <Input />
        </Form.Item>
        {/* <Button htmlType="submit">提交</Button> */}
      </Form>
    </>
  );
}

但是这样使用有几个问题：
1、如果button不放在Form里面，怎么提交表单呢？（不过放在Form里，可以用FormItem包裹button进行布局）
目前我的研究是：如果button不放在Form里以及htmlType没有设置"submit"，就不能点击提交表单，调用封装在组件里的验证函数。（但是3.x版本注入到props里是可以调用的，这又是一点不同）
如果非得要放在外面，还要调用submit函数，那只能获取Form的实例来用了，相当于底下的useForm或者ref获取。这样还不如直接用底下的方法二、方法三这样。

2、如果想要重置表单呢？
回答同上，只能调用form的实例来用。

3、如果作为一个类似于卡片的组件，不需要提交（不需要按钮），只需要把数据反馈给上层组件，有没有办法呢？
就使用上面例子中的onFieldsChange和 onValuesChange，普遍来说还是用onValuesChange吧，但是onValuesChange不携带表单是否错误的消息，只是单纯的表单域值返回。

但是我使用的时候发现一个情况，每一次onChange修改，调用1次onValuesChange函数，却调用了三次onFieldsChange函数。

antd文档解释如下：

2、Form.useForm()

官方推荐使用 Form.useForm 创建表单数据域进行控制。如果是在 class component 下，应该通过 ref 获取数据域。

hook的使用方法，会自动创建一个form实例。
const [form] = Form.useForm();
把form打印出来看到是一个object,打印出来如下：和官方给的一模一样

form实例拥有的API如下，几乎就是form.create()创建出来的实例一样

官方案例在这里：



useForm就普通用法就好，把它当成v3.x里的props.form就行，里面的函数会有一点不同，但只是在方法一的基础上改了一点点，看懂了方法一，使用useForm就会习惯了。

如果方便button还是放在< Form>里会方便一点，设置htmlType=‘submit’，之后Form记得设置onFinish就可以了。

如果button不放在表单里，就设置一下onClick，调用form.submit()或者form.validateFields()都可以，使用例子在下面。

消化之后的练习Demo心得：

import React, { useEffect, useState } from 'react';
import { Input, Form, Button } from 'antd';

export default function FormFC<T>(props: T): JSX.Element {
  /** 实例化Form */
  const [form] = Form.useForm();

  /** 表单里的onFinish */
  const onFinish = <T extends {}>(values: T): void => {
    console.log(values);
  };

  /** 表单里的onFinishFailed */
  const onFinishFailed = <T extends {}>(err: T): void => {
    console.log(err);
  };

  /** 点击提交按钮的submit，尝试不要把submit写在Form表单里的用法 */
  const onSubmit = (): void => {
    /** 调用这个提交，会自动调用onFinsh和onFinishFailed */
    // form.submit();

    /** 尝试使用validate，v3.x版本的都知道我为啥要调这个函数的。。。用习惯了
     * 但是v4.0这个函数返回的是一个promise,而且参数类型是NamePath(看官网，fieldNames 数组属性，用来自定义哪些字段需要校验收集)
     * 以下写法参照官方给出的教程。
     */
    form
      .validateFields()
      .then((values) => {
        /** 正确后的验证信息 */
        console.log(values);
      })
      .catch((errorInfo) => {
        /** 错误信息 */
        console.log(errorInfo);
      });
  };

  /**
   * 非箭头函数使用泛型
   * function test<T>(value: T): T{
   *   return value
   * }
   */
  const onReset = () => {
    form.resetFields();
  };

  const onFill = () => {
    form.setFieldsValue({
      text: '哈哈哈哈哈',
    });
  };
  return (
    <>
      <Form form={form} name="formFC" initialValues={{ text: '初始数据' }} onFinish={onFinish} onFinishFailed={onFinishFailed}>
        <Form.Item name="text" label="要做的事" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
      </Form>
      {/* 如果要用e，则onClick={(e: React.MouseEvent)=>onSubmit()} */}
      <Button onClick={onSubmit}>提交</Button>
      <Button onClick={onReset}>重置</Button>
      <Button onClick={onFill}>设置表单值</Button>
    </>
  );
}

3、在Component里使用

几乎和上面没啥区别吧。懒得再多写一个了。看官方例子就好。

------------------------------------------

------------------------------------------

思考一个问题：如果一个页面有两个表单呢，基本上还是会遇到这样的情况的，一个页面多个表单

测试一下v4.0有没有更好的校验办法，v3.0这个问题可真是有点头疼。
就用上面的例子，再多加一个表单。

按钮在Form组件外的时候，点击提交onSubmit，输出的form实例包含了整个页面的表单数据。

把button挪到表单里面，效果同样，输出了整个页面的表单数据。

看来这点还是和3.0版本略像啊。。。一直没搞懂Form的name属性是拿来干嘛的。
提供几点解决办法：
1、把两个表单放在两个函数组件里，然后创建form实例，单独校验，就没事了。

2、比如某个表单显示，某个表单隐藏的情况，肯定有一个visible字段判断是那个表单在用是吧，那就把FormItem的校验规则rule里面的required选项设置成动态的。比如required:visible。

3、使用校验validate函数里传入namePath，判断校验哪个字段，对于字段不多的表单还是挺好用的。

4、听说可以用ref来创建一个组件里的不同form实例。（实验后表示不行，一个组件里也许只能有一个实例。

——————————————————

知道name 有啥用了。在Form.Provider里可以根据name判断当前提交表单。
Form.Provider：提供表单间联动功能，其下设置 name 的 Form 更新时，会自动触发对应事件。








怎么在Form.Provider里对单独的某一个表单提交？
试了试。。。。感觉弄不好就卡死了啊，还不知道为啥卡死了。
感觉不咋好用啊这个Provider。如果需要多表单校验，我估计可以搞一个useContext传form实例过去，这样大家都在一个实例里了，具体的如果遇到类似问题再说吧。