表单元素
輸入框
密碼框
下拉列表【重新渲染】
是加入layui-form 引入form模塊
lay-search=""??是否支持下拉輸入過濾
單選框【重新渲染】
是加入layui-form 引入form模塊
復選框【重新渲染】
是加入layui-form 引入form模塊
lay-skin="primary"??使用原始的樣式
開關【重新渲染】
是加入layui-form 引入form模塊
使用checkbox實現
lay-skin="switch"??使用皮膚
文本域
富文本
?
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>表單元素</title><link rel="stylesheet" href="resources/layui/css/layui.css"></head> <body style="padding: 20px"><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" lay-verify="true" 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="title" lay-verify="true"autocomplete="off" placeholder="用戶名密碼" class="layui-input"></div></div><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">驗證手機</label><div class="layui-input-inline"><input type="tel" name="phone" lay-verify="required|phone"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="email" lay-verify="email"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" lay-search=""><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="jiguan" lay-filter="jiguan"><option value=""></option><option value="0">湖北</option><option value="1" selected="">湖南</option><option value="2">北京</option></select></div></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"><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="開|關"></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></form><script src="resources/layui/layui.js"></script> <script type="text/javascript">layui.use(['element', 'jquery', 'form', 'layedit'], function () {var $ = layui.jquery;var element = layui.element;var form = layui.form;var layedit = layui.layedit;//創建一個編輯器var editIndex = layedit.build('LAY_demo_editor');}); </script> </body> </html>
總結
- 上一篇： 扩展springmvc组件——当页面跳转
- 下一篇： 表单对象 form