文件地址：

https://www.layui.com/demo/form.html

表單元素：

1、輸入框

2、密碼框

3、下拉列表

4、單選框

5、複選框

6、文件域

7、富文字

8、開關

單行輸入框：

<div class="layui-form-item">
    <label class="layui-form-label">使用者名稱</label>
    <div class="layui-input-block">
        <input type="text" name="username" lay-verify="title"
 
 autocomplete="off" placeholder="使用者名稱" class="layui-input">
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">密碼</label>
    <div class="layui-input-block">
        <input type="password" name="password" lay-verify="title" autocomplete
 
="off" placeholder="密碼" class="layui-input">
    </div>
</div>

行內輸入框：

非完全行內輸入

使用類屬性layui-inline進行容器元素渲染實現

<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">多規則驗證</label>
        <div class="layui-input-inline"
 
>
            <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">驗證日期</label>
        <div class="layui-input-inline">
            <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">驗證連結</label>
        <div class="layui-input-inline">
            <input type="tel" name="url" lay-verify="url" autocomplete="off" class="layui-input">
        </div>
    </div>
</div>

身份證驗證：

<div class="layui-form-item">
    <label class="layui-form-label">驗證身份證</label>
    <div class="layui-input-block">
        <input type="text" name="identity" lay-verify="identity" placeholder="" autocomplete="off" class="layui-input">
    </div>
</div>

自定義驗證：

<div class="layui-form-item">
    <label class="layui-form-label">自定義驗證</label>
    <div class="layui-input-inline">
      <input type="password" name="password" lay-verify="pass" placeholder="請輸入密碼" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">請填寫6到12位密碼</div>
  </div>

JS程式碼：

        //自定義驗證規則
        form.verify({
            title: function(value){
                if(value.length < 5){
                    return '標題至少得5個字元啊';
                }
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密碼必須6到12位，且不能出現空格'
            ]
            ,content: function(value){
                layedit.sync(editIndex);
            }

取值範圍：

<div class="layui-form-item">
    <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>
  </div>

下拉列表：

單行下拉列表：

<div class="layui-form-item">
    <label class="layui-form-label">單行選擇框</label>
    <div class="layui-input-block">
      <select name="interest" lay-filter="aihao">
        <option value=""></option>
        <option value="0">寫作</option>
        <option value="1" selected="">閱讀</option>
        <option value="2">遊戲</option>
        <option value="3">音樂</option>
        <option value="4">旅行</option>
      </select>
    </div>
  </div>

分組下拉，搜尋下拉

<div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">分組選擇框</label>
      <div class="layui-input-inline">
        <select name="quiz">
          <option value="">請選擇問題</option>
          <optgroup label="城市記憶">
            <option value="你工作的第一個城市">你工作的第一個城市</option>
          </optgroup>
          <optgroup label="學生時代">
            <option value="你的工號">你的工號</option>
            <option value="你最喜歡的老師">你最喜歡的老師</option>
          </optgroup>
        </select>
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">搜尋選擇框</label>
      <div class="layui-input-inline">
        <select name="modules" lay-verify="required" lay-search="">
          <option value="">直接選擇或搜尋選擇</option>
          <option value="1">layer</option>
          <option value="2">form</option>
          <option value="3">layim</option>
          <option value="4">element</option>
          <option value="5">laytpl</option>
          <option value="6">upload</option>
          <option value="7">laydate</option>
          <option value="8">laypage</option>
          <option value="9">flow</option>
          <option value="10">util</option>
          <option value="11">code</option>
          <option value="12">tree</option>
          <option value="13">layedit</option>
          <option value="14">nav</option>
          <option value="15">tab</option>
          <option value="16">table</option>
          <option value="17">select</option>
          <option value="18">checkbox</option>
          <option value="19">switch</option>
          <option value="20">radio</option>
        </select>
      </div>
    </div>
  </div>

聯動下拉【沒有聯動互動】

<div class="layui-form-item">
    <label class="layui-form-label">聯動選擇框</label>
    <div class="layui-input-inline">
      <select name="quiz1">
        <option value="">請選擇省</option>
        <option value="浙江" selected="">浙江省</option>
        <option value="你的工號">江西省</option>
        <option value="你最喜歡的老師">福建省</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="quiz2">
        <option value="">請選擇市</option>
        <option value="杭州">杭州</option>
        <option value="寧波" disabled="">寧波</option>
        <option value="溫州">溫州</option>
        <option value="溫州">台州</option>
        <option value="溫州">紹興</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="quiz3">
        <option value="">請選擇縣/區</option>
        <option value="西湖區">西湖區</option>
        <option value="餘杭區">餘杭區</option>
        <option value="拱墅區">臨安市</option>
      </select>
    </div>
    <div class="layui-form-mid layui-word-aux">此處只是演示聯動排版，並未做聯動互動</div>
  </div>

複選框：

<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[game]" title="遊戲">
    </div>
  </div>
  
  <div class="layui-form-item" pane="">
    <label class="layui-form-label">原始複選框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like1[write]" lay-skin="primary" title="寫作" checked="">
      <input type="checkbox" name="like1[read]" lay-skin="primary" title="閱讀">
      <input type="checkbox" name="like1[game]" lay-skin="primary" title="遊戲" disabled="">
    </div>
  </div>

開關設定

<div class="layui-form-item">
    <label class="layui-form-label">開關-預設關</label>
    <div class="layui-input-block">
      <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">開關-預設開</label>
    <div class="layui-input-block">
      <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
    </div>
  </div>

單選框：

  <div class="layui-form-item">
    <label class="layui-form-label">單選框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男" checked="">
      <input type="radio" name="sex" value="女" title="女">
      <input type="radio" name="sex" value="禁" title="禁用" disabled="">
    </div>
  </div>

文字域：

普通文字域：

<div class="layui-form-item layui-form-text">
    <label class="layui-form-label">普通文字域</label>
    <div class="layui-input-block">
      <textarea placeholder="請輸入內容" class="layui-textarea"></textarea>
    </div>
  </div>

編輯器：

<div class="layui-form-item layui-form-text">
    <label class="layui-form-label">編輯器</label>
    <div class="layui-input-block">
        <textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="LAY_demo_editor"></textarea>
    </div>
</div>

<script type="text/javascript">
    layui.use(['form', 'layedit', 'laydate'], function(){
        let form = layui.form;
        let layer = layui.layer;
        let layedit = layui.layedit;
        let laydate = layui.laydate;

        //建立一個編輯器
        let editIndex = layedit.build('LAY_demo_editor');
</script>

提交按鈕，重置按鈕：

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

JS補充：

<script>
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
  
  //日期
  laydate.render({
    elem: '#date'
  });
  laydate.render({
    elem: '#date1'
  });
  
  //建立一個編輯器
  var editIndex = layedit.build('LAY_demo_editor');
 
  //自定義驗證規則
  form.verify({
    title: function(value){
      if(value.length < 5){
        return '標題至少得5個字元啊';
      }
    }
    ,pass: [
      /^[\S]{6,12}$/
      ,'密碼必須6到12位，且不能出現空格'
    ]
    ,content: function(value){
      layedit.sync(editIndex);
    }
  });
  
  //監聽指定開關
  form.on('switch(switchTest)', function(data){
    layer.msg('開關checked：'+ (this.checked ? 'true' : 'false'), {
      offset: '6px'
    });
    layer.tips('溫馨提示：請注意開關狀態的文字可以隨意定義，而不僅僅是ON|OFF', data.othis)
  });
  
  //監聽提交
  form.on('submit(demo1)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最終的提交資訊'
    })
    return false;
  });
 
  //表單賦值
  layui.$('#LAY-component-form-setval').on('click', function(){
    form.val('example', {
      "username": "賢心" // "name": "value"
      ,"password": "123456"
      ,"interest": 1
      ,"like[write]": true //複選框選中狀態
      ,"close": true //開關狀態
      ,"sex": "女"
      ,"desc": "我愛 layui"
    });
  });
  
  //表單取值
  layui.$('#LAY-component-form-getval').on('click', function(){
    var data = form.val('example');
    alert(JSON.stringify(data));
  });
  
});
</script>