用layui美化表单 table class=search_table width=100 tr td form action=method!goodslist method=get input type=hidden name=g value=Admin
可以使用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模块来监听表单提交,可以在监听函数中添加表单提交的处理逻辑
原文地址: https://www.cveoy.top/t/topic/hGfs 著作权归作者所有。请勿转载和采集!