Bootstrap 表单美化教程：从基础到进阶

在``元素中，使用 Bootstrap 的`class='control-label'`来设置标签的样式。

在``元素中，可以使用 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`属性，并在每个输入框后面添加了一个`

`元素来显示错误信息。

最后，使用 Bootstrap 的按钮样式（`btn`、`btn-primary`和`btn-default`）来设置按钮的样式。

希望这个示例能帮到你！

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

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