<del id="kmqwi"><b id="kmqwi"></b></del>
      <track id="kmqwi"><del id="kmqwi"></del></track>
    1. <table id="kmqwi"></table>
      <acronym id="kmqwi"><strong id="kmqwi"></strong></acronym>
    2. 
      
      <p id="kmqwi"><strong id="kmqwi"></strong></p>
    3. 表單 - 頁面元素

      在一個容器中設定 class="layui-form" 來標識一個表單元素塊,通過規范好的HTML結構及CSS類,來組裝成各式各樣的表單元素,并通過內置的 form模塊 來完成各種交互。
      依賴加載模塊:form (請注意:如果不加載form模塊,select、checkbox、radio等將無法顯示,并且無法使用form相關功能)
      輔助文字
      通過上述的小小演示,你已經大致了解了一波 layui 的表單模塊,你可能會覺得她還算不錯,但并不太過癮?譬如你希望看到日期選擇、圖片上傳等等。然而你必須認識到,本篇文檔核心介紹的是表單元素,對于日期、上傳等更多豐富的元素,其實也是可以很方便地穿插在內的。

      下述是【小睹為快】的HTML結構:

      <form class="layui-form" action="">
        <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>
        <div class="layui-form-item">
          <label class="layui-form-label">密碼框</label>
          <div class="layui-input-inline">
            <input type="password" name="password" required lay-verify="required" placeholder="請輸入密碼" autocomplete="off" class="layui-input">
          </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">
            <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>
        <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[dai]" title="發呆">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">開關</label>
          <div class="layui-input-block">
            <input type="checkbox" name="switch" lay-skin="switch">
          </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="男">
            <input type="radio" name="sex" value="女" title="女" checked>
          </div>
        </div>
        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">文本域</label>
          <div class="layui-input-block">
            <textarea name="desc" placeholder="請輸入內容" class="layui-textarea"></textarea>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
       
      <script>
      //Demo
      layui.use('form', function(){
        var form = layui.form;
        
        //監聽提交
        form.on('submit(formDemo)', function(data){
          layer.msg(JSON.stringify(data.field));
          return false;
        });
      });
      </script>
            

      UI的最終呈現得益于 Form模塊 的全自動渲染,她將原本普通的諸如select、checkbox、radio等元素重置為你所看到的模樣。或許你可以移步左側導航的 內置模塊 中的 表單 對其進行詳細的了解。

      而本篇介紹的是表單元素本身,譬如規定的區塊、CSS類、原始控件等。他們共同組成了一個表單體系。

      下述是基本的行區塊結構,它提供了響應式的支持。但如果你不大喜歡,你可以換成你的結構,但必須要在外層容器中定義class="layui-form",form模塊才能正常工作。

      <div class="layui-form-item">
        <label class="layui-form-label">標簽區域</label>
        <div class="layui-input-block">
          原始表單元素區域
        </div>
      </div>
            
      <input type="text" name="title" required lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input">    
            

      required:注冊瀏覽器所規定的必填字段
      lay-verify:注冊form模塊需要驗證的類型
      class="layui-input":layui.css提供的通用CSS類

      這些在下文都不再做重復介紹

      <select name="city" lay-verify="">
        <option value="">請選擇一個城市</option>
        <option value="010">北京</option>
        <option value="021">上海</option>
        <option value="0571">杭州</option>
      </select>     
            

      上述option的第一項主要是占個坑,讓form模塊預留“請選擇”的提示空間,否則將會把第一項(存在value值)作為默認選中項。你可以在option的空值項中自定義文本,如:請選擇分類。

      你可以通過設定 selected 來設定默認選中項:

      <select name="city" lay-verify="">
        <option value="010">北京</option>
        <option value="021" disabled>上海(禁用效果)</option>
        <option value="0571" selected>杭州</option>
      </select>     
            

      你還可以通過 optgroup 標簽給select分組:

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

      以及通過設定屬性 lay-search 來開啟搜索匹配功能

      <select name="city" lay-verify="" lay-search>
        <option value="010">layer</option>
        <option value="021">form</option>
        <option value="0571" selected>layim</option>
        ……
      </select>     
            
      屬性selected可設定默認項
      屬性disabled開啟禁用,select和option標簽都支持
      默認風格:
      <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> 
            

      屬性title可自定義文本(溫馨提示:如果只想顯示復選框,可以不用設置title)
      屬性checked可設定默認選中
      屬性lay-skin可設置復選框的風格
      設置value="1"可自定義值,否則選中時返回的就是默認的on

      其實就是checkbox復選框的“變種”,通過設定 lay-skin="switch" 形成了開關風格

      <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

      <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

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

      class="layui-textarea":layui.css提供的通用CSS類

      -
      <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 class="layui-inline">
          <label class="layui-form-label">密碼</label>
          <div class="layui-input-inline" style="width: 100px;">
            <input type="password" name="" autocomplete="off" class="layui-input">
          </div>
        </div>
        
      </div>
            

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

      你可以對表單元素增加屬性 lay-ignore 設置后,將不會對該標簽進行美化渲染,即保留系統風格,比如:

      <select lay-ignore>
        <option>…</option>
      </select>
            

      一般不推薦這樣做。事實上form組件所提供的接口,對其渲染過的元素,足以應付幾乎所有的業務需求。如果忽略渲染,可能會讓UI風格不和諧

      輔助文字

      通過追加 layui-form-pane 的class,來設定表單的方框風格。內部結構不變。我們的Fly社區用的就是這個風格。

      <form class="layui-form layui-form-pane" action="">
        內部結構都一樣,值得注意的是 復選框/開關/單選框 這些組合在該風格下需要額外添加 pane屬性(否則會看起來比較別扭),如:
        <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>
            

      Layui版本穩定后,會抽空推出一個表單元素生成工具,這樣似乎就更方便地組裝你的表單了呀。

      layui - 用心與你溝通

      亚洲图色