精华内容
下载资源
问答
  • form表单详解

    千次阅读 多人点赞 2020-07-06 16:02:56
    form表单详解form表单属性 表单在Web网页中用以让访问者输入数据,当提交表单时,表单中输入的数据被打包传递给Web服务器端的程序以处理,从而使得Web服务器与用户之间具有交互功能。 表单实现前后台交互:用户将...

    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的全局属性

    属性描述
    acceptMIME_typeHTML5 不支持。规定服务器接收到的文件的类型(文件是通过文件上传提交的)
    accept-charsetcharacter_set规定服务器可处理的表单数据字符集
    actionURL规定当提交表单时向何处发送表单数据
    autocompleteon / off规定是否启用表单的自动完成功能
    enctypeapplication / x-www-form-urlencoded
    multipart / form-data
    text / plain
    规定在向服务器发送表单数据之前如何对其进行编码(适用于 method=“post” 的情况)
    methodget / post规定用于发送表单数据的 HTTP 方法
    nametext规定表单的名称
    target_blank
    _self
    _parent
    _top
    规定在何处打开 action URL

    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> 标签会在相关表单元素周围绘制边框。

    属性描述
    disableddisabled规定该组中的相关表单元素应该被禁用。
    rmNewform_id规定 fieldset 所属的一个或多个表单。
    nametext规定 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表单-漂亮的form表单

    热门讨论 2011-04-19 10:05:51
    漂亮的form表单-漂亮的form表单-漂亮的form表单
  • form表单的属性

    千次阅读 2019-11-21 17:37:00
    form表单HTML标签、属性、属性值: (单行文本输入框) (密码输入框) (单选框) (多选框) (提交按钮) (重置按钮) 或者按钮(空按钮) (下拉框选) (多行文本框) (1) 是表单的标签,所有的需要写在...

    form表单HTML标签、属性、属性值:

    (单行文本输入框)
    

    (密码输入框)
    (单选框)
    (多选框)
    (提交按钮)
    (重置按钮)
    或者按钮(空按钮)

    (下拉框选)
      
    (多行文本框)
    

    (1) 是表单的标签,所有的需要写在form里面才能今
    进行提交;
    1:name=”” form中的name属性主要是对这个form进行标记;
    2:methood=”get/post” 其中 get/post 之间的区别:
    1. get是从服务器上获取数据,post是向服务器传送数据。
    2. get是把参数数据队列加到提交表单的ACTION属性所指的URL
    中,值和表单内各个字段一一对应,在URL中可以看到。post是通
    过HTTP post机制,将表单内各个字段与其内容放置在HTML
    HEADER内一起传送到ACTION属性所指的URL地址。用户看不到
    这个过程。
    3. 对于get方式,服务器端用Request.QueryString获取变量的值,
    对于post方式,服务器端用Request.Form获取提交的数据。
    4. get传送的数据量较小,不能大于2KB。post传送的数据量较大,
    一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中
    为100KB。
    5. get安全性非常低,post安全性较高。但是执行效率却比Post方法
    好。
    3: action=”” action=url用来指定处理提交表单的格式.它可以是一个
    URL地址(提交给程式)或一个电子邮件地址.
    4:enctype=cdata指明用来把表单提交给服务器时(当method值为”post”)
    的互联网媒体形式.这个特性的缺省值是”application/x-www-form-
    urlencoded”
    5:target=”“指定提交的结果文档显示的位置: _blank :在一个新的、
    无名浏览器窗口调入指定的文档; _self :在指向这个目标的元素的相同
    的框架中调入文档; _parent :把文档调入当前框的直接的 frameset
    框中;这个值在当前框没有父框时等价于_self; _top :把文档调入原来
    的最顶部的浏览器窗口中(因此取消所有其它框架);这个值等价于当前框
    没有你框时的_self.
    (2)type=”text”是定义表单里面的单行文本框;value=”“文本框里默认的文字;size=”“单行文本框的宽度;maxlength=”“单行文本框所能输入的字节;
    (3)type=”password” 定义密码框;
    (4)type=”radio” 单选勾选框;
    (5)type=”checkbox” 多选勾选框;
    (6)type=”submit” 提交按钮;
    (7)type=”reset” 重置按钮;
    (8)type=”button”或者 两种方式都可以实现空按钮;
    (9) 多行文本框,是一个双标签;
    (10)


    下拉菜单属性;

    form表单css3属性、属性值:

    1、表单字段集:

    功能:相当于一方框,在字段集中可以包含文本框包含其他元素,该元素
    用于对表单中元素进行分组,并在文档中区别出文本。fieldset元素可以嵌
    套,在其他内部可以再设置多个fieldset对象。
    2、字段集标题

    功能:legend元素可以再fieldset对象绘制的方框内插入一个标题。legend
    元素必须是fieldset内第一个元素。
    3、表单元素:
    (1)上传文件框
    文本域
    (2)图像域(图片按钮)

    form表单HTML5新增标签、属性、属性值:

    这里写图片描述
    1.email:专门用来输入email地址的文本框,如果该文本框中内容不是email地址格式的,则不允许提交。但它不检查email地址是否存在。提交时可以为空,除非加上了required属性。
    具有multiple属性,它允许在该文本框中输入一串以逗号分隔的email地址。
    这里写图片描述
    2.url:专门用来输入URL地址的文本框。如果该文本框中内容不是URL地址格式的,则不允许提交。
    例:http://www.baidu.com”>

    1. number 和 range
      number 类型是专门用来输入数字的,并且在提交时会检验是否为数字。number 类型有 max、min 和 step 属性。max 是允许的最大值,min 是允许的最小值,step 是间隔。设置了这些属性后,如果手动填入的数字不符合这些属性条件,将不能提交。 range 类型是一个数字滑动条。它与 number 类型功能类似,也有 max、min 和 step 属性,在 Opera 中,可以用左右方向键控制。range 类型自身没有一个明显的“数值”表示当前值,但可以使用 output 输出当前值。
      这里写图片描述
    2. datetime 和 datetime-local
      datetime 类型是用来输入 UTC 日期和时间的文本框,而 datetime-local 类型是用来输入本地日期和时间的。它们与 date 类型的区别是后面多了一个时间框和“UTC”。
      这里写图片描述
    3. month 和 weekmonth 类型是月份选择器,它的值为:年-月,如:2012-01;week 类型是周选择器,它的值为:年-W周数,如:2011-W02。
      这里写图片描述
    4. search
      search 类型的是用来输入搜索关键词的文本框,它与 text 类型在功能都没有太大区别,只在外观上有细微的区别。在 Chrome 10 和 Safari 5 中,当用户输入内容时,输入框右侧会有一个“×”按钮,单击该按钮,将清空输入框内的内容,使用非常方便。
      这里写图片描述
      7.color
      color 类型用来选取颜色,它提供了一个颜色选取器,值为 16 进制符号,如:#ff0000。目前只在 Opera 和 Blackberry 浏览器中支持。
      这里写图片描述
      8.output元素: 定义不同类型的输出,如计算结果的输出,或脚本的输出。
      注:必须从属于某个表单。即,必须将它书写在表单内部,或对它添加form属性。
      0
      100+
      =


      这里写图片描述

    ML 5 不但新增加了表单元素、表单类型,还增加了一些表单属性,同时使用的话,能更好的提高率开发者的工作效率,同时也提高了用户的操作体验。
    1、自动验证
    1)、required
    可以应用在大多数输入元素上,在提交时如果元素内容为空白,则不允许提交,同时显示提示文字。
    2)、pattern
    将属性值设为某个格式的正则表达式,在提交时会检查其内容是否符合给定格式。
    例:

    (3)placeholder属性:文本框处于未输入状态时文本框中显示的输入提示。

    (4)autofocus属性:给文本框、选择框、或者按钮控件加上该属性,当打开页面时,该控件自动获得国标焦点,一个页面只能有一个。

    (5) autocomplete 属性规定输入字段是否应该启用自动完成功能。属性值=on/off
    自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。
    注释:autocomplete 属性适用于 ,以及下面的 类型:text, search, url, telephone, email, password, datepickers, range 以及 color。
    提示:在某些浏览器中,您可能需要手动启用自动完成功能。

    HTML5增加了大量在提交时对表单及表单元素内容有效性验证的功能

    1、自动验证
    3)、 min、max、step:为包含数字或日期的 input 类型规定限定(约束)
    max: 最大值
    min: 最小值
    step: 数字间隔
    例:
    2、取消验证
    可以对form表单添加novalidate属性,即使form表单中的input添加了required,也将不进行验证

    附:适用form表单的UI状态伪类选择器
    这里写图片描述

    展开全文
  • antd4使用form表单

    千次阅读 2020-11-06 14:01:53
    antd3怎么用都很熟了。 但是antd4表单组件换了很多新东西,而且还是...你再也不用用getFieldDecorator去包裹form组件了,可以直接在formItem里对表单填写进行操作。 先看看antd里怎么写form的API吧 https://ant.design/

    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实例过去,这样大家都在一个实例里了,具体的如果遇到类似问题再说吧。
    在这里插入图片描述

    展开全文
  • form表单的普通文本和文件上传

    千次阅读 2020-01-16 15:36:50
    注:form表单里面加上参数 enctype=“multipart/form-data”。js的作用是添加选择文件标签,删除选择文件标签。 图示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script language=...

    一、文件的上传和下载原理

    1、文件上传的原理分析

    1.1文件上传的必要前提
    a、提供form表单,method必须是post
    b、form表单的enctype必须是multipart/form-data
    c、提供input type="file"类的上传输入域

    1.2enctype属性
    作用:告知服务器请求正文的MIME类型。(请求消息头:Content-Type作用是一致的)可选值:

    1、application/x-www-form-urlencoded(默认):
    正文:name=admin&password=123
    服务器获取数据:String name = request.getParameter(“name”);
    2、multipart/form-data:
    正文:
    在这里插入图片描述
    服务器获取数据:request.getParameter(String)方法获取指定的表单字段字符内容,但文件上传表单已经不在是字符内容,而是字节内容,所以失效。

    2、借助第三方的上传组件实现文件上传

    2.1 fileupload概述
    fileupload是由apache的commons组件提供的上传组件。它最主要的工作就是帮我们解析request.getInputStream()。
    导入commons-fileupload相关jar包
    1、commons-fileupload.jar,核心包;
    2、commons-io.jar,依赖包。

    2.2 fileupload的核心类有:
    DiskFileItemFactory、ServletFileUpload、FileItem。

    a、解析原理
    在这里插入图片描述
    2.3 fileupload简单应用

    使用fileupload组件的步骤如下:
    1.创建工厂类DiskFileItemFactory对象:
    DiskFileItemFactory factory = new DiskFileItemFactory()
    2.使用工厂创建解析器对象:
    ServletFileUpload fileUpload = new ServletFileUpload(factory)
    3.使用解析器来解析request对象:
    List list = fileUpload.parseRequest(request)

    FileItem对象对应一个表单项(表单字段)。可以是文件字段或普通字段。
    1、boolean isFormField():判断当前表单字段是否为普通文本字段,如果返回false,说明是文件字段;
    2、String getFieldName():获取字段名称,例如:,返回的是username;
    3、String getString():获取字段的内容,如果是文件字段,那么获取的是文件内容,当然上传的文件必须是文本文件;
    4、String getName():获取文件字段的文件名称;(a.txt)
    5、String getContentType():获取上传的文件的MIME类型,例如:text/plain。
    6、int getSize():获取上传文件的大小;
    7、InputStream getInputStream():获取上传文件对应的输入流;
    8、void write(File):把上传的文件保存到指定文件中。
    9、delete();

    二、代码

    1、页面代码。

    注:form表单里面加上参数 enctype=“multipart/form-data”。js的作用是添加选择文件按钮,删除选择文件按钮。

    图示:

    在这里插入图片描述

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script language="JavaScript" type="text/javascript">
            var webtype=".$webType";
            var merchantUrl="";
            var contextPath="${contextPath}";
    
            function addFile() {
                var div1 = document.getElementById("div1");
                div1.innerHTML +="<div>\n" +
                        "                    <input type=\"file\" name=\"demandDoc\"/><input type=\"button\" value=\"删除\" οnclick=\"delFile(this)\"/>\n" +
                        "                </div>"
            }
            function delFile(input) {
                input.parentNode.parentNode.removeChild(input.parentNode);
            }
        </script>
    </head>
    
    <body>
    <form id="form" name="form" action="${contextPath}/DemandFileInfoServlet" method="post" enctype="multipart/form-data">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="showlist">
            <tbody>
            <div>
                <input type="hidden" name="employeeId" id="employeeId" value="$!employeeId"/>
                标题:<input type="text" name="title" id="title"  value="$!demand.title"/><br/><br/>
                描述:<textarea name="des" value="$!demand.des" id="des" rows="10" cols="50"></textarea>
            </div><br/>
            <div id="div1">
                添加附件:
                <div>
                    <input type="file" name="demandDoc"/><input type="button" value="添加" οnclick="addFile()"/><br>
                </div>
            </div>
            </tbody>
        </table>
    </form>
    </body>
    </html>
    

    2、java代码

    @WebServlet(urlPatterns = "/DemandFileInfoServlet")
    public class DemandFileInfoServlet extends HttpServlet {
        @Autowired
        private DemandService demandService;
        @Autowired
        private SerialGeneratorMgr serialGeneratorMgr;
        @Autowired
        private DemandRecordService demandRecordService;
        @Autowired
        private DemandRecordAccessoryService demandRecordAccessoryService;
    
        HashMap<String, Object> result = new HashMap<>();
        Demand demand = new Demand();
    
        String demandRecordId;
        private static final Logger logger = LoggerFactory.getLogger(DemandFileInfoServlet2.class);
    
    
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            resp.getWriter().print("suc");
        }
    
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            String isUpLoadComplete = "suc";
            if (demandService == null) {
                demandService = SpringContextLoaderListener.getSpringWebApplicationContext().getBean(DemandService.class);
            }
            //判断是否可以上传文件格式
            boolean isMultipartContent = ServletFileUpload.isMultipartContent(req);
            if (!isMultipartContent) {
                throw new TimeCardServiceException("your form is not multipart/form-data");
            }
            //创建一个DiskFileItemfactory工厂类
            DiskFileItemFactory factory = new DiskFileItemFactory();
            //创建一个ServletFileUpload
            ServletFileUpload sfu = new ServletFileUpload(factory);
            //解析一个request对象,并得到一个表单的集合
            List<FileItem> fileItems = null;
            try {
                fileItems = sfu.parseRequest(req);
                for (FileItem fileItem : fileItems) {
                    if (fileItem.isFormField()) {
                        //普通表单项
                        processFromField(fileItem);
                    } else {
                        //上传表单项
                        processUplodField(fileItem);
                    }
                }
                Date date = new Date();
                SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
                String putDate = sdf.format(date);
                demand.setPutDate(putDate);
                demand.setUpdateTime(putDate);
                demand.setStatus("0");
                if (serialGeneratorMgr == null) {
                    serialGeneratorMgr = SpringContextLoaderListener.getSpringWebApplicationContext().getBean(SerialGeneratorMgr.class);
                }
                String demandId = serialGeneratorMgr.getSerialKey(Constants.DEMAND_SERIAL);  //自动生成Id
                demand.setId(demandId);
                demandService.insertSelective(demand);
                //向需求修改明细表中插入数据
                DemandRecord demandRecord = new DemandRecord();
                demandRecord.setId(demandRecordId);
                demandRecord.setDemandId(demandId);
                demandRecord.setSuffixStatus("0");
                demandRecord.setDes(demand.getDes());
                demandRecord.setUpdateTime(putDate);
                demandRecord.setUpdateEmployeeId(demand.getEmployeeId());
                if (demandRecordService == null) {
                    demandRecordService = SpringContextLoaderListener.getSpringWebApplicationContext().getBean(DemandRecordService.class);
                }
                demandRecordService.insertSelective(demandRecord);
                demandRecordId = null;
    
            } catch (Exception e) {
                isUpLoadComplete = "fail";
                logger.error("{}", e);
            } finally {
                req.getSession().setAttribute("upLopublishassessmentadComplated", isUpLoadComplete);
                resp.getWriter().print("<script>parent.location.href = \"demand/demand_list.jhtml\"</script>");
            }
        }
    
    
        //上传表单
        private void processUplodField(FileItem fileItem) {
            String fileName = fileItem.getName();  //文件项的值  a.txt
            fileName = UUID.randomUUID() + "_" + fileName;
            try {
                logger.info("开始上传文件........");
                System.out.println("开始上传文件........");
                //获得文件输入流
                InputStream is = fileItem.getInputStream();
                //获取文件存储路径
                SysParamsDAO sysParamsDAO = SpringContextLoaderListener.getSpringWebApplicationContext().getBean(SysParamsDAO.class);
    //            SysParams sysParams = sysParamsDAO.selectByPrimaryKey("FilePathForDemand");
                SysParams sysParams = sysParamsDAO.selectByPrimaryKey("FilePath");
                String storeDirectory = sysParams.getValue();          //   storeDirectory:/opt/timecard/demandForAttachment
                //如果不存在"/opt/timecard/demandForAttachment"路径,则创建这个路径
                File file2 = new File(storeDirectory);
                if (!file2.isDirectory() && !file2.exists()) {
                    file2.mkdir();     //创建单层目录
                }
                //在storeDirectory下,创建完整的文件目录
                File file = new File(storeDirectory, fileName);
                String allDirectory = storeDirectory + "/" + fileName;
    
                DemandRecordAccessory demandRecordAccessory = new DemandRecordAccessory();
                if (serialGeneratorMgr == null) {
                    serialGeneratorMgr = SpringContextLoaderListener.getSpringWebApplicationContext().getBean(SerialGeneratorMgr.class);
                }
                if (StringUtils.isBlank(demandRecordId)) {
                    demandRecordId = serialGeneratorMgr.getSerialKey(Constants.DEMAND_RECORD_SERIAL);
                }
                demandRecordAccessory.setDemandRecordId(demandRecordId);
                demandRecordAccessory.setAccessory(allDirectory);
                if (demandRecordAccessoryService == null) {
                    demandRecordAccessoryService = SpringContextLoaderListener.getSpringWebApplicationContext().getBean(DemandRecordAccessoryService.class);
                }
                demandRecordAccessoryService.insertSelective(demandRecordAccessory);
                //通过文件输出流将上传的文件保存到磁盘
                FileOutputStream fos = new FileOutputStream(file);
                int len = 0;
                byte[] b = new byte[1024];
                while ((len = is.read(b)) != -1) {
                    fos.write(b, 0, len);
                }
                fos.close();
                is.close();
                logger.info("上传文件完成........");
                System.out.println("上传文件完成........");
            } catch (Exception e) {
                logger.error("{}", e);
                e.printStackTrace();
            }
        }
    
    
        //普通表单
        private void processFromField(FileItem fileItem) throws UnsupportedEncodingException {
            String fieldName = fileItem.getFieldName();                  //字段名
            String fieldValue = fileItem.getString("UTF-8");    //字段值
            if ("employeeId".equals(fieldName)) {
                demand.setEmployeeId(fieldValue);
            }
            if ("title".equals(fieldName)) {
                demand.setTitle(fieldValue);
            }
            if ("des".equals(fieldName)) {
                demand.setDes(fieldValue);
            }
        }
    
    
    }
    
    展开全文
  • 以下是本人总结处来的一些form的提交方式,网上还有别的提交方式,这里我总结了大小分为7类,其实就是三类的提交方式,若有哪里不对的,还请评论指出来,大家一起学习学习 1、无任何验证提交(最普通的提交) 该方式...
  • uni-app.02.提交form表单的两种方式

    千次阅读 2021-03-17 21:48:40
    uni-app提交form表单的两种方式uni-app提交form表单的两种方式form表单元素较少form表单元素较多前端代码举例:后端java代码举例 uni-app提交form表单的两种方式 form表单元素较少 比如用户登录,如下图 此时html...
  • form表单提交的几种方式

    万次阅读 多人点赞 2019-06-04 09:41:03
    表单提交方式一:直接利用form表单提交 html页面代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Insert title here</title> </head> &...
  • form表单

    千次阅读 2021-09-02 15:05:03
    form表单详解form表单form表单简介form表单属性acceptaccept-charsetactionautocompleteenctypemethodnamenovalidatetargetHTML 表单输入元素文本域(Text Fields)密码字段单选按钮(Radio Buttons)复选框...
  • vue实现动态添加form表单

    千次阅读 2020-08-25 15:36:52
    上篇博客介绍了如何动态实现table的新增表格,其实对于表格和表单的动态添加在日常场景中用到的还蛮多的,两者的实现都有着诸多相似之处,本篇博客小编带领大家揭开实现动态增加form表单的神秘面纱。 图示最终效果:...
  • form表单文件上传

    万次阅读 2019-04-25 10:33:00
    form表单文件上传 form表单文件上传的ajax方法与文本上传有一些不一样 首先form表单的enctype属性写为**“multipart/form-data”** 默认是application/x-www-form-urlencoded <form class="layui-form" id=...
  • 一个好看的Form表单源码

    热门讨论 2011-10-14 17:07:42
    一个html5+CSS3的Form表单资源
  • 在上一篇《vue elementUI组件表单动态验证失效的问题与解决办法》中,讲到直接修改prop属性,未触发form-item的重新渲染,所以虽然有校验*的标志,实际上并不会校验。这是表面现象,最近有了空余时间,去看看了...
  • // 自动,动态创建 form表单 function getUrl(URL, PARAMS) { var temp = document.createElement(&quot;form&quot;); temp.action = URL; temp.method = &quot;post&quot;; temp.style....
  • Form表单验证

    千次阅读 2019-10-03 17:12:16
    Form表单提交前js验证 1. Onclick() 2. Onsubmit() Button标签input (属性submit button )标签 Input type=button 定义按钮,没有任何行为。多数情况下,用于通过javascript启动脚本 Input type=submit定义提交...
  • form表单,表单提交,formid

    千次阅读 2018-12-29 17:23:13
    1.在使用提交表单时,尽量使用form表单,提交时有event参数,好多参数都可通过event.detail.value(此时,表单的各个元素需要添加name属性,否则这里会打印不到)来获取,比较方便,而且可以减少页面变量的使用,...
  • form表单的提交

    万次阅读 2019-04-03 19:57:35
    开发工具与关键技术:MVC JQuery 的 form表单的提交 作者:沈金凤 年级:18级(5)班 撰写日期:2019年4月2日 一、Form表单有两个属性分别是:“action”和“method”: Action: 的值是URL 就是当提交表单时向...
  • HTML中Form表单的使用

    万次阅读 多人点赞 2019-06-20 15:16:26
    1、form表单标记 表单标记以<form>标记开头,以</form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。 <form>标记的基本语法如下: <form action="url" method="get | ...
  • layui:form表单提交

    千次阅读 2021-02-26 16:21:37
    <form class="layui-form" action="" id="login_form" lay-filter="login_form"> <div class="layui-form-item"> <label class="layui-form-label">手机号 <i cl...
  • 40多款漂亮的form表单设计

    热门讨论 2010-05-26 22:14:35
    介绍40多个漂亮的网页表单例子以及现代的解决方案和与网页表单设计有关的创造性思维.其中有一些是flash的;尽管如此,在大多数情况下,你能很容易的使用简单的css和(x)html来创建相同的设计.
  • flask form表单

    千次阅读 2019-07-04 19:40:14
    flask没有集成的ORM模型,所以要安装第三方form表单的扩展包,当然不使用第三方的也可以。第三方包的功能更多。 一、安装扩展 pip install flask-wtf 二、创建一个form表单类 from flask_wtf import FlaskForm from...
  • form标签中添加Action(提交的地址)和method(post),且有一个submit按钮()就可以进行数据的提交,每一个input标签都需要有一个name属性,才能进行提交。 1、input[type=submit] input[type]默认值为text 设置...
  • ElementUI的form表单验证事件

    千次阅读 2018-08-06 13:52:53
    html:注意1:代码中的:model顾名思义是我们双向绑定的数据,而ref=”user1”,我们可以把form表单看成是一个类,那么这个类的对象名字就是我们用ref指定的名字,这个名字会在js中调用elementUI的原生态方法中用到,...
  • form表单的提交以及触发方式

    千次阅读 2018-10-22 17:31:31
    小程序里面有form表单组件,提交表单通过button提交,在form标签里添加bindsubmit事件,然后在button标签里面添加触发bindsubmit事件的属性:form-type=“submit”,就可以将表单提交到服务器了,需要注意的是button...
  • form表单字段默认值

    千次阅读 2019-10-17 14:06:39
    form表单中input的text类型字段如果不填值的话,默认值为空串,即“”; 我现在的需求是:让不填的字段值为 null。 实现方式:将这个字段的disabled设为true。原理是设置了这个属性提交的表单中就不会有这个字段了。...
  • vue项目中动态生成form表单

    万次阅读 2019-06-28 15:02:52
    在项目中经常遇到动态生成表单的需求,这次打算记录下来。在我的这次项目(vue+element)中,有这样一个需求。类似于 (a || b && c) || ((a || b) && c) && (a || b) 这样的表达式,动态生成...
  • Flutter Form表单

    千次阅读 2019-05-27 17:00:31
    Flutter中的Form是一个容器,里面包含一个或多个TextFormField。TextFormField是表单中使用的Input输入框。 TextFormField的属性基本与TextField相同。 属性 作用 onSaved 监听输入变化 代码示例...
  • form表单提交数据到后台的方式

    千次阅读 2019-10-27 13:09:46
    form表单提交方式 1.无刷新页面提交表单 表单可实现无刷新页面提交,无需页面跳转,如下,通过一个隐藏的iframe实现,form表单的target设置为iframe的name名称,form提交目标位当前页面iframe则不会刷新页面 ...
  • Element组件之Form表单

    万次阅读 2019-03-01 11:08:13
    这里主要介绍Element组件中的Form表单,它是由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。 典型表单:在 Form 组件中,每一个表单域由一个 Form-Item 组件构成,表单域中可以放置各种...
  • form表单的回调

    千次阅读 2019-02-16 12:07:23
    背景:平时使用的form表单只能单方向提交,不能进行和ajax类似的回调,在这种背景下给大家介绍一下这种新的方法实现form表单的回调 用到的js脚本   应用:提交文件到服务器(form表单最简单),同时进行回调。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 488,196
精华内容 195,278
关键字:

form表单