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