layui表單總結

表單form在layui裡的類名是：layui-form；控制元件使用的類名是layui-form-item;lebal說明框的類名：layui-form-label

容器是行內還是塊級類名：layui-input-block 或者layui-input-inline

<form class="layui-form" action="">
<div class="layui-form-item">
    <label class="layui-form-label">輸入框</label>
    <div class="layui-input-block">
    //。。。。。
    </div>
</div>
</form>
 

1  輸入框

layui.code
<input type="text" name="title" required lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input"> 

required：註冊瀏覽器所規定的必填欄位 

class="layui-input"：layui.css提供的通用CSS類 
lay-verify：註冊form模組需要驗證的型別  值包括以下：

required（必填項） phone（手機號） email（郵箱） url（網址） number（數字） date（日期） identity（身份證）

同時支援多條規則的驗證，格式：lay-verify=”驗證A|驗證B” 
如：lay-verify=”required|phone|number”

2 ：下拉選項框

你還可以通過 optgroup 標籤給select分組;以及通過設定屬性 lay-search 來開啟搜尋匹配功能：

   <select name="quiz" lay-search>
      <option value="">請選擇</option>
          <optgroup label="城市記憶">
            <option value="你工作的第一個城市">你工作的第一個城市？</option>
          </optgroup>
          <optgroup label="學生時代">
            <option value="你的工號">你的工號？</option>
            <option value="你最喜歡的老師">你最喜歡的老師？</option>
      </optgroup>
</select>
 

3  複選框

<input type="checkbox" name="" title="寫作" checked>
<input type="checkbox" name="" title="發呆" lay-skin="primary"> 
<input type="checkbox" name="" title="禁用" disabled>

屬性title可自定義文字（溫馨提示：如果只想顯示覆選框，可以不用設定title） 
屬性checked可設定預設選中 
屬性lay-skin可設定複選框的風格 
設定value="1"可自定義值，否則選中時返回的就是預設的on

4 開關

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

屬性checked可設定預設開 
屬性disabled開啟禁用 
屬性lay-text可自定義開關兩種狀態的文字 
設定value="1"可自定義值，否則選中時返回的就是預設的on

5 單選框

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

屬性title可自定義文字 
屬性disabled開啟禁用 
設定value="xxx"可自定義值，否則選中時返回的就是預設的on

6 文字域

類名   class="layui-textarea"

<textarea name="" required lay-verify="required" placeholder="請輸入" class="layui-textarea"></textarea>

7 內層行內與外層行內

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

class="layui-inline"：定義外層行內 
class="layui-input-inline"：定義內層行內

PS：對錶單元素增加屬性 lay-ignore 設定後，將不會對該標籤進行美化渲染，即保留系統風格