Layui表单元素.上

学习要点：

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 >