1、表单（需要加载form模块）

在表单中设定class="layui-form"来识别表单元素块

外部新建一个div，class="layui-form-item"

内部创建lable class="layui-form-label"

再创建一个div class="layui-input-block"独占一行/class="layui-input-inline"，占部分宽度

class="layui-input表示是input框；

image.png

添加验证后 require（必填字段）

lay-verify=""(需要验证的信息，如phone、number、email、)

文本框

· placeholder：提示语

·autocomplete="off"：表单是否自动填充之前输入记录，off关闭，on开启

<form class="layui-form" action="">
            <!--
                外部新建一个div，class="layui-form-item"
                内部创建lable class="layui-form-label"
                再创建一个div class="layui-input-block"独占一行/class="layui-input-inline"，占内容较小
                input中添加class="layui-input"一个通用样式
                
            -->         
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" required lay-verify="required" placeholder="请输入姓名" autocomplete="off"/>
                </div>
            </div>
            
            <!--按钮-->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <buttom class="layui-btn" lay-submit lay-fiter="formDemo">立即提交</buttom>
                    <buttom type="reset" class="layui-btn layui-btn-primary">重置</buttom>
                </div>
            </div>
        </form>

2、下拉选择框（写在button上面，否则不生效）

2.1通过selected属性来设置选中项

2.2通过disabled属性开启禁用，可以设置slect和option标签（禁用下拉框和禁用下拉选项）

2.3通过optgroup标签给select分组

2.4通过设置lay-serach属性开启搜索匹配功能

image.png

3、下拉框

3.1大框下拉框

<div class="layui-form-item">
                <label class="layui-form-label">爱好</label>
                <!--block:一行展示-->
                <div class="layui-input-block">
                    <input type="checkbox" title="唱歌"/>
                    <input type="checkbox" title="跳舞"/>
                    <input type="checkbox" title="打球"/>
                </div>
</div>

image.png

3.1小框下拉框（lay-skin="primary）

<div class="layui-form-item">
                <label class="layui-form-label">爱好</label>
                <!--block:一行展示-->
                <div class="layui-input-block">
                    <input type="checkbox" title="唱歌" lay-skin="primary"/>
                    <input type="checkbox" title="跳舞" lay-skin="primary"/>
                    <input type="checkbox" title="打球" lay-skin="primary"/>
                </div>
</div>

image.png

3.3 通过 title="" 来设置自定义提示文本 disabled:禁选中 checked：默认选中，

3.4value="",为提交到后台的值

    <div class="layui-form-item">
                <label class="layui-form-label">爱好</label>
                <!--block:一行展示-->
                <div class="layui-input-block">
                    <input type="checkbox" title="唱歌" lay-skin="primary" value="sing" />
                    <input type="checkbox" title="跳舞" lay-skin="primary" value="dance"/>
                    <input type="checkbox" title="打球" lay-skin="primary" value="palybool"/>
                </div>
   </div>

4、

通过将复选框，lay-skin="switch"形成开关风格

-1通过lay-text="打开值|关闭值"，来设定开关的两种状态，通过|分割
-2通过checked设置默认打开状态
-3通过disbaled属性来禁用开关
-4通过value属性设置选中的值

<div class="layui-input-block">
    <input type="checkbox" name="a" lay-skin="switch" />
    <input type="checkbox" name="a" lay-skin="switch"  checked/>
    <input type="checkbox" name="a" lay-skin="switch" checked lay-text="打开|关闭" value="关闭"/>
    <input type="checkbox" name="a" lay-skin="switch" />
</div>

image.png

5.单选框:(前提是具备相同的name属性值)

-1通过checked设置默认打开状态
-2通过disbaled属性来禁用开关
-3通过value属性设置选中的值

<div class="layui-form-item">
                <label class="layui-form-label">单选框</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" id="" value="1" title="男" />
                    <input type="radio" name="sex" id="" value="2" title="女"  checked/>
                    <input type="radio" name="sex" id="" value="3" title="中性" disabled=""/>
                </div>
</div>

image.png

6.文本域

<!--文本域-->
            <div class="layui-form-item">
                <label class="layui-form-label">文本域</label>
                <div class="layui-input-inline">
                    <textarea class="layui-textarea" name="remark" required lay-verify="required" placeholder="请输入备注"></textarea>
                </div>
            </div>

image.png

7.组装行内表单

组装行内表单
class="layui-inline"定义外层行内
class="layui-input-inline"定义内层行内

<div class="layui-form-item">
 
  <div class="layui-inline">
    <label class="layui-form-label">范围</label>
    <div class="layui-input-inline" style="width: 100px;">
      <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid">-</div>
    <div class="layui-input-inline" style="width: 100px;">
      <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-inline">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline" style="width: 100px;">
      <input type="password" name="" autocomplete="off" class="layui-input">
    </div>
  </div>
  
</div>

8.方框表格

表单中加入layui-form-pane，可以成为方框表格；

image.png

<form class="layui-form layui-form-pane" action="">