学习要点：
1. 表单元素
本节课我们来开始了解 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" >
< input type ="text" class ="layui-input" placeholder =" 请输入用户名 " >
</ 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 >
