用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
在表单中使用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)来设置按钮的样式。
希望这个示例能帮到你
原文地址: https://www.cveoy.top/t/topic/hGdt 著作权归作者所有。请勿转载和采集!