<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1-9 创建垂直表单</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- <div class="row"> -->
<!-- <div class="col-md-12"> -->
<!-- role属性主要是为了方便残疾人使用web -->
<form action="" role="form" class="form-horizontal">
<!-- 添加filedset表单域 -->
<fieldset>
<!-- 添加表单标题，请使用表单专用标题，legend -->
<legend>用户登陆</legend>
<!-- 这个legend标题自带一个水平线 -->
<div class="form-group">
<label for="name" class="col-md-2 control-label" >用户名称：</label>
<div class="col-md-10">
<input type="text" class="form-control" id="name" placeholder="手机号/邮箱">
<!-- <p class="help-block">可以使用手机或者邮箱登陆</p> -->
</div>
</div>
<div class="form-group">
<label for="pw" class="col-md-2 control-label">用户密码：</label>
<div class="col-md-10">
<input type="text" class="form-control" id="pw" placeholder="密码不少于6位">
<!-- <p class="help-block">不能少于6位</p> -->
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-info">提交</button>
</div>
</div>
</fieldset>
</form>
<!-- </div> -->
<!-- </div> -->
</div>
</body>
</html>
