表單 - 頁面元素

                    在一個容器中設定 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 - 用心與你溝通

                    亚洲图色