用layui美化 form id=myform action=method!updatepwdsave method=post input type=hidden name=id value=$userid table cellpadding=0 cellspacing=0 class=table_form width=100 tr
<p>使用layui美化表单,需要引入layui的样式和脚本文件。</p>
<p>首先,在<head>标签中引入layui的样式文件和脚本文件:</p>
<pre><code class="language-html"><link rel="stylesheet" href="https://www.layuicdn.com/layui/v2.6.8/css/layui.css">
<script src="https://www.layuicdn.com/layui/v2.6.8/layui.js"></script>
</code></pre>
<p>然后,在表单元素的class属性中添加layui的样式类名:</p>
<pre><code class="language-html"><form id="myform" action="method!updatepwdsave" method="post" class="layui-form">
<input type="hidden" name="id" value="${user.id}"/>
<table cellpadding=0 cellspacing=0 class="layui-table table_form" width="100%">
<tr>
<td>原来密码</td>
<td><input type="password" class="layui-input input-text" name="oldpassword" value=""></td>
</tr>
<tr>
<td>新设密码</td>
<td><input type="password" class="layui-input input-text" name="password" value=""></td>
</tr>
<tr>
<td>再来一次</td>
<td><input type="password" class="layui-input input-text" name="repassword" value=""></td>
</tr>
</table>
<div class="btn">
<input type="hidden" name="forward" value=""/>
<input type="submit" value="提交" class="layui-btn layui-btn-normal button">
<input type="reset" value="取消" class="layui-btn layui-btn-primary button">
</div>
</form>
</code></pre>
<p>接着,在<script>标签中,使用layui的form模块对表单进行渲染:</p>
<pre><code class="language-html"><script>
layui.use('form', function(){
var form = layui.form;
//执行渲染
form.render();
});
</script>
</code></pre>
<p>以上代码就是使用layui美化表单的基本步骤。通过添加layui的样式类名和使用layui的form模块对表单进行渲染,可以实现美化效果</p>
原文地址: http://www.cveoy.top/t/topic/hGmY 著作权归作者所有。请勿转载和采集!