后浪云百度小程序教程：与 H5 表单元素的区别

2023-3-12
  • 与 H5 表单元素的区别
    • 相同的属性有不同的表现
      • radio-group 和 checkbox-group
      • textarea 组件和 input 组件的 type 属性
      • input 组件和 textarea 组件的 placeholder 属性
    • 小程序表单组件扩展更多的属性
      • button 组件的 open-type 属性
      • button 组件的 form-type 属性
      • input 组件和 textarea 组件的 comfirm-type 属性
      • textarea 组件输入框高度自适应或固定
    • 小程序新增更多表单组件
      • picker 组件和 picker-view 组件
      • slider 组件
      • switch 组件

    与 H5 表单元素的区别

    智能小程序封装了许多表单组件，每个组件封装了非常实用的功能，和 H5 表单元素相比，功能更强大。

    相同的属性有不同的表现

    智能小程序组件，是对数据和方法进行封装的小程序视图控件，拥有自己的属性和方法，可帮助开发者拼装完成自己的智能小程序页面。在一些属性上，小程序和 H5 表单元素有不一样的表现。例如 radio-group 和 checkbox-group 、textarea 组件和 input 组件的 type 属性、input 组件和 textarea 组件的 placeholder 属性。

    radio-group 和 checkbox-group

    对 radio 的使用：

    H5 表单元素用 name 属性标示为相关联的一套按钮组；
    小程序使用 radio-group 规定一套按钮组。

     
 
 
      
  
  
  
    1. <!-- H5 -->
      2. 
  
  
  
    2. <div>
      3. 
  
  
  
    3.  <input type="radio" id="fruit1" name="fruit" value="apple" checked>
      4. 
  
  
  
    4.  <label for="fruit1">Apple</label>
      5. 
  
  
  
    5.  <input type="radio" id="fruit2" name="fruit" value="peach">
      6. 
  
  
  
    6.  <label for="fruit2">Peach</label>
      7. 
  
  
  
    7. </div>
      8. 
  
  
  
      9. 
  
  
  
    9. <!-- 小程序 -->
      10. 
  
  
  
    10. <radio-group bindchange="radioChange">
      11. 
  
  
  
    11.  <radio value="apple" checked>Apple</radio>
      12. 
  
  
  
    12.  <radio value="peach" checked="false">Peach</radio>
      13. 
  
  
  
    13. </radio-group>
      14.

    同样的，checkbox-group 组件也规定了一套按钮组，支持多选。

    textarea 组件和 input 组件的 type 属性

    H5 表示的是它们的工作方式，具体有 text、button、checkbox、color、date、email、file、number、password、range、submit、tel 等；
    小程序的 type 属性是指输入时弹出键盘的一种模式，专注于文本输入，具体有 text（文本输入键盘）、number（不带小数点的数字输入键盘）、idcard（带数字和 X 的身份证输入键盘）、digit（带小数点的数字输入键盘）。
    后浪云百度小程序教程：与 H5 表单元素的区别插图

    请根据需要录入的内容类型合理设置 input 组件的 type 值，降低用户操作成本，提升用户录入体验，例如在特定的录入场景内，比如要求录入身份证号码，应该使用 type="idcard"

    小程序 input 组件提供了 password 属性用于指定为密码类型<input password="true"/>，password 默认为false 。

    input 组件和 textarea 组件的 placeholder 属性

    H5 表单提供伪元素::placeholder用于设置样式；
    小程序提供了placeholder-style用于设置 placeholder 的样式。

     
 
 
      
  
  
  
    1. <!-- H5 -->
      2. 
  
  
  
    2. <input placeholder="我是红色的！">
      3. 
  
  
  
      4. 
  
  
  
    4. /* CSS */
      5. 
  
  
  
    5. input::placeholder {
      6. 
  
  
  
    6.  color: red;
      7. 
  
  
  
    7.  font-size: 1.2em;
      8. 
  
  
  
    8.  font-style: italic;
      9. 
  
  
  
    9. }
      10. 
  
  
  
      11. 
  
  
  
    11. <!-- 小程序 -->
      12. 
  
  
  
    12. <input
      13. 
  
  
  
    13.  data-id="phone"
      14. 
  
  
  
    14.  placeholder='please enter your phone'
      15. 
  
  
  
    15.  placeholder-style="color: red;"
      16. 
  
  
  
    16. />
      17.

    小程序表单组件扩展更多的属性

    对于一些常见的表单组件，小程序为其扩展了更多实用的属性，让开发者开发过程更加轻松。例如 button 组件的 open-type 属性、button 组件的 form-type 属性、input 组件和 textarea 组件的 comfirm-type 属性、textarea 组件输入框高度自适应或固定。

    button 组件的 open-type 属性

    小程序的 button 组件提供了 open-type 属性，提供百度 App 开放能力，比如分享、获取用户信息等等，适用于要获取用户电话、账号等场景。

    open-type 的值 说明
    share 触发用户分享
    getUserInfo 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息，参考用户数据的签名验证和加解密对用户数据进行处理
    getPhoneNumber 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息：
    detail.errMsg 值为getPhoneNumber:ok时代表用户信息获取成功；
    detail.errMsg值为getPhoneNumber:fail auth deny时代表用户信息获取失败
    openSetting 打开授权设置页
    chooseAddress 获取用户信息，可以从 bindchooseaddress 回调中获取到用户选择的地址信息
    chooseInvoiceTitle 获取用户信息，可以从 bindchooseinvoicetitle 回调中获取到用户选择发票抬头信息
    contact 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息
    login 登录，可以从 bindlogin 回调中确认是否登录成功

    合理地使用这些开放能力，可以用在非常多的场景下，例如：获取用户电话号码进行自动填充，获取用户授权、登录态设置、客服会话等。
    以下为获取用户选择地址信息：
    后浪云百度小程序教程：与 H5 表单元素的区别插图1

    button 组件的 form-type 属性

    button 组件的 form-type 属性使用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件：

    form-type 值 说明
    buttonclick 普通按钮点击
    submit 提交表单。点击的 button 组件会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key
    reset 重置表单。点击的 button 组件会重置表单

    代码示例

    • SWAN
    • JS
     
 
 
      
  
  
  
    1. <!-- 点击提交按钮会触发 form 的 submit 事件，点击重置按钮会触发 form 的 reset 事件 -->
      2. 
  
  
  
    2. <form bindsubmit="submit" bindreset="reset">
      3. 
  
  
  
    3.  <button form-type="submit" type="primary">
      4. 
  
  
  
    4.  提交
      5. 
  
  
  
    5.  </button>
      6. 
  
  
  
    6.  <button form-type="reset">
      7. 
  
  
  
    7.  重置
      8. 
  
  
  
    8.  </button>
      9. 
  
  
  
    9. </form>
      10. 
 
 
 
     
 
 
      
  
  
  
    1. Page({
      2. 
  
  
  
    2.  // 按钮类型为 form-type="submit/reset" 的 submit 事件
      3. 
  
  
  
    3.  submit() {
      4. 
  
  
  
    4.  swan.showToast({
      5. 
  
  
  
    5.  title: '用户点击了submit',
      6. 
  
  
  
    6.  icon: 'none'
      7. 
  
  
  
    7.  });
      8. 
  
  
  
    8.  },
      9. 
  
  
  
    9.  // 按钮类型为 form-type="submit/reset" 的 reset 事件
      10. 
  
  
  
    10.  reset() {
      11. 
  
  
  
    11.  swan.showToast({
      12. 
  
  
  
    12.  title: '用户点击了reset',
      13. 
  
  
  
    13.  icon: 'none'
      14. 
  
  
  
    14.  });
      15. 
  
  
  
    15.  }
      16. 
  
  
  
    16. });
      17.

    input 组件和 textarea 组件的 comfirm-type 属性

    为了进一步提高用户键盘输入体验，小程序提供了 comfirm-type 属性，可以设置键盘右下角按钮的文字，但其最终表现与手机输入法本身的实现有关，部分安卓系统输入法和第三方输入法可能不支持或不完全支持。
    comfirm-type 属性支持以下值：

    confirm-type 值 说明
    send 键盘右下角按钮为“发送”
    search 键盘右下角按钮为“搜索”
    next 键盘右下角按钮为“下一个”
    go 键盘右下角按钮为“前往”
    done 键盘右下角按钮为“完成”

    设置合理的 confirm-type 值，例如表单最后一项输入可以设置 confirm-type 为 done ，这样可以有效的引导用户填写表单。

    textarea 组件输入框高度自适应或固定

    HTML textarea 使用 rows 和 cols 来定义行列数（大小），而小程序 textarea 组件可以通过是否设置 auto-height 属性来控制高度，如果设置 auto-height，则 textarea 的效果会类似微信聊天输入框，根据文本的量调整框高。

    后浪云百度小程序教程：与 H5 表单元素的区别插图2

    代码示例

    • SWAN
     
 
 
      
  
  
  
    1. <view class="wrap">
      2. 
  
  
  
    2.  <view class="card-area">
      3. 
  
  
  
    3.  <view class="top-description border-bottom">
      4. 
  
  
  
    4.  <view>输入区高度自适应</view>
      5. 
  
  
  
    5.  <view>auto-height</view>
      6. 
  
  
  
    6.  </view>
      7. 
  
  
  
    7.  <textarea auto-height maxlength="-1" bindinput="bindInput" />
      8. 
  
  
  
    8.  </view>
      9. 
  
  
  
    9. </view>
      10.

    小程序新增更多表单组件

    对于一些实际场景常用的功能，例如滚动选择器、滑动选择器、开关选择器等，小程序也将这些功能封装成一个个表单组件提供给开发者使用。例如 picker 组件和 picker-view 组件、slider 组件、switch 组件。

    picker 组件和 picker-view 组件

    picker 组件表示从底部弹起的滚动选择器。它有五种选择，分别是时间选择器、日期选择器、普通选择器、多列选择器以及省市区选择器，默认是普通选择器，通过 mode 属性进行区分。
    后浪云百度小程序教程：与 H5 表单元素的区别插图3

    picker-view 组件表示可嵌页面的滚动选择器，在其内放置 picker-view-column 子组件。而且 picker-view-column 孩子节点的高度会自动设置成与 picker-view 的选中框的高度一致。注意：picker-view 中只可放置 picker-view-column 组件，其他节点不会显示。

    后浪云百度小程序教程：与 H5 表单元素的区别插图4

    代码示例

    • SWAN
     
 
 
      
  
  
  
    1. <!-- picker -->
      2. 
  
  
  
    2. <picker mode="date">
      3. 
  
  
  
      4. 
  
  
  
    4. <!-- picker-view -->
      5. 
  
  
  
    5. <picker-view>
      6. 
  
  
  
    6.  <picker-view-column>
      7. 
  
  
  
    7.  <view s-for="item in years" class="item">{{item}}年</view>
      8. 
  
  
  
    8.  </picker-view-column>
      9. 
  
  
  
    9.  <picker-view-column>
      10. 
  
  
  
    10.  <view s-for="item in months" class="item">{{item}}月</view>
      11. 
  
  
  
    11.  </picker-view-column>
      12. 
  
  
  
    12.  <picker-view-column>
      13. 
  
  
  
    13.  <view s-for="item in days" class="item">{{item}}日</view>
      14. 
  
  
  
    14.  </picker-view-column>
      15. 
  
  
  
    15. </picker-view>
      16.

    slider 组件

    slider 组件表示滑动选择器，和 H5 表单元素 <input type="range"> 相比，小程序封装了一些自定义（滑块的大小、滑块的颜色、已选择的颜色、背景条的颜色等）和事件的绑定，是个非常实用的表单组件。
    后浪云百度小程序教程：与 H5 表单元素的区别插图5

    代码示例

    • SWAN
     
 
 
      
  
  
  
    1. <slider 
      2. 
  
  
  
    2.  min="0" 
      3. 
  
  
  
    3.  max="1500" 
      4. 
  
  
  
    4.  value="200" 
      5. 
  
  
  
    5.  step="30" 
      6. 
  
  
  
    6.  block-size="16" 
      7. 
  
  
  
    7.  block-color="#3388FF"
      8. 
  
  
  
    8.  activeColor="#3c76ff"
      9. 
  
  
  
    9.  backgroundColor="#cccccc"
      10. 
  
  
  
    10.  disabled="false">
      11. 
  
  
  
    11. </slider>
      12.

    switch 组件

    switch 组件表示开关选择器，通过 type 属性，可以选择 switch/checkbox 两种样式，小程序提供了 color 属性用于改变 switch 的颜色，还为其封装了 checked 改变时触发的 change 事件。
    后浪云百度小程序教程：与 H5 表单元素的区别插图6

    代码示例

    • SWAN
     
 
 
      
  
  
  
    1. <switch class="init-switch" checked="true" color="#00BC89" bindchange="switchChange"></switch>
      2.
    版权声明：
    作者：后浪云
    链接：https://www.idc.net/help/186849/
    文章版权归作者所有，未经允许请勿转载。
    THE END
    IDC.NET智能小程序后浪云百度小程序
    Copyright © 2025 后浪云 网站地图