正心全栈编程-文档站

Appearance

表单元素 ​

表单元素是输入框、选择框、复选框、开关、单选框等表单项组件，用于对表单域进行输入。layui 的表单元素对原生的表单元素进行了大幅的用着，有好看的 UI 同时又有非常方便操作的 API。

输入框 ​

https://layui.dev/docs/2.8/form/input.html

输入框组件是对文本框 <input type="text"> 和多行文本框 <textarea> 元素的扩展

普通输入框 ​

html
<body>
  <div class="layui-form">
    <input type="text" name="" placeholder="文本框" class="layui-input" />
    <hr class="ws-space-16" />
    <textarea
      name=""
      placeholder="多行文本框"
      class="layui-textarea"
    ></textarea>
  </div>
</body>

运行、访问之后就可以看到页面上显示了一个文本框一个多行文本框。

输入框点缀 ​

输入框点缀是指给普通输入框附加其他元素来进行动静态修饰，其结构包含：容器、前缀、输入框、后缀。可以用图标进行修饰

html
<div class="layui-input-group">
  <div class="layui-input-prefix">前置内容</div>
  <input type="text" class="layui-input" />
  <div class="layui-input-suffix">后缀内容</div>
</div>

提示

前置内容、后置内容 可以用图标代替

密码显隐

html
<input
  type="password"
  lay-affix="eye"
  placeholder="请输入"
  class="layui-input"
/>

内容清除

html
<input type="text" lay-affix="clear" placeholder="请输入" class="layui-input" />

选择框 ​

https://layui.dev/docs/2.8/form/select.html

选择框组件是对 <select> 元素的美化替代，延续了原有的特性，且加入了搜索等扩展。

普通选择框 ​

html
<body>
  <div class="layui-form">
    <div class="layui-col-md6">
      <select>
        <option value="">请选择</option>
        <option value="AAA">选项 A</option>
        <option value="BBB" disabled>选项 B（禁用选项）</option>
        <option value="CCC">选项 C</option>
      </select>
    </div>
  </div>
  <script src="/static/layui.js"></script>
</body>

提示

选择框依赖 js, 使用时需要导入 layui.js

  • 若第一项 value 为空，通常只作为选择框提示性引导；若第一项 value 不为空，则作为默认选中项。
  • 通过给选项添加 selected 属性优先设置默认选中项。
  • 通过给 <select> 或 <option> 标签设置 disabled 可禁用整个选择框或某个选项。

在 <select> 标签上同样支持设置表单的其他公共属性

分组选择框 ​

通过 <optgroup> 标签给选择框分组

html
<body>
  <div class="layui-form">
    <select>
      <option value="">请选择</option>
      <optgroup label="分组 A">
        <option value="A-1">选项 A-1</option>
        <option value="A-2">选项 A-2</option>
        <option value="A-3">选项 A-3</option>
      </optgroup>
      <optgroup label="分组 B">
        <option value="B-1">选项 B-1</option>
        <option value="B-2">选项 B-2</option>
      </optgroup>
    </select>
  </div>
  <script src="/static/layui.js"></script>
</body>

搜索选择框 ​

在 <select> 元素上设置 lay-search 可开启选择框的搜索功能

html
<body>
  <div class="layui-form">
    <div class="layui-col-md6">
      <select lay-search="">
        <option value="">请选择或搜索（默认不区分大小写）</option>
        <option value="1">AAA</option>
        <option value="2">aaa</option>
        <option value="3">BBB</option>
        <option value="4">bbb</option>
        <option value="5">ABC</option>
        <option value="6">abc</option>
        <option value="7">AbC</option>
      </select>
    </div>
  </div>
  <script src="/static/layui.js"></script>
</body>
  • 设置 <select lay-search="cs"> 时区分大小写
  • 搜索选择框可以进行分组

选择框事件 ​

js
form.on("select(filter)", callback);
  • select 为选择框事件固定名称
  • filter 为选择框元素对应的 lay-filter 属性值

该事件在选择框选项选中后触发。

html
<body>
  <div class="layui-form">
    <select lay-filter="demo-select-filter">
      <option value="">请选择</option>
      <option value="AAA">选项 A</option>
      <option value="BBB">选项 B</option>
      <option value="CCC">选项 C</option>
    </select>
  </div>

  <script src="/static/layui.js"></script>
  <script>
    layui.use(function () {
      var form = layui.form;
      var layer = layui.layer;
      // select 事件
      form.on("select(demo-select-filter)", function (data) {
        var elem = data.elem; // 获得 select 原始 DOM 对象
        var value = data.value; // 获得被选中的值
        var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象

        layer.msg(this.innerHTML + " 的 value: " + value); // this 为当前选中 <option> 元素对象
      });
    });
  </script>
</body>

复选框 ​

https://layui.dev/docs/2.8/form/checkbox.html

复选框组件是对 <input type="checkbox"> 元素的美化替代，在原有的特性基础上，对 UI 进行了加强。

html
<body>
  <div class="layui-form">
    <input type="checkbox" name="AAA" title="默认" />
    <input type="checkbox" name="BBB" lay-text="选中" checked />
    <input type="checkbox" name="CCC" title="禁用" disabled />
    <input type="checkbox" name="DDD" title="半选" id="ID-checkbox-ind" />
  </div>

  <script src="/static/layui.js"></script>
  <script>
    layui.use(function () {
      var form = layui.form;
      var $ = layui.$;
      // 初始设置半选
      $("#ID-checkbox-ind").prop("indeterminate", true); // 半选属性只能动态设置
      form.render("checkbox");
    });
  </script>
</body>
  • 属性 name 是默认提交的字段
  • 属性 title 可设置复选框标题
  • 属性 checked 可设置默认选中
  • 属性 disabled 可设置禁用状态
  • 属性 value 可设置值，否则选中时返回的默认值为 on（浏览器默认机制）
  • 属性 lay-skin 可设置复选框风格，可选值：tag2.8+,switch，默认风格可不填

特别地，当表单提交时，只有选中状态的复选框才能获取到 value，这点和浏览器原有的复选框机制相同。

标签风格 ​

html
<div class="layui-form">
  <input type="checkbox" name="AAA" title="默认" lay-skin="tag" />
  <input type="checkbox" name="BBB" title="选中" lay-skin="tag" checked />
  <input type="checkbox" name="CCC" title="禁用" lay-skin="tag" disabled />
</div>

开关风格 ​

html
<div class="layui-form">
  <input type="checkbox" name="AAA" lay-skin="switch" />
  <br />
  <input type="checkbox" name="BBB" title="ON|OFF" lay-skin="switch" checked />
  <br />
  <input type="checkbox" name="CCC" title="开启|关闭" lay-skin="switch" />
  <br />
  <input type="checkbox" name="DDD" lay-skin="switch" disabled />
</div>

在 title 属性中通过 | 分隔符可设置两种状态下的不同标题

复选框事件 ​

风格事件
默认风格 / 标签风格form.on('checkbox(filter)', callback);
开关风格form.on('switch(filter)', callback);
  • checkbox 和 switch 为复选框事件固定名称
  • filter 为复选框元素对应的 lay-filter 属性值

该事件在复选框选中或取消选中时触发。

html
<body>
  <div class="layui-form">
    <div class="layui-form-item">
      <input
        type="checkbox"
        name="agreement"
        value="1"
        title="是否同意"
        lay-filter="demo-checkbox-filter"
      />
    </div>
    <div class="layui-form-item">
      <button class="layui-btn" lay-submit lay-filter="demo-checkbox-submit">
        确认
      </button>
    </div>
  </div>

  <script src="/static/layui.js"></script>
  <script>
    layui.use(function () {
      var form = layui.form;
      var layer = layui.layer;
      // checkbox 事件
      form.on("checkbox(demo-checkbox-filter)", function (data) {
        var elem = data.elem; // 获得 checkbox 原始 DOM 对象
        var checked = elem.checked; // 获得 checkbox 选中状态
        var value = elem.value; // 获得 checkbox 值
        var othis = data.othis; // 获得 checkbox 元素被替换后的 jQuery 对象

        layer.msg("checked 状态: " + elem.checked);
      });
    });
  </script>
</body>

切换勾选状态时，就会有弹窗显示内容

单选框 ​

单选框组件是对 <input type="radio"> 元素的美化替代。

普通单选框 ​

html
<body>
  <div class="layui-form">
    <input type="radio" name="AAA" value="1" title="默认" />
    <input type="radio" name="AAA" value="2" title="选中" checked />
    <input type="radio" name="AAA" value="3" title="禁用" disabled />
  </div>

  <script src="/static/layui.js"></script>
</body>
  • 属性 title 可设置单选框标题
  • 属性 checked 可设置默认选中
  • 属性 disabled 可设置禁用状态
  • 属性 value 可设置值，否则选中时返回的默认值为 on（浏览器默认机制）。同组单选框一般设置相同值。

单选框事件 ​

form.on('radio(filter)', callback);
  • radio 为单选框事件固定名称
  • filter 为单选框元素对应的 lay-filter 属性值

该事件在单选框被点击或选中时触发。

html
<body>
  <div class="layui-form">
    <div class="layui-form-item">
      <input
        type="radio"
        name="AAA"
        value="1"
        title="选项1"
        lay-filter="demo-radio-filter"
        checked
      />
      <input
        type="radio"
        name="AAA"
        value="2"
        lay-filter="demo-radio-filter"
        title="选项2"
      />
      <input
        type="radio"
        name="AAA"
        value="3"
        lay-filter="demo-radio-filter"
        title="选项3"
      />
    </div>
    <div class="layui-form-item">
      <button class="layui-btn" lay-submit lay-filter="demo-radio-submit">
        确认
      </button>
    </div>
  </div>

  <script src="/static/layui.js"></script>
  <script>
    layui.use(function () {
      var form = layui.form;
      var layer = layui.layer;
      // radio 事件
      form.on("radio(demo-radio-filter)", function (data) {
        var elem = data.elem; // 获得 radio 原始 DOM 对象
        var checked = elem.checked; // 获得 radio 选中状态
        var value = elem.value; // 获得 radio 值
        var othis = data.othis; // 获得 radio 元素被替换后的 jQuery 对象

        layer.msg(["value: " + value, "checked: " + checked].join("<br>"));
      });
    });
  </script>
</body>