可以使用LayUI的样式来美化表单,可以通过添加class来应用LayUI的样式,具体样式可以参考LayUI的文档。

以下是使用LayUI美化表单的示例代码:

<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.css" media="all">
<script src="https://cdn.staticfile.org/layui/2.5.7/layui.js"></script>

<table class="search_table" width="100%">
    <tr>
        <td>
            <form action="method!goodslist" method="get" class="layui-form">
                <input type="hidden" name="g" value="Admin" />
                <input type="hidden" name="m" value="User" />
                <input type="hidden" name="a" value="index" />
                筛选: <input type="text" name="key" class="layui-input" value="${key}" />

                <select name="catid" id="search-goods-type" class="layui-select">
                    <option value="0" selected="selected">物品类别</option>
                    <option value="1" <c:if test="${catid == 1}">selected</c:if>>卡类证件</option>
                    <option value="2" <c:if test="${catid == 2}">selected</c:if>>随身物品</option>
                    <option value="3" <c:if test="${catid == 3}">selected</c:if>>电子数码</option>
                    <option value="4" <c:if test="${catid == 4}">selected</c:if>>书籍资料</option>
                    <option value="5" <c:if test="${catid == 5}">selected</c:if>>衣物饰品</option>
                    <option value="6" <c:if test="${catid == 6}">selected</c:if>>其他物品</option>
                </select>

                <select name="type" id="search-type" class="layui-select">
                    <option value="" selected="selected">事件类型</option>
                    <option value="lost" <c:if test="${type == 'lost'}">selected</c:if>>寻物信息</option>
                    <option value="find" <c:if test="${type == 'find'}">selected</c:if>>招领信息</option>
                </select>
                <button class="layui-btn layui-btn-primary" lay-submit lay-filter="search">查询</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </form>
        </td>
    </tr>
</table>

<script>
    layui.use('form', function(){
        var form = layui.form;
        //监听表单提交
        form.on('submit(search)', function(data){
            //TODO: 表单提交的处理逻辑
            return false; //阻止表单默认提交
        });
    });
</script>

在上面的代码中,我们引入了LayUI的CSS和JS文件,然后给表单元素添加了LayUI的class,如layui-form、layui-input、layui-select等,然后通过LayUI的form模块来监听表单提交,可以在监听函数中添加表单提交的处理逻辑

用layui美化表单 table class=search_table width=100 tr td form action=method!goodslist method=get input type=hidden name=g value=Admin

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

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