归纳整理微信小程序常用表单组件

分类：微信小程序作者：编程之家用户
本篇文章给大家带来了关于微信小程序的相关知识，其中主要介绍了一些常用表单组件，包括了button、checkbox、input、label等等相关问题，下面一起来看一下，希望对大家有帮助。

【相关学习推荐：小程序学习教程】

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


【相关学习推荐：小程序学习教程】

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

微信小程序

相关推荐

微信小程序订阅消息
概述 消息能力是小程序能力中的重要组成，我们为开发者提供了订阅消息能力，以便实现服务的闭环和更优的体验。 订阅消息推送位置：服务通知 订阅消息下发条件：用户自主订阅 订阅消息卡片跳转能力：点击查看详情可提爱转至该小程序的页面 消息类型 一次性订阅消息 一次性订阅消息用于解决用户使用小程序后，后续服务
判断H5页面环境在微信中还是小程序中
判断H5页面环境在微信中还是小程序中 用小程序提供的wx.miniProgram.getEnv可以获取环境参数 &lt;script type=&quot;text/javascript&quot; src=&quot;https://res.wx.qq.com/open/js/jweixin-1.
wx.reLaunch和wx.navigateTo，wx.navigateTo的区别
wx.reLaunch和wx.navigateTo，wx.navigateTo的区别 2019-03-23 11:18:05 wx.navigateTo 用于保留当前页面、跳转到应用内的某个页面，使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序，通常推荐使用 wx.n
微信小程序如何从数组里取值_微信小程序 传值取值的几种方法总结
微信小程序如何从数组里取值_微信小程序 传值取值的几种方法总结 小程序里常见的取值有以下几种，一个完整的项目写下来，用到的概率几乎是100%。 列表index下标取值 页面传值 form表单取值 1. 列表index下标取值 实现方式是：data-index=&quot;{{index}}&quot
H5页面判断是否是微信小程序打开
H5项目接入微信授权登录，通过 UA 区分微信还是普通浏览器： let&#160;ua&#160;=&#160;navigator.userAgent.toLowerCase(); let&#160;isWeixin&#160;=&#160;ua.indexOf(&#39;micromessenge
微信小程序获取data-xx=""属性的值，自定义属性设置和获取（data-）
微信小程序获取data-xx=&quot;&quot;属性的值，自定义属性设置和获取（data-） 微信小程序&lt;view class=&quot;details-btn&quot; data-taskId=&quot;111&quot; bindtap=&#39;taskdetails&#39
小程序报错：TypeError: Cannot read property ‘addEventListener‘ of undefined
小程序报错：TypeError: Cannot read property ‘addEventListener‘ of undefined 解决办法 将调试基础库由2.16.0（或者当前的） -&gt; 2.14.1 解决问题
H5跳转微信小程序-成功案例（VUE）（踩坑无数）
H5跳转微信小程序-成功案例（VUE）（踩坑无数） TuoMei 已于 2022-07-29 09:52:22 修改 准备工作 根据官方提供的资料需准备以下几点： 1、已认证的服务号 2、绑定JS接口安全域名 （在微信公众平台设置） 3、IP白名单 （在微信公众平台设置） 4、将小程序和H5公众号进
微信小程序 页面跳转和数据传递实例详解
微信小程序 页面跳转和数据传递实例详解 这篇文章主要介绍了微信小程序 页面跳转和数据传递实例详解的相关资料,这里附有实例代码帮助到家学习理解，需要的朋友可以参考下 微信小程序 页面跳转和数据传递 1.先导 在Android中，我们Activity和Fragment都有栈的概念在里面，微信小程序页面也
小程序运行程序
情景1.拉取公司代码演示： 因为github有墙，这里我们以gitee(码云)为例作为演示 (其实就是国产github，也非常好用~) 步骤一：打开Git界面 先在一个空文件夹右击Git Bash Here，打开git界面 步骤二：输入克隆远程仓库指令 别人复制的链接在这里获取 拿到别人赋值的链接自
如何开发微信小程序？
如何开发微信小程序？ 作为一名10多年一直从事互联网平台开发的从业者，我来回答下这个问题吧。 微信小程序开发流程总体可以归纳为4个步骤， 老张带您捋一捋整个环节，小白用户可以收藏了。 好了废话不多说，开始！ 一、开发前小程序需要准备的资料 我们在开发微信小程序前，需要准备下相关资料。这个资料主要是后
微信小程序getApp()和App()方法讲解
 
原生小程序开发优化方案
原生小程序开发优化方案 为了更好的制定优化方案，我们 有必要先了解下小程序的底层架构、以及与普通网页开发的差异 小程序最终渲染载体与当下一些热门的技术 Flutter、React Native等不同，依然是浏览器内核，而不是原生客户端。 而对于传统的网页来说，UI 渲染和 JS 脚本是在同一个线程中
优化小程序大小
1，不要下两倍尺寸的图片， 小程序本身自己就会对元素缩小两倍，设计图片的一杯就已经很清晰了。 2，图片压缩，（主要是压缩静态资源，ps 可以压缩，然后有一些在线压缩工具，保持600-800kb 的静态） 3，通用的代码组件化 4，是在工程量太大可以分包，分包现在最大支持20m（一般都不会去分包的）
能取代90%的人的工作的ChatGpt到底牛在哪？
文章浏览阅读189次。人工智能研究实验室OpenAI在2022年11月30日发布了自然语言生成模型ChatGPT，上线两个月就已经超过一亿用户，成为了人工智能界当之无愧的超级大网红。ChatGPT凭借着自身强大的拟人化及时应答能力迅速破圈，引起了各行各业的热烈讨论。简单来说ChatGPT就是可以基于用户文本输入自动生成回答的人工智能聊天机器人。那肯定会有人说这不就是Siri嘛，虽然都是交互机器人但是两者的差别可老大了。那么ChatGPT在人机交互时为什么会有这么出色的表现？它到底会不会取代搜索引擎？90%的人真的会因为ChatG
微信小程序开发知识点
文章浏览阅读193次。8. 导航和路由管理：掌握小程序的导航方式，如使用wx.navigateTo跳转页面、使用wx.redirect重定向页面等，学会实现页面之间的跳转和传参。1. 小程序的基本概念和架构：了解小程序的定义、特点以及与传统APP的区别，掌握小程序的运行环境、组件和API等基本概念。10. 支付功能：学习小程序的支付方式，如微信支付、支付宝支付等，了解支付流程和注意事项，学会实现小程序的支付功能。9. 用户授权和登录：了解小程序的用户授权机制，如获取用户信息、调用微信API等，学会实现用户的登录和注册功能。_微信小程序开发知识点总结
微信小程序斗地主完整代码及步骤
文章浏览阅读4.8k次，点赞7次，收藏18次。一、准备工作1. 安装微信开发者工具，并登录微信小程序账号；2. 准备斗地主游戏的图片资源；3. 准备斗地主游戏的音效资源；二、创建小程序1. 打开微信开发者工具，点击“新建小程序”，输入小程序名称，选择小程序的项目目录，点击“创建”；2. 在小程序的项目目录中，新建文件夹“images”，将准备好的斗地主游戏的图片资源放入“images”文件夹中；3. 在小程序的项目目录中，新建文件夹“sounds”，将准备好的斗地主游戏的音效资源放入“sounds”文件夹中；三、编写代码1. 在小程_扑克牌微信小程序代码
微信小程序狼人杀游戏代码及步骤
文章浏览阅读3.9k次，点赞3次，收藏7次。一、准备工作：1. 安装微信开发者工具，创建小程序项目；2. 准备游戏角色图片；3. 准备游戏背景音乐；二、实现步骤：1. 创建游戏页面，添加游戏角色图片，添加游戏背景音乐；2. 创建游戏角色类，定义游戏角色属性，如角色名称、角色图片、角色能力等；3. 创建游戏类，定义游戏属性，如游戏人数、游戏角色、游戏规则等；4. 创建游戏控制类，定义游戏流程，如游戏开始、游戏结束、游戏角色分配等；5. 创建游戏界面，实现游戏流程，如游戏开始、游戏结束、游戏角色分配等；6. 创建游戏结果页面，显示游戏_微信小程序游戏代码
开发微信小程序模拟聊天步骤及代码
文章浏览阅读1.7k次。1. 创建小程序项目：使用微信开发者工具创建一个小程序项目，并在项目中添加一个页面，用于模拟聊天。 2. 定义数据结构：定义一个数据结构，用于存储聊天记录，包括发送者、接收者、消息内容等信息。 3. 实现聊天功能：实现聊天功能，包括发送消息、接收消息、显示消息等功能。 4. 实现界面：使用微信小程序的界面框架，实现聊天界面，包括聊天记录列表、输入框等。代码示例：// 定义数据结构var chatData = { sender: '', receiver: '', message: '' };_制作聊天对话小程序代码
微信小程序开发商城详细步骤
文章浏览阅读2.1k次。1、创建小程序项目：使用微信开发者工具，新建一个小程序项目，输入项目名称，选择项目目录，点击“创建”按钮，即可创建小程序项目。2、添加页面：在小程序项目中，可以添加多个页面，每个页面都有自己的页面文件，比如首页、分类页、购物车页、我的页面等。3、添加组件：在小程序项目中，可以添加多个组件，比如商品列表组件、购物车组件、订单组件等，用于在页面中显示商品信息、购物车信息、订单信息等。4、添加接口：在小程序项目中，可以添加多个接口，用于获取商品信息、购物车信息、订单信息等，以便在页面中显示。5、_微信开发者工具做一个我的商城
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot