4.Layui四个表单元素

七月的天色，哪怕黄昏都是清透的，脆蓝泛起火烧云，空气平滑地进入胸腔，呼吸带着天空的余味。——《云边有个小卖部》

1.使用form模块

在一个容器中设定 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>
1
2
3
4
5
6

2.四种表单元素

(1) 输入框：

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

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

(2) 下拉选择框：

<select name="city" lay-verify="">
  <option value="">请选择一个城市option>
  <option value="010">北京option>
  <option value="021">上海option>
  <option value="0571">杭州option>
select>     
1
2
3
4
5
6

option的第一项主要是占个坑，让form模块预留“请选择”的提示空间，否则将会把第一项（存在value值）作为默认选中项。

(3) 复选框：

<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆"> 
<input type="checkbox" name="" title="禁用" disabled> 



<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary"> 
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>  
1
2
3
4
5
6
7
8
9

长这样

或者这样

title用于自定义文本（如果只想显示复选框，可以不用设置title）

checked用于设定默认选中

lay-skin用于设置复选框的风格

disabled表示禁用, 就是不能选

设置value="1"可自定义值，否则选中时返回的就是默认的on

(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>
1
2
3
4
5
6
7
8

长这样

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

3.表单方框风格

用于让表单看起来更好看

通过追加 layui-form-pane 的class，来设定表单的方框风格。内部结构不变

但是, 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则会看起来比较别扭），如：

<form class="layui-form layui-form-pane" action="">
      <div class="layui-form-item" pane>
    <label class="layui-form-label">单选框label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男">
      <input type="radio" name="sex" value="女" title="女" checked>
    div>
  div>
form>
1
2
3
4
5
6
7
8
9