Bootstrap表单（二）
最后更新于：2022-04-01 11:55:30
### Bootstrap支持的表单控件
Bootstrap 支持最常见的表单控件: input、textarea、checkbox、radio 和 select。
### 1、input输入框
Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
~~~
<!doctype html>
<html lang="en">
<head>
<!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="Yvette Lau">
<meta name = "viewport" content = " width = device-width, initial-scale = 1 ">
<title>BootstrapDemo</title>
<!--css js 文件的引入-->
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body style="padding: 20px;">
<div class = "col-xs-12 col-lg-3 col-lg-offset-2">
<form role = "form" class = "form-horizontal">
<div class="form-group">
<label for = "name" class="col-lg-4 col-xs-3 control-label" style="vertical-align: center;">用户名</label>
<div class="col-lg-8 col-xs-9">
<input type = "text" class="form-control" id = "name" placeholder = "请输入用户名"></input>
</div>
</div>
<div class="form-group">
<label for = "name" class="col-lg-4 col-xs-3 control-label">密码</label>
<div class="col-lg-8 col-xs-9">
<input type = "password" class="form-control" id = "name" placeholder = "请输入密码"></input>
</div>
</div>
<div class="form-group">
<div class="col-xs-3"></div>
<div class="col-lg-8 col-xs-9 col-lg-offset-4">
<div class="checkbox">
<label><input type="checkbox">记住密码</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-3"></div>
<div class="col-lg-8 col-xs-9 col-lg-offset-4">
<button type="submit" class="btn btn-default" >提交</button>
</div>
</div>
</form>
</div>
</body>
</html>
~~~
效果如下（手机端和PC端显示效果均很OK）：
### 2、文本框（Textarea）
~~~
<body style="padding: 20px;">
<div class = "col-xs-12 col-lg-3 col-lg-offset-2">
<form role = "form" class="form-horizontal">
<div class="form-group">
<label for = "text" >文本框</label>
<div class="col-lg-8 col-xs-9 ">
<textarea class="form-control" id = "text" rowsplaceholder = "请输入用户名"></textarea>
</div>
</div>
</form>
</div>
</body>
~~~
效果：
如果想要竖直的效果只需要去掉水平表单相关的元素即可
~~~
<body style="padding: 20px;">
<div class = "col-xs-12 col-lg-3 col-lg-offset-2">
<form role = "form">
<div class="form-group">
<label for = "text" >文本框</label>
<textarea class="form-control" id = "text" rowsplaceholder = "请输入用户名"></textarea>
</div>
</form>
</div>
</body>
~~~
效果：
默认的效果，文本框是可以通过右下角拉伸的。如果您希望是固定不大，不允许拉伸，那么需要给文本框加上样式：resize:none;
### 3、复选框（（Checkbox）和单选框（Radio）
checkbox允许用户多选（如：兴趣爱好），
radio只能选择一个（如：性别）
通过给外层div加上checkbox-inline和radio-inline的class，可以使复选框/单选框在同一行显示。
~~~
<body style="padding: 20px;">
<div class = "col-xs-12 col-lg-3 col-lg-offset-2">
<form role = "form">
<label>请选择您的爱好</label>
<div class="checkbox">
<label><input type="checkbox">听音乐</label>
</div>
<div class="checkbox">
<label><input type="checkbox">读书</label>
</div>
<div class="checkbox">
<label><input type="checkbox">乒乓球</label>
</div>
<div class="checkbox">
<label><input type="checkbox">玩游戏</label>
</div>
</form>
<form role = "form">
<label>性别</label>
<div class="radio">
<label><input type="radio">男</label>
</div>
<div class="radio">
<label><input type="radio">女</label>
</div>
</form>
</div>
</body>
~~~
效果如下：
同一行显示：
~~~
<body style="padding: 20px;">
<div class = "col-xs-12 col-lg-6 col-lg-offset-2">
<form role = "form">
<label>请选择您的爱好</label>
<label class="checkbox-inline"><input type="checkbox">听音乐</label>
<label class="checkbox-inline"><input type="checkbox">读书</label>
<label class="checkbox-inline"><input type="checkbox">乒乓球</label>
<label class="checkbox-inline"><input type="checkbox">玩游戏</label>
</form>
<form role = "form">
<label>性别</label>
<label class="radio-inline"><input type="radio">男</label>
<label class="radio-inline"><input type="radio">女</label>
</form>
</div>
</body>
~~~
效果如下：
### 4、选择框（Select）
- 使用 <select> 展示列表选项，通常是那些用户很熟悉的选择列表，比如省市区。
- 使用 multiple="multiple" 允许用户选择多个选项。
~~~
<body style="padding: 20px;">
<div class = "col-xs-12 col-lg-2 col-lg-offset-2">
<form role = "form">
<div class="form-group">
<label></label>
<select class="form-control">
<option>江苏省</option>
<option>浙江省</option>
<option>福建省</option>
<option>江西省</option>
<option>东北省</option>
<option>河南省</option>
</select>
</div>
<div class="form-group">
<label></label>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
</form>
</div>
</body>
~~~
效果如下：
### 5、静态控件
在 < p > 上使用 class .form-control-static，可以在一个水平表单内的表单标签后放置纯文本。
~~~
<body style="padding: 20px;">
<div class = "col-xs-12 col-lg-4 col-lg-offset-2">
<form role = "form" class="form-horizontal">
<div class="form-group">
<label class="control-label col-lg-4">邮箱地址</label>
<div class="col-lg-6">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">用户类型</label>
<div class="col-lg-6">
<p class="form-control-static">我是卖家</p>
</div>
</div>
</form>
</div>
</body>
~~~
效果如下：
### 6、表单控件状态
除了 :focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上），Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。
### 输入框焦点
当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。
### 禁用的输入框 input
如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。
### 禁用的字段集 fieldset
对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件
### 验证状态
Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。
~~~
<body style="padding: 20px;">
<div class = "col-xs-12 col-lg-4 col-lg-offset-2">
<form role = "form" class="form-horizontal">
<div class="form-group">
<label class="control-label col-lg-4">邮箱地址</label>
<div class="col-lg-6">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">禁用</label>
<div class="col-lg-6">
<input type = "text" class="form-control" placeholder = "此输入框禁止输入" disabled>
</div>
</div>
<fieldset disabled>
<div class="form-group">
<label class="control-label col-lg-4">身高</label>
<div class="col-lg-6">
<input type="text" class = "form-control" placeholder = "请输入您的身高">
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">体重</label>
<div class="col-lg-6">
<input type="text" class = "form-control" placeholder = "请输入您的体重">
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">兴趣爱好</label>
<div class="col-lg-6">
<select class = "form-control">
<option>读书</option>
<option>上网</option>
</select>
</div>
</div>
</fieldset>
</form>
</div>
</body>
~~~
### 验证状态
~~~
<body style="padding: 20px;">
<div class = "col-xs-12 col-lg-4 col-lg-offset-2">
<form role = "form" class="form-horizontal">
<div class="form-group">
<label class="control-label col-lg-4">输入成功</label>
<div class="col-lg-6 has-success">
<input tyoe = "text" class = "form-control" placeholder = "输入成功">
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">输入警告</label>
<div class="col-lg-6 has-warning">
<input tyoe = "text" class = "form-control" placeholder = "输入警告">
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">输入错误</label>
<div class="col-lg-6 has-error">
<input tyoe = "text" class = "form-control" placeholder = "输入错误">
</div>
</div>
</form>
</div>
</body>
~~~
效果：
### 7、表单控件大小
可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。
~~~
<body style="padding: 20px;">
<div class = "col-xs-12 col-lg-4 col-lg-offset-2">
<form role = "form" class="form-horizontal">
<div class="form-group">
<label class="control-label col-lg-4">输入成功</label>
<div class="col-lg-6">
<input tyoe = "text" class = "form-control input-lg" placeholder = "输入成功">
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">输入警告</label>
<div class="col-lg-6">
<input tyoe = "text" class = "form-control" placeholder = "输入警告">
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">输入错误</label>
<div class="col-lg-8">
<input tyoe = "text" class = "form-control input-sm" placeholder = "输入错误">
</div>
</div>
</form>
</div>
</body>
~~~
效果如下：
### 8、表单帮助文本
Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，需要在 <input> 后使用 .help-block。
~~~
<body style="padding: 20px;">
<div class = "col-xs-12 col-lg-4 col-lg-offset-2">
<form role = "form" class="form-horizontal">
<div class="form-group">
<label class="control-label col-lg-4">邮箱</label>
<div class="col-lg-6">
<input tyoe = "text" class = "form-control" placeholder = "请输入邮箱">
<span class = "help-block">邮箱格式为XXXXX@XX.com</span>
</div>
</div>
</form>
</div>
</body>
~~~
