精华内容
下载资源
问答
  • 2019-07-30 19:57:57

    form属性

    action:后台接口地址。
    method:用来提交表单的http方法
    get方法:参数传递较少,参数拼接在url后面,通过?来分割
    post方法 参数传递较多 参数保存在请求体中 较为安全
    enctype编码格式

    表单组件

    input:属性type,name,value,checked,disabled
    type的值 text:单行文本框
    password:密码框。输入的内容将被遮挡
    checkbox:复选框 必须使用value属性来描述该组件所提交的值,使用checked属性默认选中。
    radio:单选按钮,必须使用value属性来描述该组件所提交的值,使用checkbox属性默认选中。一个单选按钮组中所有组件都应该具有相同的name值,这样每次之只能选中的按钮组中的某一个组件
    submit:提交按钮
    select组件 与option一般公用
    lable组件用于表示某一表单组件的标题,for与为设定标题的表单组件的id值一致

    更多相关内容
  • 主要用于C#开发,方便、快捷、效率高
  • Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,下面通过本文给大家详细介绍Android实现Ant Design 自定义表单组件,需要的的朋友参考下吧
  • 微信小程序常用表单组件

    千次阅读 多人点赞 2022-03-16 23:43:01
    微信小程序常用表单组件1、常用表单组件1.1 button1.2 checkbox1.3 input1.4 label1.5 form1.6 radio1.7 slider1.8 switch1.9 textarea2、实训小案例--问卷调查 1、常用表单组件 1.1 button   <button>为...

    1、常用表单组件

    1.1 button

      <button>为按钮组件,是常用的表单组件之一,用于事件的触发以及表单的提交。其属性表如下所示。

    image-20220316230043016

    代码示例:

    <view class="demo-box">
      <view class="title">7.button小案例</view>
      <view class="title">(1)迷你按钮</view>
      <button size="mini" type="primary">主要按钮</button>
      <button size="mini" type="default">次要按钮</button>
      <button size="mini" type="warn">警告按钮</button>
      <view class="title">(2)按钮状态</view>
      <button>普通按钮</button>
      <button disabled>警用按钮</button>
      <button loading>加载按钮</button>
      <view class="title">(3)增加按钮事件</view>
      <button bindgetuserinfo="getUserDetail" open-type="getUserInfo">点我获取用户信息</button>
    </view>
    

    image-20220316230647877

    1.2 checkbox

      <checkbox>为复选框组件,常用于在表单中进行多项数据的选择。复选框的<checkbox-group>为父控件,其内部嵌套若干个<checkbox>子控件。

      <checkbox-group>属性如下:

    image-20220316230921345

      <checkbox>组件的属性如下:

    image-20220316230938489

    代码示例:

    checkbox.wxml

    <view class="demo-box">
      <view class="title">8.checkbox小案例</view>
      <view class="title">利用for循环批量生成</view>
      <checkbox-group bindchange="checkboxChange">
        <label wx:for="{{items}}">
          <checkbox value="{{item.name}}" checked="{{item.checked}}" />{{item.value}}
        </label>
      </checkbox-group>
    </view>
    

    checkbox.js

    Page({
      data: {
        items: [
          { name: "tiger", value: "老虎" },
          { name: "elephant", value: "大象" },
          { name: "lion", value: "狮子", checked: "true" },
          { name: "penguin", value: "企鹅" },
          { name: "elk", value: "麋鹿" },
          { name: "swan", value: "天鹅" },
        ]
      },
      checkboxChange:function(e) {
        console.log("checkbox发生change事件,携带value值为:", e.detail.value)
      }
    })
    

    image-20220316231231567

    1.3 input

      <input>为输入框组件,常用于文本(如姓名、年龄等信息)的输入。属性表如下:

    image-20220316231356590

    <view class="demo-box">
      <view class="title">9.input小案例</view>
      <view class="title">(1)文字输入框</view>
      <input type="text" maxlength="10" placeholder="这里最多只能输入10个字" />
      <view class="title">(2)密码输入框</view>
      <input type="password" placeholder="请输入密码"/>
      <view class="title">(3)禁用输入框</view>
      <input disabled placeholder="该输入框已经被禁用"/>
      <view class="title">(4)为输入框增加事件监听</view>
      <input bindinput="getInput" bindblur="getBlur" placeholder="这里输入的内容将会被监听"/>
    </view>
    

    image-20220316231738656

    1.4 label

      <label>是标签组件,不会呈现任何效果,但是可以用来改进表单组件的可用性。当用户在label元素内点击文本时,就会触发此控件,即当用户选择该标签时,事件会传递到和标签相关的表单控件上,可以使用for属性绑定id,也可以将空间放在该标签内部,该组件对应属性如下所示。

    image-20220316231948513

    wxml

    <view class="demo-box">
      <view class="title">10.lable小案例</view>
      <view class="title">(1)利用for属性</view>
      <checkbox-group>
        <checkbox id="tiger" checked />
        <label for="tiger">老虎</label>
        <checkbox id="elephant" />
        <label for="elephant">大象</label>
        <checkbox id="lion" />
        <label for="lion">狮子</label>
      </checkbox-group>
      <view class="title">(2)label包裹组件</view>
      <checkbox-group>
        <label>
          <checkbox checked />老虎
        </label>
        <label>
          <checkbox/>大象
        </label>
        <label>
          <checkbox/>狮子
        </label>
      </checkbox-group>
    </view>
    

    1.5 form

      <form>为表单控件组件,用于提交表单组件中的内容。<form>控件组件内部可以嵌套多种组件。

      组件属性如下:

    image-20220316232327454

    form.wxml

    <view class="demo-box">
      <view class="title">11.form小案例</view>
      <view class="title">模拟注册功能</view>
      <form bindsubmit="onSubmit" bindreset="onReset">
        <text>用户名:</text>
        <input name="username" type="text" placeholder="请输入你的用户名"></input>
        <text>密码:</text>
        <input name="password" type="password" placeholder="请输入你的密码"></input>
        <text>手机号:</text>
        <input name="phonenumber" type="password" placeholder="请输入你的手机号"></input>
        <text>验证码:</text>
        <input name="code" type="password" placeholder="请输入验证码"></input>
        <button form-type="submit">注册</button>
        <button form-type="reset">重置</button>
      </form>
    </view>
    

    form.js

    Page({
      onSubmit(e) {
        console.log("form发生了submit事件,携带数据为:")
        console.log(e.detail.value)
      },
      onReset() {
        console.log("form发生了reset事件,表单已被重置")
      }
    })
    

      输入测试数据后点击注册按钮触发表单提交事件。

    image-20220316232522849

    1.6 radio

      <radio>为单选框组件,往往需配合<radio-group>组件来使用,<radio>标签嵌套在<radio-group>当中。

      <radio-group>组件属性如下:

    image-20220316232712336

      <radio>组件属性如下:

    image-20220316232729258

    radio.wxml

    <view class="demo-box">
      <view class="title">14.radio小案例</view>
      <view class="title">利用for循环批量生成</view>
      <radio-group bindchange="radioChange">
        <block wx:for="{{radioItems}}">
          <radio value="{{item.name}}" checked="{{item.checked}}" />{{item.value}}
        </block>
      </radio-group>
    </view>
    

    radio.js

    Page({
      data: {
        radioItems: [
          { name: 'tiger', value: '老虎' },
          { name: 'elephant', value: '大象' },
          { name: 'lion', value: '狮子', checked: 'true' },
          { name: 'penguin', value: '企鹅' },
          { name: 'elk', value: '麋鹿' },
          { name: 'swan', value: '天鹅' },
        ]
      },
      radioChange:function(e) {
        console.log("radio发生change事件,携带value值为:", e.detail.value)
      }
    })
    

    image-20220316232846608

    1.7 slider

      <slider>为滑动选择器,用于可视化地动态改变某变量地取值。属性表如下:

    image-20220316232948144

    slider.wxml

    <view class="demo-box">
      <view class="title">15.slider小案例</view>
      <view class="title">(1)滑动条右侧显示当前进度值</view>
      <slider min="0" max="100" value="30" show-value />
      <view class="title">(2)自定义滑动条颜色与滑块样式</view>
      <slider min="0" max="100" value="30" block-size="20" block-color="gray" activeColor="skyblue" />
      <view class="title">(3)禁用滑动条</view>
      <slider disabled />
      <view class="title">(4)增加滑动条监听事件</view>
      <slider min="0" max="100" value="30" bindchange="sliderChange" />
    </view>
    

    image-20220316233102160

    1.8 switch

      <switch>为开关选择器,常用于表单上地开关功能,属性表如下所示。

    image-20220316233202175

    switch.wxml

    <view class="demo-box">
      <view class="title">16.switch小案例</view>
      <view class="title">增加switch事件监听</view>
      <switch checked bindchange="switch1Change"></switch>
      <switch bindchange="switch2Change"></switch>
    </view>
    

    image-20220316233254798

    1.9 textarea

      <textarea>为多行输入框,常用于多行文字的输入。

    2、实训小案例–问卷调查

    survey.wxml

    <view class="content">
      <form bindsubmit="onSubmit" bindreset="onReset">
        <view class="title">1.你现在大几?</view>
        <radio-group bindchange="universityChange">
          <radio value="大一"/>大一
          <radio value="大二"/>大二
          <radio value="大三"/>大三
          <radio value="大四"/>大四
        </radio-group>
    
        <view class="title">2.你使用手机最大的用途是什么?</view>
        <checkbox-group bindchange="mobilChange">
          <label><checkbox value="社交"/>社交</label>
          <label>
            <checkbox value="购物"/>网购</label>
          <label>
            <checkbox value="学习"/>学习</label><label>
            <checkbox value="其他"/>其他</label>
    
        </checkbox-group>
        <view class="title">3.平时每天使用手机多少小时?</view>
        <slider min="0" max="24" show-value bindchange="timechange" />
    
         <view class="title">4.你之前有使用过微信小程序吗?</view>
        <radio-group bindchange="programChange">
          <radio value=""/><radio value=""/></radio-group>
    
        <view class="title">5.谈谈你对微信小程序未来发展的看法</view>
        <textarea auto-height placeholder="请输入你的看法" name="textarea" />
        <button size="mini" form-type="submit">提交</button>
        <button size="mini" form-type="reset">重置</button>
      </form>
    </view>
    

    survey.js

    Page({
      universityChange: function (e) {
        console.log("你选择的现在大几:", e.detail.value)
      },
    
      mobilChange: function (e) {
        console.log("你选择使用手机的最大用途是:", e.detail.value)
      },
    
    
      timechange: function (e) {
        console.log("你选择的每天使用手机的时间是:", e.detail.value + "小时")
      },
    
      programChange: function (e) {
        console.log("你选择的是否使用过微信小程序:", e.detail.value)
      },
     
     
      onSubmit(e) {
        console.log("你输入的对小程序发展前途的看法是:"+e.detail.value.textarea)
    
      },
      onReset() {
        console.log("表单已被重置")
      }
    })
    

    image-20220316233832751
    更多内容请参考微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html

    展开全文
  • 主要为大家详细介绍了vue复合组件实现注册表单功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了Vue element-ui父组件控制子组件表单校验操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 微信小程序(7):常用的表单组件

    千次阅读 2021-01-09 16:59:38
    文章目录一、button:按钮1、type:按钮的样式类型2、size:按钮的大小3、plain:按钮是否镂空,背景色透明4、disabled:是否禁用5、loading:名称前是否带 loading 图标6、form-type:用于 form 组件,点击分别会...

    一、button:按钮

    button 的属性有很多,比如以下几个:

    1、type:按钮的样式类型

    在这里插入图片描述

    <button type="primary">提交</button>
    <button type="default">提交</button>
    <button type="warn">提交</button>
    

    在这里插入图片描述

    2、size:按钮的大小

    在这里插入图片描述

    <button type="primary" size="mini">提交</button>
    <button type="default" size="mini">提交</button>
    <button type="warn" size="mini">提交</button>
    

    在这里插入图片描述

    3、plain:按钮是否镂空,背景色透明
    <button type="primary" plain>提交</button>
    <button type="default" plain>提交</button>
    <button type="warn" plain>提交</button>
    

    在这里插入图片描述

    4、disabled:是否禁用
    <button type="primary" disabled>提交</button>
    

    在这里插入图片描述

    5、loading:名称前是否带 loading 图标
    <button loading>数据加载中...</button>
    

    在这里插入图片描述

    6、form-type:用于 form 组件,点击分别会触发 form 组件的 submit/reset 事件

    在这里插入图片描述

    <form>
      <input></input>
      <input></input>
      <input></input>
      <button type="warn" form-type="reset">重置</button>
    </form>
    

    在这里插入图片描述

    7、open-type:微信开放能力

    在这里插入图片描述

    <button open-type="getUserInfo">获取权限</button>
    

    在这里插入图片描述

    8、hover-class:指定按钮按下去的样式类。当 hover-class=“none” 时,没有点击态效果

    二、checkbox:多选

    在这里插入图片描述

    <label>
      <checkbox/>小程序
    </label>
    
    <label>
      <checkbox></checkbox>小程序
    </label>
    

    在这里插入图片描述

    三、radio:单选

    在这里插入图片描述

    <label>
      <radio checked></radio>选中
      <radio></radio>未选中
    </label>
    

    在这里插入图片描述

    四、input:输入框

    1、placeholder:输入框为空时占位符
    placeholder-style:指定 placeholder 的样式
    placeholder-class:指定 placeholder 的样式类
    <input placeholder="请输入..."></input>
    
     input{
       border: 1px solid #ccc;
     }
    

    在这里插入图片描述

    <input placeholder="请输入..." placeholder-style="color:pink"></input>
    

    在这里插入图片描述

    2、type:input 的类型

    在这里插入图片描述
    例如为 number 时:

    <input placeholder="请输入..." type="number"></input>
    

    在这里插入图片描述

    3、cursor-spacing:指定光标与键盘的距离,取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
    <input placeholder="请输入..." type="number" cursor-spacing="100"></input>
    

    在这里插入图片描述

    4、confirm-typeconfirm-type:设置键盘右下角按钮的文字,仅在type='text’时生效

    在这里插入图片描述

    五、switch:开关选择器

    在这里插入图片描述

    <switch type="checkbox" checked></switch>选中
    <switch type="switch" checked></switch>
    <switch type="switch" color="pink"></switch>
    

    在这里插入图片描述

    展开全文
  • 表单常见的元素主要包括:文本输入框、下拉选择框、单选框、复选框、文本域、按钮等。接下来通过本文给大家介绍Bootstrap表单组件教程,感兴趣的朋友一起学习吧
  • 主要介绍了Vue form表单动态添加组件实战案例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了详解基于原生JS验证表单组件xy-form,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 基于layui的自定义表单组件
  • 主要介绍了vue动态绑定组件子父组件表单验证功能的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
  • 本篇文章主要介绍了利用Vue v-model实现一个自定义的表单组件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
  • 主要介绍了ElementUI多个子组件表单实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue 动态生成表单组件,可以根据数据配置表单,使用的UI库是。 问题或BUG欢迎提 表单组件 Input 输入框 Button 按钮 Radio 单选框 Checkbox 多选框 Icon 图标 Switch 开关 Select 选择器 Slider 滑块 DatePicker ...
  • laravel-admin框架form表的的一个自定义插件。主要功能:模拟grid表格,实现一个列表样式的form表单控件。修复form表单的with方法和default方法。
  • form表单组件说明:  表单,将组件内的用户输入的<switch> <input/> <checkbox> <slider> <radio>  提交。  当点击 <form/> 表单中 formType 为 submit 的<button/> 组件时,会将表单组件中...
  • 主要介绍了使用form-create动态生成vue自定义组件和嵌套表单组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 之前我们简单介绍了小程序的基础组件,接下来我们来说一下小程序的表单组件;说到表单组件就是用户需要填入一些表单数据,而哪里会用到这个表单组件呢?比如用户注册登录的是需要填入的用户名,密码什么的,就需要...

    之前我们简单介绍了小程序的基础组件,接下来我们来说一下小程序的表单组件;说到表单组件就是用户需要填入一些表单数据,而哪里会用到这个表单组件呢?比如用户注册登录的是需要填入的用户名,密码什么的,就需要用到小程序的表单组件。

    表单组件form开始form结束,一个表单组件里面可以包含的元素就很多了,这里简单列举一下:

    button:按钮

    checkbox:多选框

    checkbox-group:多项选择器,内部由多个checkbox组成。

    editor:富文本编辑器,可以对图片、文字进行编辑。

    form:表单。

    input:输入框。

    label:用来改进表单组件的可用性。

    picker:选择器,从底部弹出,比如日期选择器、地址选择器什么的。

    picker-view:嵌入 页面的滚动选择器。

    picker-view-column:滚动选择器的子项。

    radio:单选。

    radio-group:单项选择器,由多个radio组成。

    slider:滑动选择器。

    switch:开关按钮。

    textarea:多行输入框。

    更多表单组件详情,可以访问小程序表单组件官网

    说了这么多表单组件,我们简单介绍几个,更多的使用场景自己进行尝试~

    input

    input输入框也是有很多属性的,可以根据自己的业务需求进行选择,截图截不完,详情查看input表单组件官网

    在这里插入图片描述
    在使用属性的时候,要注意官网给出的取值空间。

    接下来通过简单的代码演示一下input组件的使用:

    1.首先我们在.wxml文件创建一个form组件,然后内部包含一个input组件,然后设定input的输入类型type,编写input提示内容,绑定input输入事件监听函数

    <text>小程序表单组件</text>
    <form style="margin-top:50rpx;">
    
      <view class="input_class_view">
    
        <!--
    
          type="text" 可以输入的文本类型  比如密码的时候就是password
          placeholder="请输入..." 文本框提示内容
          bindinput="inputFunction" 绑定文本框输入事件监听
    
        -->
        <input type="text" placeholder="请输入..." bindinput="inputFunction"></input>
    
      </view>
    
    </form>
    

    2.既然我们绑定是文本框输入事件监听的函数,那么我们就需要去到.js实现该函数,这里做简单的打印文本框内容

    inputFunction:function(edit){
      console.log(edit)
    },
    

    3.运行编写的代码,查看模拟器,可以看到请输入…这一区域就是我们的input元素了
    在这里插入图片描述
    4.随便输入一些值,然后查看控制台,可以看到我们在input里面输入了五个字符,然后控制台打印了五行数据
    在这里插入图片描述
    这里不是控制台的误操作,因为我们每输入一个字符,我们的inputFunction监听函数就会打印一个字符,这时候你点开控制台里面的数据,你会发现五条数据的value分别是 a as asd asdg asdgf这个样子的,看下面这张图就可以理解这个逻辑了。
    在这里插入图片描述
    5.那么我们既然可以看到控制台打印的数据了,我们怎么获取这个数据呢?首先我们先来分析一下控制台这个数据显示的数据层级,detail然后value,value是我们需要的值,怎么拿到这个值呢?前面我们在创建input输入事件监听函数的时候有传入一个值edit,这个值就是input的本身,需要通过edit去获取。

    6.我们先在data里面创建一个空的数据源inputStr

    data: {
      inputStr:""
    },
    

    7.在input事件监听函数里面获取input输入的值,通过setData的方式给data里面的数据源赋值。第五点的时候说到了,input输入的数据是在detail下面的value里面,我们就通过我们传入的值edit去进行获取

    data: {
      inputStr:""
    },
    inputFunction:function(edit){
      this.setData({
        inputStr : edit.detail.value
      })
    },
    

    8.通过双向绑定来展示一下获取到的值,在.wxml里面添加一个text元素:

    <text>显示输入框的值:{{inputStr}}</text>
    

    看结果:
    在这里插入图片描述
    这就是input的简单用法了,更多用法更多input元素属性自行查阅官网进行尝试~

    checkbox

    多选操作,这个就很好理解了,比如淘宝、京东的购物车,那里面就有权限多选操作,就要用到checkbox。

    我们也通过简单的代码来演示一下多选框;

    1.首先在data里面定义一个数据源,name多选框的名字、value多选框的值、checked是否默认选中:

    data: {
      chaeckBoxList:[{
        name:"多项选择框1",
        value:"多项选择框1",
        checked:true
      },{
        name:"多项选择框2",
        value:"多项选择框2",
        checked:false
      },{
        name:"多项选择框3",
        value:"多项选择框3",
        checked:false
      }]
    },
    

    2.回到.wxml文件,通过for循环把list里面的值取出来,并添加到checkbox里面去;这里注意checkbox一般都是被checkbox-group包裹起来的:

    <text>小程序表单组件</text>
    <form style="margin-top:50rpx;">
    
      <view class="checkbox_class_view">
    
        <checkbox-group bindchange="checkBoxChange">
    
          <label wx:for="{{chaeckBoxList}}" wx:for-item="checkItem">
    
            <checkbox value="{{checkItem.value}}" checked="{{checkItem.checked}}"></checkbox>{{checkItem.name}}
    
          </label>
    
        </checkbox-group>
    
    
      </view>
    
    </form>
    

    3.给checkbox-group添加监听方法bindchange=“checkBoxChange”,并在.js文件里面实现该方法,获取选中的value值并打印:

    checkBoxChange:function(views){
      console.log(views.detail.value)
    },
    

    4.运行模拟器,查看效果图,并进行选择/取消选择操作:
    在这里插入图片描述
    5.操作查看控制台结果:
    选择一个:
    在这里插入图片描述
    选择两个:
    在这里插入图片描述
    选择三个:
    在这里插入图片描述
    可以看到都获取到对应的checkbox的value并在控制台进行了输出。

    checkbox官网地址

    checkbox-grop官网地址

    radio

    单项选择框和多项选择框的用法就有点大同小异了,一般我们在那些情况下使用到单线选择框呢?比如用户注册选择性别肯定不可能男女都选,所以就要用到单项选择框了;这里也通过简单的代码进行演示一下。

    1.js文件定义数据源:

    data: {
      radioList:[{
        name:"单项选择框1",
        value:"单项选择框1",
        checked:false
      },{
        name:"单项选择框2",
        value:"单项选择框2",
        checked:false
      },{
        name:"单项选择框3",
        value:"单项选择框3",
        checked:false
        }]
    },
    

    2.通过for循环把数据源取出,并赋值到radio上面去,同样radio是被radio-group包裹起来的:

    <text>小程序表单组件</text>
    <form style="margin-top:50rpx;">
    
      <view class="checkbox_class_view">
    
        <radio-group bindchange="radioChange">
    
          <label wx:for="{{radioList}}" wx:for-item="radioItem">
            <radio value="{{radioItem.value}}" checked="{{radioItem.checked}}"></radio>{{radioItem.name}}
          </label>
    
        </radio-group>
    
    
      </view>
    
    </form>
    

    3.实现选择监听事件函数radioChange

    radioChange:function(e){
      console.log(e.detail.value)
    },
    

    4.操作查看控制台
    选择第一个:
    在这里插入图片描述
    选择第二个
    在这里插入图片描述

    选择第三个
    在这里插入图片描述
    可以很清楚的看到,每次选择一个的时候控制台都只会打印一条数据。

    radio官网地址

    radio-group官网地址

    textarea

    多行文本输入框,这个也好理解,就是输入框的升级版,可以输入多行字符,但是有几点是需要注意的。

    1.textarea有固定高度,我们在控制台可以看到,一个textarea有宽300px高150px的固定宽高
    在这里插入图片描述
    2.既然有了固定宽高,当我们输入的内容超出了固定高度怎么办呢?这里就需要在textarea里面添加一个属性,自动增高

    <textarea placeholder="输入文本内容" auto-height="true"></textarea>
    

    auto-height="true"根据内容自动增高

    这时候我们看控制台,可以看到高度那一行已经被加上删除线了,并且element.style 里面高度会显示成自适应的高度:
    在这里插入图片描述
    这就是textarea需要注意的地方,具体用法和输入框没有多大区别。

    更多的属性使用详情可以查看官方文档:textarea官网地址

    button

    其实按钮也很简单,无非就是响应事件,我们创建两个按钮来实现提交和重置表单的事件。

    1.wxml文件注册按钮:

    <button form-type="submit">提交</button>
    <button form-type="reset">重置表单</button>
    

    2.我们在提交的时候肯定要把表单里面的值给携带过去,不然就是提交了个寂寞,那我们怎么获取表单里面元素的值呢?首先我们要在表单元素里面添加一个name,这里用input和radio进行举例:

    <text>小程序表单组件</text>
    <form style="margin-top:50rpx;" bindsubmit="formSubmit">
    
      <view class="button_view">
        <!--
          name="inputName" 元素name
        -->
        <input name="inputName" type="text" placeholder="清输入" bindinput="inputFunction"></input>
    
        <!--
          name="checkboxName" 元素name
        -->
        <radio-group name="checkboxName">
          <label wx:for="{{radioList}}" wx:for-item="radioItem">
            <radio value="{{radioItem.value}}" checked="{{radioItem.checked}}"></radio>{{radioItem.name}}
          </label>
        </radio-group>
    
        <text>输入的值:{{inputStr}}</text>
    
        <button form-type="submit">提交</button>
        <button form-type="reset">重置表单</button>
    
      </view>
    
    </form>
    

    我们在点击提交的时候,是会响应form表单的bindsubmit=“formSubmit”,所以我们要去到.js文件实现bindSubmit事件的函数。

    3.实现提交时间响应函数

    formSubmit:function(e){
      console.log(e.detail.value.checkboxName)
      console.log(e.detail.value.inputName)
    },
    

    之前我们在获取input的值的时候是直接detail后面就获取value,这里为什么要获取value下层呢?下层又是什么呢?value下层就是我们定义的元素的name,获取下层是因为我们在提交的时候是响应整个表单,直接获取value是获取到了整个表单,所以我们要获取指定数据就需要通过元素的name进行获取。

    4.控制看一下结果:
    在这里插入图片描述
    这里可以看到控制台获取到了输入的结果,以及radio单项选择的结果,提交事件就这样子了。

    5.重置表单事件就很简单了,简单来说就是还原表单的初始状态,清空输入框,清除选择框等操作:
    在这里插入图片描述
    点一下表单里面的元素回到初始状态,但是我们发现,文本框没有返回到初始状态?因为这里我们还没有实现表单的重置事件监听bindreset=“formReset”

    6.我们加上重置事件监听在进行尝试:

    .wxml表单添加

    <form style="margin-top:50rpx;" bindsubmit="formSubmit" bindreset="formReset">
    

    .js实现对应函数,将数据源的值赋空

    formReset:function(e){
      this.setData({
        inputStr:""
      })
    },
    

    再来查看一下效果:
    在这里插入图片描述
    点击之后文本框的内容也变回最初的样子了。

    展开全文
  • 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。 属性名 类型 说明 report-submit Boolean 是否返回formId用于发送模板消息 bindsubmit EventHandle 携带form中的数据...
  • 本篇文章主要介绍了Vue表单类的父子组件数据传递示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue 表单验证按钮事件交由父组件触发,不直接再子组件上操作的方法 子组件: //内容部分 <Form ref=formCustom :model=formCustom :rules=ruleCustom :label-width=80> <Input type=text v-model=...
  • plexus-form - 采用JSON-Schema的react动态表单组件
  • 产品需求表单组件响应式网页模板
  • 本文通过实例代码给大家介绍了HTML 表单组件的知识,非常不错,具有参考借鉴价值,需要的朋友参考下吧
  • 一.表单组件基础 ...jQuery Mobile 的表单组件有以下几种: (1)文本输入框, type=”text” 标记的 input 元素会自动增强为 jQuery Mobile 样式,无需额外添加 data-role 属性。 (2)文本输入域, t
  • 翻页表单提交组件网页模板
  • so-form 是一个自动双向数据绑定,可拓展,提供 json-schema 自动渲染出对应表单组件vue插件。so-form 对第三方组件库无侵入,提供了高度抽象能力解决繁琐的表单配置插件

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 195,687
精华内容 78,274
关键字:

表单组件有哪些

友情链接: PJSIP_test_example.zip