Layui框架：layui的常用组件[表单]

1、Layui图标组件

layui的所有图标全部采用字体形式(单一色彩)，取材于阿里巴巴的矢量图标库。

使用方法：

通过对一个内联元素(一般使用的是i标签)，设定class=="layui-icon"，来定义一个图标，然后对元素加上图标对应的font-class，即可显示出对应的图标。

<div class="layui-container">
  <div class="layui-row">
      <div class="layui-col-md5">
          图标
          <i class="layui-icon layui-icon-face-smile"></i>
      </div>
       <div class="layui-col-md5 layui-col-md-offset2">
          内容区
       </div>
  </div>
</div>

2、Layui按钮组件

向任意HTML元素设定class="layui-btn"，建立一个基础按钮，通过追加格式为layui-btn-{type}的class来定义其他按钮风格，内置的按钮class可以进行任意组合，从而形成更多风格的按钮，所有的按钮统一使用button标签来实现。不要使用input下的type="button"。

使用方法：

新建button元素，然后在元素上加上layui-btn的类名

<div class="layui-container">
  <div class="layui-row">
    <div class="layui-col-md6">
        <button class="layui-btn">按钮<button>
    </div>
    <div class="layui-col-md6">
        内容
    </div>
  </div>
</div>

3、Layui输入框组件

required:注册浏览器所规定的必填字段，必备
lay-verify:注册form模块需要验证的类型，必备，值得类型表明浏览器会按照哪种数据的格式来进行验证和提示。
class="layui-input"：layui.css提供的通用css类，必备。
autocomplete：用户输入信息时，浏览器是否给用户提示信息。

  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>

4、Layui下拉选择框组件

select内option的第一项主要是占个坑，让form模块预留“请选择”的提示空间，否则将会把第一项(存在value值)作为默认的选中项。
原生的select option元素无法装饰，因此所有UI框架都是采用的元素模拟的方式来实现，即将原生的select元素隐藏，用js生成其他并设置样式，所以需要在网页上激活UI框架的渲染功能。

 <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
      <select name="city" lay-verify="required">
        <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>

下拉框组件的optgroup

optgroup标签给select分组，每个分组的提示信息由optgroup元素的label属性的值决定的。

<select name="quiz">
  <option value="">请选择</option>
  <optgroup label="城市记忆">
    <option value="你工作的第一个城市">你工作的第一个城市？</option>
  </optgroup>
  <optgroup label="学生时代">
    <option value="你的工号">你的工号？</option>
    <option value="你最喜爱的老师">你最喜爱的老师？</option>
  </optgroup>
</select>

5、Layui复选框组件

layui的复选框组件中，title是设定元素的名称，一般用于checkbox、radio框，lay-skin：定义checkbox元素的风格，不设置为默认风格，primary为原始风格。

默认风格：
<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>

6、Layui的switch开关组件

当lay-skin的值为switch时，title的文字失效，开关前后的状态显示的文字由lay-text内决定，格式为：选中提示文字|未选中提示文字。

<input type="checkbox" name="xxx" lay-skin="switch">
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
<input type="checkbox" name="aaa" lay-skin="switch" disabled>

7、Layui的单选按钮组件

title：设定的元素名称，一般用于checkbox、radio框。
layui框架使用js生成了一个div结构用来展示title标签的文字和模拟选中时的logo效果，而原生的input元素则被隐藏掉，disabled开启禁用，设置value来实现自定义的值，否则选中时返回的就是默认的on.

<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>