Form
Form，表单，可以分成“输入型”和“选择型”两种。输入型包括单行文本（文本、数值、电话、密码等）、多行文本；选择型包括下拉选择、单选、多选、开关、日期时间等。在 WeUI 中，表单通常与 Cell 组件配合使用。
通常，表单字段，都需要告知用户该字段的含义，除了可以通过 placeholder 属性外，还可以使用 label ，放在表单元素左边，明确说明表单的含义。
在 WeUI 中，设置 label 样式的类名是 .weui_label。为了使得存在多个表单字段居左对齐，.weui_label 默认设置 label 的宽度为 3em 。
**注意：**开发者需要根据实际情况，根据 label 的文字，统一指定一个宽度。推荐文字个数不超过 4 个，超过时换行显示。
Input 输入框，是表单中最常见的元素，表现为单行文本输入框，可以指定输入类型为文本（text）、数值（number）、电话（tel）、密码（password）等。WebView 默认的 输入框样式不统一且不太美观，所以 WeUI 通过类名 .weui_input 来设置单行输入框的样式，使其更符合微信风格、体验更佳。配合 Cell 使用，示例如下：
<div class="weui_cells_title">表单</div>
<div class="weui_cells weui_cells_form">
<div class="weui_cell">
<div class="weui_cell_hd">
<label class="weui_label">qq</label>
</div>
<div class="weui_cell_bd weui_cell_primary">
<input class="weui_input" type="tel" placeholder="请输入qq号">
</div>
</div>
</div>需要注意的是，当 Cells 内有表单元素时，需要添加 .weui_cells_form 类，来单独设置其他的样式。效果如下：
Textarea，文本域，用作输入多行文本。不同于 Input，在 WeUI 的设计中，文本域没有 label ，在 placeholder 中提示用户输入信息即可。通常，输入多行文本时，都有字数限制，WeUI 提供了相应的样式配合使用。示例如下：
<div class="weui_cells_title">意见反馈</div>
<div class="weui_cells weui_cells_form">
<div class="weui_cell">
<div class="weui_cell_bd weui_cell_primary">
<textarea class="weui_textarea" placeholder="请输入意见反馈" rows="3"></textarea>
<div class="weui_textarea_counter"><span>0</span>/200</div>
</div>
</div>
</div>预览效果如下：
Radio，单选框，在 WeUI 的设计中，单选框列表通常是独立一组的，推荐左边文字，右边选中图标，用户只能选择其中一个选项。默认通过 label 标签的 for 属性来关联，无需额外编写 javascript 代码来实现切换选中的效果。
但是，在移动端页面中，click 事件有 300ms 左右的延时，因此会给用户造成点击反应迟钝的感觉。解决这个问题，可以使用 fastclick 或 touch/touchend 事件来解决。
需要注意的是，使用 fastclick 方案，会引发其他问题，详情见 issus 85。下面给出示例代码：
<div class="weui_cells_title">单选列表项</div>
<div class="weui_cells weui_cells_radio">
<label class="weui_cell weui_check_label" for="x11">
<div class="weui_cell_bd weui_cell_primary">
<p>cell standard</p>
</div>
<div class="weui_cell_ft">
<input type="radio" class="weui_check" name="radio1" id="x11">
<span class="weui_icon_checked"></span>
</div>
</label>
<label class="weui_cell weui_check_label" for="x12">
<div class="weui_cell_bd weui_cell_primary">
<p>cell standard</p>
</div>
<div class="weui_cell_ft">
<input type="radio" name="radio1" class="weui_check" id="x12" checked="checked">
<span class="weui_icon_checked"></span>
</div>
</label>
</div>预览效果如下：
Checkbox，复选框，与 Radio 类似，默认也是通过 label 标签的 for 属性来关联选择。不同的是，Checkbox 允许用户同时选择多个选项，推荐选中图标放在左边。
示例代码如下：
<div class="weui_cells_title">复选列表项</div>
<div class="weui_cells weui_cells_checkbox">
<label class="weui_cell weui_check_label" for="s11">
<div class="weui_cell_hd">
<input type="checkbox" class="weui_check" name="checkbox1" id="s11" checked="checked">
<i class="weui_icon_checked"></i>
</div>
<div class="weui_cell_bd weui_cell_primary">
<p>standard is dealt for u.</p>
</div>
</label>
<label class="weui_cell weui_check_label" for="s12">
<div class="weui_cell_hd">
<input type="checkbox" name="checkbox1" class="weui_check" id="s12">
<i class="weui_icon_checked"></i>
</div>
<div class="weui_cell_bd weui_cell_primary">
<p>standard is dealicient for u.</p>
</div>
</label>
</div>预览效果如下：
Select，选择框，功能与 Radio 类似，是提供一组选项，让用户选择其中一个。不同的是，这些选项默认是隐藏起来的，当用户点击时，才会展开来让用户选择。通常是在选项较多、或选项不太重要，不需要展示出来时使用。
下拉框是占据一整行，也可以配合 Input 输入框使用，下拉框放在左边，表示输入框的前缀。
下面给出这两种使用方式的示例：
<div class="weui_cells_title">选择</div>
<div class="weui_cells">
<div class="weui_cell weui_cell_select weui_select_before">
<div class="weui_cell_hd">
<select class="weui_select" name="select2">
<option value="1">+86</option>
<option value="2">+80</option>
<option value="3">+84</option>
<option value="4">+87</option>
</select>
</div>
<div class="weui_cell_bd weui_cell_primary">
<input class="weui_input" type="tel" placeholder="请输入号码">
</div>
</div>
</div>
<div class="weui_cells_title">选择</div>
<div class="weui_cells">
<div class="weui_cell weui_cell_select">
<div class="weui_cell_bd weui_cell_primary">
<select class="weui_select" name="select1">
<option selected="" value="1">微信号</option>
<option value="2">QQ号</option>
<option value="3">Email</option>
</select>
</div>
</div>
<div class="weui_cell weui_cell_select weui_select_after">
<div class="weui_cell_hd">
国家/地区
</div>
<div class="weui_cell_bd weui_cell_primary">
<select class="weui_select" name="select2">
<option value="1">中国</option>
<option value="2">美国</option>
<option value="3">英国</option>
</select>
</div>
</div>
</div>
Switch，开关，只有两个状态，用于让用户选择“开启”还是“关闭”。使用起来很简单，只需要给 input 标签加上 .weui_switch 类即可。
下面是示例代码：
<div class="weui_cells_title">开关</div>
<div class="weui_cells weui_cells_form">
<div class="weui_cell weui_cell_switch">
<div class="weui_cell_hd weui_cell_primary">声音</div>
<div class="weui_cell_ft">
<input class="weui_switch" type="checkbox">
</div>
</div>
<div class="weui_cell weui_cell_switch">
<div class="weui_cell_hd weui_cell_primary">振动</div>
<div class="weui_cell_ft">
<input class="weui_switch" type="checkbox" checked>
</div>
</div>
</div>预览效果如如下：
Uploader，上传组件。图片的展示已background-image写在.weui_uploader_file里，默认是background-size:cover。上传中的状态需要为.weui_uploader_file添加.weui_uploader_status。icon或文字都可放到它的子元素.weui_uploader_status_content里面，它是上下左右居中。
下面是示例代码：
<div class="weui_cells weui_cells_form">
<div class="weui_cell">
<div class="weui_cell_bd weui_cell_primary">
<div class="weui_uploader">
<div class="weui_uploader_hd weui_cell">
<div class="weui_cell_bd weui_cell_primary">图片上传</div>
<div class="weui_cell_ft">0/2</div>
</div>
<div class="weui_uploader_bd">
<ul class="weui_uploader_files">
<li class="weui_uploader_file" style="background-image:url(...)"></li>
<li class="weui_uploader_file weui_uploader_status" style="background-image:url(...)">
<div class="weui_uploader_status_content">
<i class="weui_icon_warn"></i>
</div>
</li>
<li class="weui_uploader_file weui_uploader_status" style="background-image:url(...)">
<div class="weui_uploader_status_content">50%</div>
</li>
</ul>
<div class="weui_uploader_input_wrp">
<input class="weui_uploader_input" type="file" accept="image/*" multiple="">
</div>
</div>
</div>
</div>
</div>
</div>预览效果如如下：
