微信小程序（组件--表单：交互控件）

大纲

（1）input输入框组件
（2）textarea多行输入框组件
（3）form表单组件
（4）radio-group单选选择器与radio单选项目
（5）label关联组件
（6）checkbox-group多选选择器与checkbox多选项目

表单组件

（1）input输入框组件
基础属性

<view>
  姓名：<input value="吖吖吖" focus></input>
</view>
<view>
  密码：<input maxlength="6" password placeholder="请输入密码"></input>
</view>

/*用户姓名*/
input{
  display:inline-block;
}

（1）input输入框组件–基础属性—type类型

type属性值

<!-- input输入框组件--基础属性---type类型   真机测试 -->
<input type="number"></input>   <!-- 数字输入键盘 -->
<input type="text"></input>     <!-- 文本输入键盘 -->
<input type="idcard"></input>   <!-- 身份证输入键盘 -->
<input type="digit"></input>    <!-- 带小数点的数字键盘 -->

input输入框组件—占位符placeholder相关
占位符placeholder属性

<input placeholder="请输入姓名" placeholder-style="color:#c8c8c8;"></input>
<input placeholder="请输入姓名" placeholder-style="color:#c8c8c8;" font-size="20rpx;"></input>

注意：placeholder字体大小默认与input字体大小相同，不能分开设置，不然应用户体验。方案：给input设置字体大小即可

<input placeholder="请输入姓名" placeholder-class="placeClassName"></input>

.placeClassName{
  color:red;
}

（1）input输入框组件—焦点类属性





input输入框组件—键盘与键盘按钮