本文介绍了如何使用HTML和Bootstrap框架创建基本和水平布局的表单，包括文本输入和按钮元素，以及如何通过改进布局来提高用户体验。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表单</title>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<!--创建基本表单-->
<form role="form " >
<div class="form-group">
<label >姓名:</label>
<input type="text" id="username" class="form-control" />
<span id="userInfo"></span>
<label >密码:</label>
<input type="text" id="password" class="form-control" />
<input type="button" value="提交" class="btn btn-success"/>
<span id="passInfo"></span>
</div>
</form>
<!--进一步改进,创建水平表单-->
<form role="form" class="form-horizontal" >
<div class="form-group">
<div class="col-md-3" style="text-align: right;">
<label class="control-label">姓名:</label>
</div>
<div class="col-md-5">
<input type="text" class="form-control" />
</div>
<div class="col-md-4">
<label id="passInfo" style="color: red;" class="control-label">*输入格式不正确</label>
</div>
</div>
<div class="form-group">
<div class="col-md-3" style="text-align: right;">
<label class="control-label">密码:</label>
</div>
<div class="col-md-5">
<input type="text" class="form-control" />
</div>
<div class="col-md-4">
<label id="passInfo" style="color: red;" class="control-label">*输入格式不正确</label>
</div>
</div>
<div class="form-group" style="text-align: center;">
<input type="button" value="提交" class="btn btn-success"/>
</div>
</form>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
