LayUI 表单美化教程 - 使用 LayUI 样式提升表单颜值

"使用LayUI的样式来美化表单，可以通过添加class来应用LayUI的样式，具体样式可以参考LayUI的文档。\n\n以下是使用LayUI美化表单的示例代码：\n\nhtml\n<link rel=\"stylesheet\" href=\"https://cdn.staticfile.org/layui/2.5.7/css/layui.css\" media=\"all\">\n<script src=\"https://cdn.staticfile.org/layui/2.5.7/layui.js\"</script>\n\n<table class=\"search_table\" width=\"100\%">\n <tr>\n <td>\n <form action=\"method!goodslist\" method=\"get\" class=\"layui-form\">\n <input type=\"hidden\" name=\"g\" value=\"Admin\" />\n <input type=\"hidden\" name=\"m\" value=\"User\" />\n <input type=\"hidden\" name=\"a\" value=\"index\" />\n 筛选: <input type=\"text\" name=\"key\" class=\"layui-input\" value=\"${key}\" />\n\n <select name=\"catid\" id=\"search-goods-type\" class=\"layui-select\">\n <option value=\"0\" selected=\"selected\">物品类别</option>\n <option value=\"1\" <c:if test=\"${catid == 1}\">selected</c:if>>卡类证件</option>\n <option value=\"2\" <c:if test=\"${catid == 2}\">selected</c:if>>随身物品</option>\n <option value=\"3\" <c:if test=\"${catid == 3}\">selected</c:if>>电子数码</option>\n <option value=\"4\" <c:if test=\"${catid == 4}\">selected</c:if>>书籍资料</option>\n <option value=\"5\" <c:if test=\"${catid == 5}\">selected</c:if>>衣物饰品</option>\n <option value=\"6\" <c:if test=\"${catid == 6}\">selected</c:if>>其他物品</option>\n </select>\n\n <select name=\"type\" id=\"search-type\" class=\"layui-select\">\n <option value=\"\" selected=\"selected\">事件类型</option>\n <option value=\"lost\" <c:if test=\"${type == 'lost'}\">selected</c:if>>寻物信息</option>\n <option value=\"find\" <c:if test=\"${type == 'find'}\">selected</c:if>>招领信息</option>\n </select>\n <button class=\"layui-btn layui-btn-primary\" lay-submit lay-filter=\"search\">查询</button>\n <button type=\"reset\" class=\"layui-btn layui-btn-primary\">重置</button>\n </form>\n </td>\n </tr>\n</table>\n\n<script>\n layui.use('form', function(){\n var form = layui.form;\n //监听表单提交\n form.on('submit(search)', function(data){\n //TODO: 表单提交的处理逻辑\n return false; //阻止表单默认提交\n });\n });\n</script>\n\n\n在上面的代码中，我们引入了LayUI的CSS和JS文件，然后给表单元素添加了LayUI的class，如layui-form、layui-input、layui-select等，然后通过LayUI的form模块来监听表单提交，可以在监听函数中添加表单提交的处理逻辑。