layui常用表单提交格式代码

admin

layui常用表单提交格式代码

1.     <!--文本框-->
   
2.                         <div class="layui-form-item" >
   
3.                             <label class="layui-form-label">长输入框</label>
   
4.                             <div class="layui-input-block">
   
5.                                 <input type="text" name="title" autocomplete="off" placeholder="请输入" lay-verify="required" class="layui-input">
   
6.                             </div>
   
7.                         </div>
   
8.                         <!--单选-->
   
9.                         <div class="layui-form-item" pane>
   
10.                             <label class="layui-form-label">单选框</label>
    
11.                             <div class="layui-input-block">
    
12.                                 <input type="radio" name="sex" value="男" title="男" checked>
    
13.                                 <input type="radio" name="sex" value="女" title="女">
    
14.                                 <input type="radio" name="sex" value="禁" title="禁用" disabled>
    
15.                             </div>
    
16.                         </div>
    
17.                         <!--复选框-->
    
18.                         <div class="layui-form-item" pane>
    
19.                             <label class="layui-form-label">复选框</label>
    
20.                             <div class="layui-input-block">
    
21.                                 <input type="checkbox" name="arr[0]" title="选项1">
    
22.                                 <input type="checkbox" name="arr[1]" title="选项2" checked>
    
23.                                 <input type="checkbox" name="arr[2]" title="选项3">
    
24.                             </div>
    
25.                         </div>
    
26.                         <!--下拉框-->
    
27.                         <div class="layui-form-item">
    
28.                             <label class="layui-form-label">下拉菜单框</label>
    
29.                             <div class="layui-input-block">
    
30.                                 <select name="interest">
    
31.                                     <option value=""></option>
    
32.                                     <option value="0">写作</option>
    
33.                                     <option value="1" selected>阅读</option>
    
34.                                     <option value="2">游戏</option>
    
35.                                     <option value="3">音乐</option>
    
36.                                     <option value="4">旅行</option>
    
37.                                 </select>
    
38.                             </div>
    
39.                         </div>
    
40.                         <!--文本域-->
    
41.                         <div class="layui-form-item layui-form-text">
    
42.                             <label class="layui-form-label">文本域</label>
    
43.                             <div class="layui-input-block">
    
44.                                 <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
    
45.                             </div>
    
46.                         </div>
    
47.                         <!--文件-->
    
48.                         <div class="layui-form-item" pane>
    
49.                                 <label class="layui-form-label">图片上传</label>
    
50.                                 <div class="layui-input-block" style="padding: 5px;padding-left: 10px;">
    
51.                                     <button type="button" class="layui-btn" id="ID-upload-demo-btn" >
    
52.                                         <i class="layui-icon layui-icon-upload"></i>图片上传
    
53.                                     </button>
    
54.                                     <a  class="layui-btn layui-bg-red" href="javascript:;" onclick="cancel(this);" jinheicx=""><i class="layui-icon layui-icon-delete"></i>删除图片</a>
    
55.                                 </div>
    
56.                                 <div class="layui-input-block">
    
57.                                     <div style="width: 132px;padding-left: 10px;padding-bottom:10px;">
    
58.                                         <div class="layui-upload-list">
    
59.                                             <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
    
60.                                             <div id="ID-upload-demo-text"></div>
    
61.                                         </div>
    
62.                                         <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
    
63.                                             <div class="layui-progress-bar" lay-percent=""></div>
    
64.                                         </div>
    
65.                                     </div>
    
66.                                 </div>
    
67.                         </div>

复制代码

代码运行如图所示：