一、引入CSS文件
<link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all"> <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
二、HTML表单
包含常用的文本框、下拉列表框、单选框、复选框、按钮等表单元素
<div class="layui-card"> <div class="layui-card-header">响应式组合</div> <div class="layui-card-body"> <form class="layui-form" action="" lay-filter="component-form-element"> <div class="layui-row layui-col-space10 layui-form-item"> <div class="layui-col-lg6"> <label class="layui-form-label">员工姓名:</label> <div class="layui-input-block"> <input type="text" name="fullname" id="xm" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-col-lg6"> <label class="layui-form-label">技术工种:</label> <div class="layui-input-block"> <select name="type" lay-verify="required" lay-filter="aihao"> <option value=""></option> <option value="0">前端工程师</option> <option value="1">Node.js工程师</option> <option value="2">PHP工程师</option> <option value="3">Java工程师</option> <option value="4">运维</option> <option value="4">视觉设计师</option> </select> </div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">兴趣爱好:</label> <div class="layui-input-block"> <input type="checkbox" name="interest[write]" title="写作"> <input type="checkbox" name="interest[read]" title="阅读"> <input type="checkbox" name="interest[code]" title="代码" checked> <input type="checkbox" name="interest[dreaming]" title="做梦"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">文件上传:</label> <div class="layui-input-block"> <input type="file" id="up_file"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">是否婚姻:</label> <div class="layui-input-block"> <input type="checkbox" name="marriage" lay-skin="switch" lay-text="是|否"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">所属职称:</label> <div class="layui-input-block"> <input type="radio" name="role" value="" title="经理"> <input type="radio" name="role" value="" title="主管"> <input type="radio" name="role" value="" title="码农" checked> <input type="radio" name="role" value="" title="端水"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">其它信息:</label> <div class="layui-input-block"> <textarea name="other" placeholder="" class="layui-textarea"></textarea> </div> </div> <div class="layui-form-item"> <label class="layui-form-label"> </label> <div class="layui-input-block"> <input type="checkbox" name="agreement" title="同意" lay-skin="primary" checked> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="component-form-element">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </div> </div> </div>
三、引入JS文件
<script src="../layuiadmin/layui/layui.js"></script>
四、JS代码
<script> layui.use('form', function(){ var form = layui.form; }); </script>