使用Bootstrap可以很容易地美化表单。首先,你需要在头部引入Bootstrap的CSS文件。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

然后,你可以使用Bootstrap的类名来为表单元素添加样式。以下是使用Bootstrap美化后的代码:

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

                <div class="form-group">
                    <select name="catid" id="search-goods-type" class="form-control">
                        <option value="0" 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>
                </div>

                <div class="form-group">
                    <select name="type" id="search-type" class="form-control">
                        <option value="" 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>
                </div>

                <input type="submit" value="查询" class="btn btn-primary">
                <input type="reset" value="重置" class="btn btn-default">
            </form>
        </td>
    </tr>
</table>

以上代码使用了Bootstrap的form-inline类来使表单元素在一行显示,并使用了form-group类来为表单元素添加间距和样式。使用form-control类为输入框和下拉列表添加样式。使用btn和btn-primary类为按钮添加样式。

请确保在使用这些样式之前已经正确引入了Bootstrap的CSS和JavaScript文件

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

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

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