form 订阅
FORM,在VB编程中,Form对象是窗口、或者对话框,它组成应用程序用户界面的一部分。 展开全文
FORM,在VB编程中,Form对象是窗口、或者对话框,它组成应用程序用户界面的一部分。
信息
属    于
组成应用程序用户界面的一部分
环    境
VB编程
外文名
FORM
对    象
窗口、或者对话框
FORM基本信息
VB中的FormVB(MicrosoftVisual Basic)中的主窗体FormForm 对象、Forms 集合Forms集合是一个集合,它的元素代表每一个在应用程序中加载的窗体。集合包括应用程序的 MDI窗体,MDI 子窗体和非 MDI 窗体。Forms集合只有一个属性Count,指定集合中元素的数目。语法FormForms(index)index所在处是一个整数,变化范围从 0 到 Forms.Count - 1。说明在应用程序中可以使用 Forms 集合在所有装载的窗体之间迭代。它标识一个命名为 Forms 的内在全局变量。可以把 Forms(index) 传给函数,指定其参数为 Forms 类。窗体有一些属性确定了它们的外观,例如位置、大小、颜色;这些属性还确定了它们的行为,例如是否可调整大小。窗体还可以对用户初始化或系统触发的事件作出反应。例如,可以在窗体的 Click 事件过程中编写代码,从而通过单击窗体改变窗体的颜色。除了属性和事件外,还可以通过代码,使用方法来操作窗体。例如,可以使用 Move 方法改变窗体的位置和大小。一种称作 MDI窗体的特殊窗体还包含 MDI 子窗体。MDI窗体由“插入”菜单的“添加 MDI 窗体”命令产生;在“文件”菜单中选择“新建窗体”,然后将 MDIChild 属性设置成 True,这样就创建了 MDI 子窗体。在代码中使用 Dim、Set 和 Static 语句里的 New关键字可以创建多个窗体实例。在设计窗体时,设置 BorderStyle 属性定义窗体的边框,设置 Caption 属性把文本放入标题栏。可以在代码中使用 Hide 和 Show 方法使窗体在运行时可见或不可见。注意将 BorderStyle 设置为 0 就会删除边框。如果希望窗体有边框而没有标题栏、控制菜单框、最大化按钮和最小化按钮,则应从窗体 Caption 属性中删除任何文本,同时将窗体的 ControlBox、MaxButton 和 MinButton 属性设置为 False。Form是 Object数据类型。在将变量设置成一种窗体的实例之前,可以先声明变量的类型为Form,并在设计时声明这种窗体的实例。与此相似,可以把参数以Form类型传给过程。窗体还可以作为 DDE 对话中的资源,通过 Label、PictureBox 或者 TextBox 控件提供数据。可以使用 Controls 集合访问 Form 中的控件集合。例如,可以使用如下代码隐藏 Form 中的控件:For Each Control in Form1.ControlsControl.Visible = FalseNext Control<以上资料参考自微软MSDN>VB自带的Form“关于” 对话框.frmODBC 登录.frm Web 浏览器.frm登录对话框.frm对话框.frm日积月累.frm选项对话框.frm展现屏幕.frm
收起全文
精华内容
下载资源
问答
  • 2019-08-16 11:23:34

    FormControl和FormGroup是Angular中两个最基础的表单对象。

    1. FormControl

    FormControl代表单一的输入字段,它是Angular表单中的最小单元。

    FormControl封装了这些字段的值和状态,比如是否有效、是否脏(被修改过)或是否有错
    误等。

    比如,下列代码演示了如何在TypeScript中使用FormControl:

    // create a new FormControl with the value "Nate" 
    let nameControl = new FormControl("Nate"); 
    
    let name = nameControl.value; // -> Nate 
    
    // now we can query this control for certain values: 
    nameControl.errors // -> StringMap<string, any> of errors 
    nameControl.dirty  // -> false 
    nameControl.valid  // -> true 
    // etc.
    

    为了构建表单,我们会创建几组FormControl对象,然后为它们附加元数据和逻辑。

    在Angular中,我们经常将一个类(本例中为FormControl)以属性形式(本例中为formControl)附加在DOM上。比如下面这个表单:

    <!-- part of some bigger form --> 
    <input type="text" [formControl]="name" /> 
    

    这会在此form的上下文中创建一个新的FormControl对象。

    2. FormGroup

    大多数表单都拥有不止一个字段,因此我们需要某种方式来管理多个FormControl。假设我们要检查表单的有效性。如果要遍历这个FormControl数组并检查每一个FormControl是否有效,必然相当繁琐;而FormGroup则可以为一组FormControl提供总包接口(wrapper interface),来解决这种问题。

    下面是FormGroup的创建方式:

    let personInfo = new FormGroup({ 
        firstName: new FormControl("Nate"), 
        lastName: new FormControl("Murray"), 
        zip: new FormControl("90210") 
    }) 
    

    FormGroup 和 FormControl 都继承自同一个祖先AbstractControl。这意味检查 personInfo 的状态或值就像检查单个FormControl那么容易:

    //   firstName: "Nate", 
    //   lastName: "Murray", 
    //   zip: "90210" 
    // } 
    
    // now we can query this control group for certain values, which have sensible 
    // values depending on the children FormControl's values: 
    personInfo.errors // -> StringMap<string, any> of errors 
    personInfo.dirty  // -> false 
    personInfo.valid  // -> true 
    // etc. 
    

    注意,当我们试图从FormGroup中获取value时,会收到一个“键值对”结构的对象。它能让我们从表单中一次性获取全部的值而无需逐一遍历FormControl,使用起来相当顺手。

    3. 创建表单

    我们要构建一个表单,效果如图:


    带SKU的表单演示:简易版

    3.1 加载 FormsModule

    为了使用这个新的表单库,先要确保我们的NgModule中导入了这个表单库。

    Angular中有两种使用表单的方式,我们在本章中都会展开讨论:使用FormsModule以及使用ReactiveFormsModule。既然都要用到,那么这个模块就同时导入它们。因此需要在引用启动程序app.ts中这样写:

    import { 
      FormsModule, 
      ReactiveFormsModule 
    } from '@angular/forms'; 
    
    // farther down... 
    
    @NgModule({ 
      declarations: [ 
        FormsDemoApp, 
        DemoFormSku, 
        // ... our declarations here 
      ], 
      imports: [ 
        BrowserModule, 
        FormsModule,         // <-- add this 
        ReactiveFormsModule  // <-- and this 
      ], 
      bootstrap: [ FormsDemoApp ] 
    }) 
    class FormsDemoAppModule {}
    

    这确保了我们能在视图中使用Angular表单指令。

    FormsModule为我们提供了一些模板驱动的指令,例如:

    • ngModel
    • NgForm
      ReactiveFormsModule则提供了下列指令:
    • formControl
    • ngFormGroup

    3.2 简易SKU 表单:template

    template: ` 
      <div class="ui raised segment"> 
        <h2 class="ui header">Demo Form: Sku</h2> 
        <form #f="ngForm" 
         (ngSubmit)="onSubmit(f.value)" 
         class="ui form"> 
    
          <div class="field"> 
           <label for="skuInput">SKU</label> 
           <input type="text" 
             id="skuInput" 
             placeholder="SKU" 
             name="sku" ngModel> 
          </div> 
    
          <button type="submit" class="ui button">Submit</button> 
        </form> 
      </div> 
      ` 
    
    3.2.1. form和NgForm

    我们导入了FormsModule,因此可以在视图中使用NgForm了。记住,当这些指令在视图中可用时,它就会被附加到任何能匹配其selector的节点上。

    NgForm做了一件便利但隐晦的工作:它的选择器包含form 标签(而不用显式添加ngForm属性)。这意味着当我们导入FormsModule时候,NgForm就会被自动附加到视图中所有的<form>标签上。这确实非常有用,但由于它发生在幕后,也许会让很多人感到困惑。

    NgForm给我们提供了两个重要的功能:

    (1) 一个名叫ngForm的FormGroup对象;
    (2) 一个输出事件(ngSubmit)。

    我们在视图的<form>标签中同时用到了它们两个。

     <form #f="ngForm" 
       (ngSubmit)="onSubmit(f.value)" 
    

    首先,我们使用了#f="ngForm"。#v=thing 语法的意思是,我们希望在当前视图中创建一个局部变量。

    这里我们为视图中的ngForm创建了一个别名,并绑定到变量#f。这个ngForm来自哪里呢?它是由NgForm指令导出的。

    ngForm是什么类型的对象呢?它是FormGroup类型的。这意味着我们可以在视图中把变量 f 当作FormGroup使用,而这也正是我们在输出事件(ngSubmit)中的使用方法。

    我们在表单中绑定ngSubmit事件的语法是:(ngSubmit)="onSubmit(f.value)"。

    • (ngSubmit):来自NgForm指令。
    • onSubmit():将会在我们的组件类中进行定义(稍后)。
    • f.value:f就是我们前面提到的FormGroup,而.value会以键值对的形式返回FormGroup中所有控件的值。

    总结起来,这行代码的意思是:“当我提交表单时,将会以该表单的值作为参数,调用组件实例上的onSubmit方法。”

    3.2.2. input和NgModel
    <input type="text" 
     id="skuInput" 
     placeholder="SKU" 
     name="sku" ngModel> 
    

    NgModel指令指定的selector是ngModel。这意味着我们可以通过添加这个属性把它附加到
    input标签上:ngModel="whatever"。在这里我们指定了一个不带属性值的ngModel。

    有两种不同的方法能在模板中指定ngModel,这里是第一种。当使用不带属性值的ngModel 时,我们是要指定:
    (1) 单向数据绑定;
    (2) 希望在表单中创建一个名为sku的FormControl(这个sku来自input标签上的name属性)。

    NgModel会创建一个新的FormControl对象,把它自动添加到父FormGroup上(这里也就是form表单对象),并把这个FormControl对象绑定到一个DOM上。也就是说,它会在视图中的input标签和FormControl对象之间建立关联。这种关联是通过name属性建立的,在本例中是"sku"。

    注意:

    1. NgModel,指的是类和供代码中引用的对象。
    2. ngModel,来自指令的选择器 selector,并且只会被用在DOM/模板中。

    NgModel和FormControl并不是同一个,NgModel是用在视图中的指令, 而FormControl则用来表示表单中的数据和验证规则。

    3.3. 简易 SKU 表单:组件定义类

    import { Component } from '@angular/core'; 
    
    @Component({ 
      selector: 'demo-form-sku', 
    
      template: ` 
      <div class="ui raised segment"> 
        <h2 class="ui header">Demo Form: Sku</h2> 
        <form #f="ngForm" 
           (ngSubmit)="onSubmit(f.value)" 
           class="ui form"> 
    
          <div class="field"> 
           <label for="skuInput">SKU</label> 
           <input type="text" 
             id="skuInput" 
             placeholder="SKU" 
             name="sku" ngModel> 
          </div> 
    
          <button type="submit" class="ui button">Submit</button> 
        </form> 
      </div> 
      ` 
    })
    
    export class DemoFormSku { 
      onSubmit(form: any): void { 
        console.log('you submitted value:', form); 
      } 
    } 
    

    4. 使用 FormBuilder

    FormBuilder是一个名副其实的表单构建助手。你应该还记得,表单是由FormControl和FormGroup构成的,而FormBuilder则可以帮助我们创建它们(你可以把它看作一个“工厂”对象)。

    让我们在先前的例子中添加一个FormBuilder,看看:

    • 如何在组件定义类中使用FormGroup;
    • 如何在视图表单中使用自定义的FormGroup。

    我们将使用formGroup和formControl指令来构建这个组件,这意味着我们需要导入相应的类。

    import { 
      FormBuilder, 
      FormGroup 
    } from '@angular/forms'; 
    

    4.1. 使用 FormBuilder

    通过在组件类上声明带参数的constructor,我们注入了一个FormBuilder。

    export class DemoFormSkuBuilder { 
      myForm: FormGroup; 
    
      constructor(fb: FormBuilder) { 
        this.myForm = fb.group({ 
          'sku': ['ABC123'] 
        }); 
      } 
    
      onSubmit(value: string): void { 
        console.log('you submitted value: ', value); 
      } 
    } 
    

    Angular将会注入一个从FormBuilder类创建的对象实例,并把它赋值给fb变量(来自构造函数)。

    我们将会使用FormBuilder中的两个主要函数:

    • control,用于创建一个新的FormControl;
    • group,用于创建一个新的FormGroup。

    myForm是FormGroup类型。我们通过调用fb.group()来创建FormGroup。.group方法的参数是代表组内各个FormControl的键值对。

    在这里,我们设置了一个名为sku的控件,其值为["ABC123"]——意思是控件的默认值为"ABC123"。

    我们需要将它绑定到表单元素上。

    4.2 在视图中使用myForm

    我们希望修改<form>标签,让它使用myForm变量。回忆一下,在上一节中我们提到过,当导入FormsModule时,ngForm就会自动起作用。还提到过ngForm会自动创建它自己的FormGroup。但在这里我们不希望使用外部的FormGroup,而是使用FormBuilder创建的这个myForm实例变量。那该怎么做呢?

    Angular提供了另一个指令,能让我们使用现有的FormGroup。它叫作formGroup,可以这样使用。

    <h2 class="ui header">Demo Form: Sku with Builder</h2>
    <form [formGroup]="myForm" 
    

    这里我们告诉Angular,想用myForm作为这个表单的FormGroup。

    注意:
    当使用FormsModule时,NgForm会自动应用于<form>元素上。但其实有一个例外:NgForm不会应用到带formGroup属性的<form>节点上。

    你也许不明白原因,这是因为NgForm的selector是:

    form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]

    这意味着你还可以使用 ngNoForm 属性产生一个不带NgForm的<form>表单。

    将FormControl绑定到input标签上。记住,ngModel会创建一个新的FormControl对象,并附加到父FormGroup中。但在这个例子中,我们已经用FormBuilder创建了自己的FormControl。
    要将现有的FormControl绑定到input上,可以用 formControl

    <label for="skuInput">SKU</label> 
    <input type="text" 
       id="skuInput" 
       placeholder="SKU" 
       [formControl]="myForm.controls['sku']">
    

    我 们 将 input标 签 上 的 formControl指 令 指 向 了 myForm.controls上 现 有 的FormControl控件sku。

    完整代码

    import { Component } from '@angular/core'; 
    import { 
      FormBuilder, 
      FormGroup 
    } from '@angular/forms'; 
    @Component({ 
      selector: 'demo-form-sku-builder', 
      template: ` 
      <div class="ui raised segment"> 
        <h2 class="ui header">Demo Form: Sku with Builder</h2> 
        <form [formGroup]="myForm" 
             (ngSubmit)="onSubmit(myForm.value)" 
             class="ui form"> 
    
          <div class="field"> 
           <label for="skuInput">SKU</label> 
           <input type="text" 
              id="skuInput" 
              placeholder="SKU" 
             [formControl]="myForm.controls['sku']"> 
          </div> 
    
        <button type="submit" class="ui button">Submit</button> 
        </form> 
      </div> 
      ` 
    }) 
    export class DemoFormSkuBuilder { 
      myForm: FormGroup; 
      constructor(fb: FormBuilder) { 
        this.myForm = fb.group({ 
          'sku': ['ABC123'] 
        }); 
      } 
    
      onSubmit(value: string): void { 
        console.log('you submitted value: ', value); 
      } 
    } 
    
    需要记住以下两点。
    1. 如果想隐式创建新的FormGroup和FormControl,使用:
    • ngForm
    • ngModel
    1. 如果要绑定一个现有的FormGroup和FormControl,使用:
    • formGroup
    • formControl

    5. 添加验证

    想使用验证器,我们得做两件事:
    (1) 为FormControl对象指定一个验证器;
    (2) 在视图中检查验证器的状态,并据此采取行动。

    要 为 FormControl对 象 分 配 一 个 验 证 器 , 我 们 可 以 直 接 把 它 作 为 第 二 个 参 数 传 给FormControl的构造函数。

    let control = new FormControl('sku', Validators.required);
    

    像这个例子中一样通过如下语法使用FormBuilder:

      constructor(fb: FormBuilder) { 
        this.myForm = fb.group({ 
          'sku': ['', Validators.required] 
        }); 
        this.sku = this.myForm.controls['sku']; 
      } 
    

    6. 监听变化

    到目前为止,我们只在提交表单时才调用onSubmit方法来获取表单的值。但我们也要经常监听控件的变化。

    FormGroup和FormControl都带有EventEmitter(事件发射器),我们可以通过它来观察变化。

    想监听控件的变化,我们要:
    (1) 通过调用control.valueChanges访问到这个EventEmitter;
    (2) 然后使用.subscribe方法添加一个监听器。

    下面是一个例子。

    constructor(fb: FormBuilder) { 
        this.myForm = fb.group({ 
          'sku': ['', Validators.required] 
        }); 
    
        this.sku = this.myForm.controls['sku']; 
    
        this.sku.valueChanges.subscribe( 
          (value: string) => { 
             console.log('sku changed to:', value); 
          } 
        ); 
    
        this.myForm.valueChanges.subscribe( 
          (form: any) => { 
             console.log('form changed to:', form); 
          } 
        ); 
    
      } 
    

    在这里我们监听了两个事件:sku字段的变化和整个表单的变化。

    我们传递了一个带有next键的对象(也可以传递其他键,但目前还不用关心它们)。next就是我们希望当值发生变化时被调用的函数。

    如果在输入框中输入kj,就会在控制台中看到:

    sku changed to:  k 
    form changed to:  Object {sku: "k"} 
    sku changed to:  kj 
    form changed to:  Object {sku: "kj"} 
    

    如你所见,每一次按键都会触发控件的变化,我们的可观察对象也会被触发。监听单个FormControl时,我们会得到一个值(例如kj);而监听整个表单时,我们会得到一个包含键值对的对象(例如{sku: "kj"})。

    7. ngModel

    ngModel是一个特殊的指令,它将模型绑定到表单中。ngModel的特殊之处在于它实现了 双向绑定
    相对于单向绑定来说,双向绑定更加复杂和难以推断。Angular通常的数据流向是单向的:自顶向下。但对于表单来说,双向绑定有时会更容易。

    下面对表单稍作修改:我们希望能输入产品名称productName。这次要用ngModel来保持组件实例和视图的同步。

    我们的组件定义类如下所示。

    export class DemoFormNgModel { 
      myForm: FormGroup; 
      productName: string; 
    
      constructor(fb: FormBuilder) { 
        this.myForm = fb.group({ 
    'productName': ['', Validators.required] 
        }); 
      } 
    
      onSubmit(value: string): void { 
        console.log('you submitted value: ', value); 
      } 
    } 
    

    注意,我们只是简单地将productName: string存成了实例变量。
    紧接着,我们在input标签上使用ngModel。

    <label for="productNameInput">Product Name</label> 
    <input type="text" 
           id="productNameInput" 
           placeholder="Product Name" 
           [formControl]="myForm.get('productName')" 
           [(ngModel)]="productName"> 
    

    注意,这里ngModel的语法很有意思:我们在ngModel属性上同时使用了()和[]。我们既使用了表示输入属性(@Input)的方括号[],又使用了表示输出属性(@Output)的圆括号(),这就是双向绑定的标志

    另 外 还 需 要 注 意 的 是 : 我 们 仍 然 用 formControl指 定 此 input应 该 绑 定 到 表 单 上 的FormControl。这是因为ngModel只负责将input绑定到对象实例上,但FormControl的功能是与此独立的。由于我们还需要对这个值加以验证并把它作为表单的一部分提交上去,仍要保留formControl指令。

    更多相关内容
  • form表单

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

    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>
    

    效果如下
    在这里插入图片描述

    展开全文
  • 最新jquery form 下载

    热门讨论 2014-09-15 10:54:01
    最新ajax form表单提交无刷新js,之前的js会有一些小BUG,这个不会,本人亲自测过,欢迎大家下载!
  • jquery-form.js 源码

    万次下载 热门讨论 2014-04-16 17:37:50
    异步提交表单和上传文件jquery-form.js
  • 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>
    

    效果如下
    在这里插入图片描述

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

    展开全文
  • ElementUI组件——Form表单

    千次阅读 2020-06-25 06:33:54
    Form表单典型表单行内表单对齐方式表单验证自定义校验规则动态增减表单项数字类型验证表单内组件尺寸控制Form AttributesForm MethodsForm-Item AtrributesForm-Item SlotForm-Item Methods 官方原文地址:Form表单 ...
  • jquery.form.min.js

    热门讨论 2014-12-31 11:18:06
    jqueryForm ajaxForm 无刷新提交form
  • antd Form.list嵌套Form.list

    千次阅读 2021-08-24 19:09:55
    import { Form, Input, Button, Space, Select } from 'antd'; import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'; const { Option } = Select; const areas = [ { label: 'Beijing', ...
  • Element el-form 表单详解

    千次阅读 2021-10-15 15:27:06
    本文目录1. 前言2. 基本用法3. 行内表单4. 标签对齐方式5. 调整尺寸6....1. 前言 表单是使用频率非常高的组件了,HTML默认提供的表单是没...el-form ref="form" label-width="80px" style="border:1px solid #C4E1C5;padd
  • Element源码系列——Form以及Form-item组件

    万次阅读 多人点赞 2018-08-02 13:56:06
    Element源码系列——FormForm-item组件 Element源码系列——FormForm-item组件 序言 控件组成 数据收集 校验数据 提交数据 总结 序言 Element团队将组件主要分为Basic、Form、Data、Notice、...
  • 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表单组件,则推荐使用此方案) <template> <div class="login-container"> <div class="loginFrom-container"> <a-form :form="form" @submit="handleSubmit"> <a-form-item> ['username', rules...
  • 比如 const [form] = Form.useForm();这句就没有成功过。。。 错误原因 React Hook "Form.useForm" cannot be called at the top level. React Hooks must be called in a React function component or
  • Ant Design框架下在使用Form.useForm()获取数据域出现如下错误: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the ...
  • 33.form标签中的GET和POST提交方式

    万次阅读 多人点赞 2021-09-05 10:36:26
    form标签中的GET和POST 在HTML中,form表单的作用是收集标签中的内容,<form>...</form> 中间可以由访问者添加类似于文本,选择,或者一些控制模块等等.然后这些内容将会被送到服务端。 一个表单必须指定两...
  • 文章目录前言1.Form表单的定义2.Form表单的属性一、Form表单1.Form表单基础使用2.使用内置behaviors2.1 wx://form-field2.2 wx://form-field-group2.3 wx://form-field-button 前言 1.Form表单的定义 表单在网页中...
  • jquery.form.js和使用说明

    热门讨论 2012-10-11 14:41:38
    文件压缩包里有jquery.form.js和使用说明文档 jquery表单验证插件_jquery.form.js
  • antd快速开发(Form篇)

    千次阅读 2019-10-18 08:08:00
    作者 | 王三少前言由于一直在做中台业务,后台项目特别多,但是后台项目的特点是:大量的列表和大量表单,重复开发会降低效率,所以我这边总结了一下使用antd组件搭建form...
  • form表单的属性

    千次阅读 2019-11-21 17:37:00
    form表单HTML标签、属性、属性值: (单行文本输入框) ...(单选框) (多选框) (提交按钮) (重置按钮) 或者按钮(空按钮) ... 1:name=”” form中的name属性主要是对这个form进行标记; 2:m...
  • form表单提交的几种方式

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

    千次阅读 2020-08-24 09:12:31
    el-form :model="addJsonForm" ref="addJsonForm" :rules="addJsonForm.addJsonRules" :inline="true" label-width="108px" > <el-table :data="addJsonForm.params" style="width: 10
  • SAP SCRIPTFORM 操作手册

    万次阅读 2018-07-05 17:22:31
    SAPscript 用途:SAP SCRIPT常用来打印需要输出到纸张的报表、凭证。 SAP SCRIPT 使用页、窗口、段落格式和文本来控制输出。文本存在于窗口之中,每个... 创建SAPscript(form) 2. SAPscript 组件分为表头、页...
  • 通过ajax提交form表单数据的几种方式

    万次阅读 2020-01-11 18:39:13
    一、FormData方法 作用: 模拟HTML表单,相当于将HTML表单... 异步上传二进制文件 使用 在原生ajax中的使用 ...form id="form"> <input type="text" name="username" /> <input type="password" ...
  • 以下是本人总结处来的一些form的提交方式,网上还有别的提交方式,这里我总结了大小分为7类,其实就是三类的提交方式,若有哪里不对的,还请评论指出来,大家一起学习学习 1、无任何验证提交(最普通的提交) 该方式...
  • vue实现动态添加form表单

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

    万次阅读 多人点赞 2019-08-28 00:03:10
    文章目录基本结构添加校验自己写校验方法其他校验 基本结构 ...el-form ref="form" :model="form"> <el-table ref="table" :data="form.tableData" empty-text='暂无数据'> <el-ta...
  • Flutter:表单Form

    千次阅读 2019-05-13 13:31:03
    正式向服务器提交数据前,都会对...所以,Flutter提供了一个Form widget,可以对输入框进行分组,然后进行一些统一的操作。 Form: Form继承自StatefulWidget对象,它对应的状态类为FormState。 其定义: Form(...
  • 在 react 中 由于没有数据双向绑定,在 使用表单的时候,就需要自己一个一个的绑定,获取值的时候,也去要一个一个的去状态里面拿值,想在点击提交按钮 把表单中的所以=有数据获取到,一般都是 使用 antd 中的 Form ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,813,742
精华内容 725,496
关键字:

form

友情链接: JDBC.zip