<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单form</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<form>
<div class="form-group"><!--更好抵到排列-->
<lable>用户名</lable><!--用于低版本浏览器的提示信息-->
<input type="email" class="form-control" placeholder="Email" /></div><!--所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;placeholder为框中提示的文字。 -->
<div class="form-group">
<lable>密码</lable>
<input type="password" class="form-control" placeholder="********"/>
</div>
<div class="form-group">
<lable>File input</lable>
<input type="file"/>
<p>选择您需要的文件</p>
</div>
<div class="checkbox">
<lable>
<input type="checkbox"/>女
</lable>
<lable>
<input type="checkbox"/>男
</lable>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
<!--不要将表单组和输入框组混合使用,不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用-->
<!--内联表单-->
<!--为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。-->
<form class="form-inline">
<div class="form-group">
<label class="sr-only">username</label>
<!--一定要添加 label 标签如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 label 设置 .sr-only 类将其隐藏。还有一些辅助技术提供label标签的替代方案，比如 aria-label、aria-labelledby 或 title 属性。如果这些都不存在，屏幕阅读器可能会采取使用 placeholder 属性，如果存在的话，使用占位符来替代其他的标记，但要注意，这种方法是不妥当的。
-->
<input type="email" class="form-control" placeholder="email" />
<div class="input-group">
</div>
</div>
<div class="form-group">
<label class="sr-only">password</label>
<input type="password" class="form-control" placeholder="********1"/>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"> $ </div>
<input type="email" class="form-control" placeholder="email" />
<div class="input-group-addon">.00</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
</div>
</body>
</html>
