<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>表单</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-3.2.1.js"> </script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<form action="#">
<div class="form-group">
<label for="email">Email address</label><!--当点击email字体时，焦点自动跳到email的输入框中-->
<input type="email" class="form-control" id="email"placeholder="email">
</div> <!--form-control 用来控制输入框，随页面大小的缩放，而缩放-->
<div class="form-group">
<label for="password">PassWord</label>
<input type="password" class="form-control" id="password"placeholder="password">
</div>
<div class="form-group">
<label for="file">PassWord</label>
<input type="file" class="form-control" id="file">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Check me Out
</label>
</div>
<button type="submit"class="btn btn-default">submit</button>
</form>
<!--内联表单-->
<h2>内联表单</h2>
<form action="#"class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<div class="input-group"><!--input-group 输入框组-->
<div class="input-group-addon">$</div> <!--在input-group-addon 的 <span> 中放置额外的内容（可以是字符，也可以是按钮）-->
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
<div class="input-group-addon">.00</div>
</div>
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">提交</button>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
<!--下拉列表（select）-->
<select name="下拉列表" id="" class="form-control">
<option value="">守望先锋</option>
<option value="">英雄联盟</option>
<option value="">暴风英雄</option>
<option value="">虚幻争霸</option>
</select>
<hr/>
<select name="下拉列表" id="" multiple class="form-control"> <!--multiple class 默认显示多选项-->
<option value="">守望先锋</option>
<option value="">英雄联盟</option>
<option value="">暴风英雄</option>
<option value="">虚幻争霸</option>
</select>
<div class="form-group has-success">
<label class="text-success"> 用户名</label>
<input type="text" class="form-control" />
</div>
<div class="form-group has-error">
<label> 密码</label>
<input type="text" class="form-control" disabled/><!-- disabled 禁止输入-->
</div>
</body>
</html>