创新互联百度小程序教程：与H5表单元素的区别

  • 与 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 规定一套按钮组。

     
 
 
      
  
  
  
      2. 
  
  
  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  
      5. 
  
  
  
    5.  
      6. 
  
  
  
    6.  
      7.
  • Apple
  • Peach

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

    textarea 组件和 input 组件的 type 属性

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

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

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

    input 组件和 textarea 组件的 placeholder 属性

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

     
 
 
      
  
  
  
      2. 
  
  
  
      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. 
  
  
  
      12. 
  
  
  
      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 回调中确认是否登录成功

    合理地使用这些开放能力，可以用在非常多的场景下，例如：获取用户电话号码进行自动填充，获取用户授权、登录态设置、客服会话等。
    以下为获取用户选择地址信息：

    button 组件的 form-type 属性

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

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

    代码示例

    • SWAN
    • JS
     
 
 
      
  
  
  
      2. 
  
  
  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  提交
      5. 
  
  
  
    5.  
      6. 
  
  
  
    6.  
      7. 
  
  
  
    7.  重置
      8. 
  
  
  
    8.  
      9. 
  
  
  
      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 的效果会类似微信聊天输入框，根据文本的量调整框高。

    代码示例

    • SWAN
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  输入区高度自适应
      5. 
  
  
  
    5.  auto-height
      6. 
  
  
  
    6.  
      7. 
  
  
  
    7.