表单组件
1. input输入框组件
基础属性
input输入框组件–基础属性—type类型
type属性值
input输入框组件—占位符placeholder相关
占位符placeholder属性
注意:placeholder字体大小默认与input字体大小相同,不能分开设置,不然应用户体验。方案:给input设置字体大小即可
input输入框组件—焦点类属性
input输入框组件—键盘与键盘按钮
confirm-type属性值
一般需要开发人员根据业务的情景选择合适的confirm-type
-
confirm-type="send"
右下角按钮为“发送”
-
confirm-type="search"
右下角按钮为“搜索”
-
confirm-type="next"
右下角按钮为“下一个”
-
confirm-type="go"
右下角按钮为“前往”
-
confirm-type="done"
右下角按钮为“完成”
注意:confirm-type的最终表现与手机输入法本身的实现有关,部分安卓系统输入法和第三方输入法可能不支持或不完全支持。场景:当填写项较多时,可能超出当前屏幕,此时需要对弹起的软键盘做些处理
输入“鸭舌帽”点击搜索
input输入框现有bug:
- 部分微信版本placeholder 在聚焦时出现重影问题
- 部分机型 focus 属性设置无效
- input 组件是一个原生组件,字体是系统字体,所以无法设置 font-family
textarea多行输入框组件
应用场景:发表评论或发布帖子,点击按钮跳到评论页面
发布评论页面代码块
form表单组件
作用:将组件内的用户输入的switch input checkbox slider radio picker 提交
注意:当点击 form 表单中 form-type 为 submit 的 button 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。
form-type触发表单提交/重置操作
form-type 属性值
form表单组件–提交评论操作
注意:
提交表单时,必要在需要提交信息的表单组件上,加上 name 来作为 key,否则会获取不到相关信息
接下来做些完善,评论完毕后弹框提示,然后返回上一页面
完善一
接下来接着做完善,提交时验证最少10个字,否则弹框提示
完善二
接下来接着做完善,输入字体时,实时监听目前输入多少字
完善三
- 实时获取输入时字体数量
实时获取输入时字体数
form表单组件–取消评论操作
form表单组件–单选组件
radio-group单选选择器与radio单选项目
- radio-group单项选择器,内部由多个 radio 组成
- radio单选项目
radio-group单选选择器与radio单选项目
有时单选项目过多时,需要用到循环指令wx:for
form表单组件–关联组件label
label组件用来改进表单组件的可用性
作用:使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。
目前可以绑定的控件有:button, checkbox, radio, switch
form表单组件–多选组件
checkbox-group多选选择器与checkbox多选项目
- checkbox-group多选选择器
- checkbox多选项目