layui学习之10form表单元素

表单 - 页面元素

在一个容器中设定 class="layui-form" 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。

依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）

 

<div class="layui-form-item">
  <label class="layui-form-label">标签区域</label>
  <div class="layui-input-block">
    原始表单元素区域
  </div>
</div>
      

 

样式：<class="layui-input-block"> 代表一块独占整行

<class="layui-input-inline"> 则不会占据整行

 

class="layui-input"：输入框

 

 

1.输入框：

 

 

 

layui.code
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">  

 

required：注册浏览器所规定的必填字段 
lay-verify：注册form模块需要验证的类型 
class="layui-input"：layui.css提供的通用CSS类

 

2.密码框

 

 

 

<div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-inline">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>

 

 

3.下拉列表

 <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-inline">
                <select name="city" lay-verify="required" lay-search>
                    <option value=""></option>
                    <option value="0" disabled>北京</option>
                    <option value="1">上海</option>
                    <option value="2">广州</option>
                    <option value="3">深圳</option>
                    <option value="4" selected>杭州</option>
                </select>
            </div>
        </div>

样式：<div class="layui-input-inline">：不会占据整行

属性：lay-search：以及通过设定属性 lay-search 来开启搜索匹配功能

 

 

 你可以通过设定 selected 来设定默认选中项，disabled禁止选中项

 

4.单选框

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

属性title可自定义文本 
属性disabled开启禁用 
设置value="xxx"可自定义值，否则选中时返回的就是默认的on

 

5.复选框

 

 

 

<div class="layui-form-item">
        <label class="layui-form-label">复选框</label>
        <div class="layui-input-block">
            <input type="checkbox" name="like[write]" title="写作">
            <input type="checkbox" name="like[read]" title="阅读" checked>
            <input type="checkbox" name="like[dai]" title="发呆">
        </div>
    </div>

 

属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title） 
属性checked可设定默认选中 
属性lay-skin可设置复选框的风格 
设置value="1"可自定义值，否则选中时返回的就是默认的on

 

 

 

 

6.开关

 

 

 

<div class="layui-form-item">
        <label class="layui-form-label">开关</label>
        <div class="layui-input-block">
            <input type="checkbox" name="switch" lay-skin="switch">
        </div>
    </div>

属性checked可设定默认开 
属性disabled开启禁用 
属性lay-text可自定义开关两种状态的文本 
设置value="1"可自定义值，否则选中时返回的就是默认的on

 

7.文本域

 

 

 

<div class="layui-form-item layui-form-text">
        <label class="layui-form-label">文本域</label>
        <div class="layui-input-block">
            <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>

class="layui-textarea"：layui.css提供的通用CSS类 

8.提交按钮 属性:lay-submit

 

 

<div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>