在表单中使用Bootstrap美化,可以使用Bootstrap的CSS类来修改表单元素的样式。

首先,在表单的<form>标签上添加class="form-horizontal",以使表单水平排列。

然后,在每个表单元素的外层包裹一个<div class="form-group">,并在每个<div>内部添加<label>和<input>元素。

在<label>元素中,使用Bootstrap的class="control-label"来设置标签的样式。

在<input>元素中,可以使用Bootstrap的class="form-control"来设置输入框的样式。

以下是使用Bootstrap美化的示例代码:

<form id="myform" action="method!usersave" method="post" class="form-horizontal">

    <input type="hidden" name="id" value="${user.id}"/>
    
    <div class="form-group">
        <label for="email" class="control-label col-sm-2">邮箱</label>
        <div class="col-sm-10">
            <input type="text" id="email" name="email" class="form-control"
                   required="required" data-error="邮箱不能为空" minlength="1" maxlength="40"/>
            <div class="help-block with-errors"></div>
        </div>
    </div>

    <div class="form-group">
        <label for="username" class="control-label col-sm-2">昵称</label>
        <div class="col-sm-10">
            <input type="text" id="username" name="username" class="form-control"
                   required="required" data-error="昵称不能为空" minlength="2" maxlength="40"/>
            <div class="help-block with-errors"></div>
        </div>
    </div>

    <div class="form-group">
        <label for="password" class="control-label col-sm-2">密码</label>
        <div class="col-sm-10">
            <input type="password" id="password" name="password" class="form-control"
                   required="required" data-error="密码不能为空" minlength="6" maxlength="40"/>
            <div class="help-block with-errors"></div>
        </div>
    </div>

    <div class="form-group">
        <label for="role" class="control-label col-sm-2">用户组</label>
        <div class="col-sm-10">
            <select id="role" name="role" class="form-control" required="required" data-error="用户组不能为空">
                <option value="0" <c:if test="${user.role == 0}">selected</c:if>>普通用户</option>
                <option value="1" <c:if test="${user.role==1}">selected</c:if>>管理员</option>
            </select>
            <div class="help-block with-errors"></div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <input type="submit" value="提交" class="btn btn-primary">
            <input type="reset" value="取消" class="btn btn-default">
            <input onclick="javascript:history.go(-1);" class="btn btn-default" type="button" value="返回"/>
        </div>
    </div>
</form>

在上面的代码中,使用了Bootstrap的栅格系统(col-sm-2和col-sm-10)来控制标签和输入框的布局。

另外,为了实现表单验证功能,添加了required属性和data-error属性,并在每个输入框后面添加了一个<div>元素来显示错误信息。

最后,使用Bootstrap的按钮样式(btn、btn-primary和btn-default)来设置按钮的样式。

希望这个示例能帮到你

用bootstrap美化表单 form id=myform action=method!usersave method=post input type=hidden name=id value=$userid table cellpadding=0 cellspacing=0 class=table_form width=100

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

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