Layui表单元素.上
学习要点：
本节课我们来开始了解 Layui 表单元素的基本使用。
一．表单元素
1. 表单我们分两节课来说，第一节，先按套路做出一张表单；
2. 第二节：分析每个表单的基本功能和样式属性的变动；
3. 首先，我们先看下表单基本的一些 class 类的样式；
class 类
备注
layui-form
<form>定义
layui-form-item
每个表单的最外层 div 定义
layui-form-label
表单标签定义
layui-input-block
区块表单
layui-input-inline
内联表单
layui-input
文本框
layui-textarea
文本域
PS：依赖加载模块：form，在部分表单中不加载则无法显示；
layui.use(['form'], () => {
//...
})4. 完整代码列表，和官网一样，具体如下：
<form action="" class="layui-form">
<!--文本框-->
<div class="layui-form-item">
<label for="" class="layui-form-label">输入框</label>
<div class="layui-input-block">
</div>
</div>
<!--密码框-->
<div class="layui-form-item">
<label for="" class="layui-form-label">密码框</label>
<div class="layui-input-inline">
<input type="password" class="layui-input" placeholder="请输入密码">
</div>
<div class="layui-form-mid layui-word-aux">辅助文本</div>
</div>
<!--下拉框-->
<div class="layui-form-item">
<label for="" class="layui-form-label">选择框</label>
<div class="layui-input-block">
<select name="" id="">
<option value=""></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">深圳</option>
<option value="3">杭州</option>
<option value="4">厦门</option>
</select>
</div>
</div>
<!--复选框-->
<div class="layui-form-item">
<label for="" class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" title="写作">
<input type="checkbox" title="阅读" checked>
<input type="checkbox" title="发呆">
</div>
</div>
<!--开关-->
<div class="layui-form-item">
<label for="" class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" name="switch" lay-skin="switch">
</div>
</div>
<!--单选框-->
<div class="layui-form-item">
<label for="" class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" title="男" checked>
<input type="radio" name="sex" title="女">
</div>
</div>
<!--文本域-->
<div class="layui-form-item">
<label for="" class="layui-form-label">输入框</label>
<div class="layui-input-block">
<textarea name="" class="layui-textarea"></textarea>
</div>
</div>
<!--按钮-->
<div class="layui-form-item">
<div class="layui-input-block">
<button lay-submit class="layui-btn">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
