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

同样的，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

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

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

input 组件和 textarea 组件的 placeholder 属性

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

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

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

对于一些常见的表单组件，小程序为其扩展了更多实用的属性，让开发者开发过程更加轻松。例如 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 回调中确认是否登录成功

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

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

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 的效果会类似微信聊天输入框，根据文本的量调整框高。

textarea自适应高度

代码示例

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

小程序新增更多表单组件

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

picker 组件和 picker-view 组件

picker 组件表示从底部弹起的滚动选择器。它有五种选择，分别是时间选择器、日期选择器、普通选择器、多列选择器以及省市区选择器，默认是普通选择器，通过 mode 属性进行区分。
picker

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

picker-view

代码示例

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

slider 组件

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

代码示例

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

switch 组件

switch 组件表示开关选择器，通过 type 属性，可以选择 switch/checkbox 两种样式，小程序提供了 color 属性用于改变 switch 的颜色，还为其封装了 checked 改变时触发的 change 事件。
switch

代码示例

  • SWAN
  1. <switch class="init-switch" checked="true" color="#00BC89" bindchange="switchChange"></switch>