<p>使用layui美化表单,需要引入layui的样式和脚本文件。</p>
<p>首先,在<head>标签中引入layui的样式文件和脚本文件:</p>
<pre><code class="language-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;https://www.layuicdn.com/layui/v2.6.8/css/layui.css&quot;&gt;
&lt;script src=&quot;https://www.layuicdn.com/layui/v2.6.8/layui.js&quot;&gt;&lt;/script&gt;
</code></pre>
<p>然后,在表单元素的class属性中添加layui的样式类名:</p>
<pre><code class="language-html">&lt;form id=&quot;myform&quot; action=&quot;method!updatepwdsave&quot; method=&quot;post&quot; class=&quot;layui-form&quot;&gt;
    &lt;input type=&quot;hidden&quot; name=&quot;id&quot; value=&quot;${user.id}&quot;/&gt;
    &lt;table cellpadding=0 cellspacing=0 class=&quot;layui-table table_form&quot; width=&quot;100%&quot;&gt;

        &lt;tr&gt;
            &lt;td&gt;原来密码&lt;/td&gt;
            &lt;td&gt;&lt;input type=&quot;password&quot; class=&quot;layui-input input-text&quot; name=&quot;oldpassword&quot; value=&quot;&quot;&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;新设密码&lt;/td&gt;
            &lt;td&gt;&lt;input type=&quot;password&quot; class=&quot;layui-input input-text&quot; name=&quot;password&quot; value=&quot;&quot;&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;再来一次&lt;/td&gt;
            &lt;td&gt;&lt;input type=&quot;password&quot; class=&quot;layui-input input-text&quot; name=&quot;repassword&quot; value=&quot;&quot;&gt;&lt;/td&gt;
        &lt;/tr&gt;

    &lt;/table&gt;

    &lt;div class=&quot;btn&quot;&gt;
        &lt;input type=&quot;hidden&quot; name=&quot;forward&quot; value=&quot;&quot;/&gt;
        &lt;input type=&quot;submit&quot; value=&quot;提交&quot; class=&quot;layui-btn layui-btn-normal button&quot;&gt;
        &lt;input type=&quot;reset&quot; value=&quot;取消&quot; class=&quot;layui-btn layui-btn-primary button&quot;&gt;
    &lt;/div&gt;
&lt;/form&gt;
</code></pre>
<p>接着,在<script>标签中,使用layui的form模块对表单进行渲染:</p>
<pre><code class="language-html">&lt;script&gt;
    layui.use('form', function(){
        var form = layui.form;
        //执行渲染
        form.render();
    });
&lt;/script&gt;
</code></pre>
<p>以上代码就是使用layui美化表单的基本步骤。通过添加layui的样式类名和使用layui的form模块对表单进行渲染,可以实现美化效果</p>
用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

原文地址: http://www.cveoy.top/t/topic/hGmY 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录