表单

radio,
checkbox{
    zoom:0.8;
}            

表单容器；行内元素 inline

默认情况下，表单大小为0，即使添加了表单元素

生产环境下，通常是 垂直方向 分布各表单元素

为了 优雅分隔 各表单元素，通常增加一个内层元素<view>，由它布局，而仅仅将<form>当作一个 功能元素

<form bindsubmit="submit">
    <view class="form-cont">
        // 其它表单元素
        //按钮指定表单类型，可以触发表单的默认提交行为
        <button form-type="submit">submit</button>
    </view>
</form>

.form-cont {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 80%;
    padding: 10px;
    background-color: #f40;
    margin: 0 auto;
    }

表单事件：提交和重置

提交时，可以在事件对象 e.detail 中获取表格各元素的值；需要配合指定了 form-type 为 submit 属性的按钮 <button> 一起使用，见上面示例的结构

多数情况下，抛弃表单元素 <form>，使用普通结构，通过 数据双向绑定 和自定义事件提交数据

submit(e) {
    console.log(e.detail);
}

功能强大的按钮；有特定的类型属性和事件属性；块元素 block

如果设置了高度后，记得设置同样大小的行高，以确保文字垂直方向居中

除了默认的 tap 事件外，按钮其它事件大多和相应的开发能力关联

更多信息，请访问 官方文档 - button

开发能力 open-type 的使用，要随时关注官方接口的更新变化

在调试器中，查看按钮的代理样式，体会样式初始化的重要性

button{
    width: 100%!important;
    background-color: var(--themeColor);
    color: #fff;    
}            

部分样式需要在特定页面的类中设置

.btn{
    padding: 0;
    margin: 0;
    font-weight: normal;
    border-radius: 0;
}

打开客服对话框 - 用户点击后，打开客服对话框

<button open-type="contact" bindcontact='getContact'>getContact</button>

getContact(e){
    console.log(e);
}

选择用户头像 - 用户点击后，打开头像选择对话框

<button open-type="chooseAvatar" bindchooseavatar='getAvatar'>getAvatar</button>

getAvatar(e){
    console.log(e.detail);//http://tmp/bi86Wd1sI41s8ea8eb984c16d03bff787972d38e3ce6.jpg
}

行内元素 inline，用以扩展用户点击、改善用户体验

使用属性 for，配合指定了 id 的表单元素，如<input>、<radio>、<checkbox>，可以改进表单组件的可用性

<checkbox value="撸码" id="code" /><label for="code">撸码</label>

或：使用 <label> 包裹表单元素，此时应略去for属性

<label>
    <checkbox color="#3498db" value="撸码" />撸码
</label>

单行文本输入框；块元素 block

原生组件，字体是系统字体，无法设置 font-family

更多信息，请访问 官方文档 - input

普通文本输入 - text

<view class="item">
    <text>昵称</text>
    <input class="ipt" type="text" name="uname" placeholder="您的昵称" maxlength="8" value="{{user.uname}}" />
</view>

昵称输入 - nickname；会自动拉取你的微信昵称

<view class="item">
    <text>昵称</text>
    <input class="ipt" type="nickname" name="uname" placeholder="您的昵称" maxlength="8" value="{{user.uname}}" />
</view>

密码输入 - safe-password；隐藏真实信息

<view class="item border-btm">
    <text>密码</text>
    <input class="ipt" type="safe-password" name="upass" placeholder="您的密码" maxlength="8" value="{{user.upass}}" />
</view>

数值型输入 - digit；打开数字键盘，需要在手机端查看效果

<view class="item border-btm">
    <text>学号</text>
    <input class="ipt" type="digit" name="usn" placeholder="您的学号" maxlength="8" value="{{user.usn}}" />
</view>

多选一组件：单选按钮和单选按钮组

行内块元素 inline-block

HTML中，需要给每个 <radio> 指定 name 以确保是一组；微信小程序中，只需要给 <radio-group> 指定 name 即可

更多信息，请访问 官方文档 - radio

<radio-group bindchange="getGender" name="ugender">
    <radio color="#3498db" value="男" checked />男
    <radio color="#3498db" value="女" />女
</radio-group>

利用给定的数据和当前值是否相等来决定哪个是选中状态；使用 <label> 改写下例，提升用户体验

<radio-group bindchange="getGender" name="ugender">
    <radio color="#3498db" value="男" checked="{{user.ugender=='男'}}" />男
    <radio color="#3498db" value="女" checked="{{user.ugender=='女'}}" />女
</radio-group>

getGender(e){
    console.log(e.detail.value);
}

行内块元素 inline-block

多选按钮；多选按钮组

更多信息，请访问 官方文档 - checkbox

使用 <label> 改写下例，提升用户体验

<checkbox-group bindchange="getLike" name='ulike'>
    <checkbox color="#3498db" value="撸码" />撸码
    <checkbox color="#3498db" value="睡觉" checked/>睡觉
    <checkbox color="#3498db" value="电玩" />电玩
    <checkbox color="#3498db" value="唱歌" checked/>唱歌
    <checkbox color="#3498db" value="跳舞" />跳舞
    <checkbox color="#3498db" value="美食" checked/>美食
</checkbox-group>

getLike(e){
    console.log(e.detail.value);
}

多行输入；默认大小300*150；块元素 block

显式 的设置宽度和容器保持一样大小；同时设置内边距padding以使得文字内收一定距离

最大长度140个字符

更多信息，请访问 官方文档 - textarea

<view>
    <text>简介</text>
    <textarea name="udesc" value="{{user.udesc}}" />
</view>

textarea{
    width: 100%;
    padding: 20rpx;
}

块元素 block

从底部弹起的滚动选择器，如：时间选择器、日期选择器、地区选择器

除了下述通用的属性外，不同的mode，picker拥有不同的属性；如时间类的都有开始start、结束end等

更多信息，请访问 官方文档 - picker

弹出菜单 - ind和list是data中的数据

<picker 
    mode="selector" 
    value="{{ind}}" 
    range="{{list}}" 
    bindchange="pick"
>
    {{list[ind]}}
</picker>

pick(e){
    console.log(e.detail.value)
}

时间选择 - time；可以指定起始 start和结束 end

<picker 
    mode="time" 
    value="{{time}}" 
    bindchange="selTime"
>
    {{time]}}
</picker>

selTime(e){
    this.setData({
        time: e.detail.value
    })
}

日期选择 - date；通常应指定起始 start和结束 end

<picker 
    mode="date" 
    value="{{user.ubirth}}" 
    start="2000-07-01"
    end="2026-12-31"
    bindchange="selDate"
>
    {{user.ubirth}}
</picker>

selDate(e){
    this.setData({
        date: e.detail.value
    })
}

地区选择 - region；e.detail.value返回一个数组：省、市、区；可以不使用地图实现选择

<picker 
    mode="region" 
    value="{{region}}" 
    bindchange="selRegion"
>
    {{region}}
</picker>

selRegion(e){
    this.setData({
        region: e.detail.value
    })
}

块元素 block

滑动选择器

更多信息，请访问 官方文档 - slider

年龄选择

<slider 
    activeColor="#3498db" 
    backgroundColor="#ccc" 
    block-size="24" 
    block-color="#3498db" 
    bindchange="selAge" 
    min="18" 
    max="24" 
    name="uage" 
    value="{{user.uage}}" 
    show-value 
/>

selAge(e){
    console.log(e.detail.value)
}

播放进度调节

行内块元素 inline-block

开关选择器

也可以使用checkbox实现功能

更多信息，请访问 官方文档 - switch