Layui 表单美化教程:使用 Layui 样式库增强表单外观
///'使用Layui来美化表单,首先需要引入layui的样式文件和脚本文件。然后在form标签上添加class属性为///'layui-form///',在input标签上添加class属性为///'layui-input///',在select标签上添加class属性为///'layui-select///'。//n//n修改后的代码如下://n//nhtml//n<link rel=/'stylesheet/' href=/'layui/css/layui.css/'>//n<script src=/'layui/layui.js/'></script>//n//n<form id=/'myform/' action=/'method!usersave/' method=/'post/' class=/'layui-form/'>//n <input type=/'hidden/' name=/'id/' value=/'${user.id}/'/>//n <table cellpadding=0 cellspacing=0 class=/'table_form/' width=/'100%/'>//n <tr>//n <td width=/'120/'>邮箱</td>//n <td><input type=/'text/' class=/'layui-input/' name=/'email/'//n lay-verify=/'required|email|minlength:1|maxlength:40/'/></td>//n </tr>//n//n <tr>//n <td>昵称</td>//n <td><input type=/'text/' id=/'username/' name=/'username/' class=/'layui-input/'//n lay-verify=/'required|minlength:2|maxlength:40/'/></td>//n </tr>//n <tr>//n <td>密码</td>//n <td><input type=/'password/' class=/'layui-input/' name=/'password/'//n lay-verify=/'required|minlength:6|maxlength:40/'/></td>//n </tr>//n <tr>//n <td>用户组</td>//n <td>//n <select name=/'role/' lay-verify=/'required/' class=/'layui-select/'>//n <option value=/'0/' <c:if test=/'${user.role == 0}/'>selected</c:if>>普通用户</option>//n <option value=/'1/' <c:if test=/'${user.role==1}/'>selected</c:if>>管理员</option>//n </select>//n </td>//n </tr>//n//n </table>//n//n <div class=/'btn/'>//n <input type=/'hidden/' name=/'forward/' value=/'/'/>//n <input type=/'submit/' value=/'提交/' class=/'layui-btn/'>//n <input type=/'reset/' value=/'取消/' class=/'layui-btn layui-btn-primary/'>//n <input onclick=/'javascript:history.go(-1);/' class=/'layui-btn/' type=/'button/' value=/'返回/'/>//n </div>//n</form>//n//n//n注意:需要确保引入了layui的样式文件和脚本文件,并且在form标签上添加class属性为///'layui-form///',在input标签上添加class属性为///'layui-input///',在select标签上添加class属性为///'layui-select///'。另外,验证规则需要使用lay-verify属性来设置,例如lay-verify=/'required|email|minlength:1|maxlength:40/'。//n//n///
原文地址: https://www.cveoy.top/t/topic/ppjU 著作权归作者所有。请勿转载和采集!