### 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>
~~~
- 前言
- jQuery輪播圖插件
- JS模擬事件操作
- JS閉包與變量
- JS綁定事件
- HTML5之file控件
- JavaScript的this詞法
- JavaScript的this詞法（二）
- JS this詞法（三）
- JS檢測瀏覽器插件
- JS拖拽組件開發
- number輸入框
- Modernizr.js和yepnode.js
- DOM變化后事件綁定失效
- div和img之間的縫隙問題
- 詳解JavaScript作用域
- bootstrap入門
- 表單驗證（登錄/注冊）
- Bootstrap網格系統
- Bootstrap排版
- Bootstrap創建表單（一）
- Bootstrap表單（二）
- Bootstrap按鈕
- Bootstrap圖片
- Bootstrap字體圖標(glyphicons)
- Bootstrap的aria-label和aria-labelledby
- Bootstrap下拉菜單
- Bootstrap按鈕組
- Bootstrap按鈕菜單
- Bootstrap輸入框組
- Bootstrap導航元素
- Bootstrap導航欄
- sublimeText頻頻崩潰
- JQuery不同版本的差異（checkbox）
- Bootstrap面包屑導航、分頁、標簽、徽章
- Bootstrap警告
- Bootstrap進度條
- 前端的上傳下載
- JS字符串的相關方法
- CSS3選擇器（全）
- CSS3新增文本屬性詳述
- 利用CSS3實現圖片切換特效
- CSS3新增顏色屬性
- CSS3的border-radius屬性詳解
- JS創建對象幾種不同方法詳解
- JS實現繼承的幾種方式詳述（推薦）
- CSS3響應式布局
- JS模塊化開發(requireJS)
- 利用@font-face實現個性化字體
- 前端在html頁面之間傳遞參數的方法
- CSS自動換行、強制不換行、強制斷行、超出顯示省略號
- 如何在Html中引入外部頁面
- reactJS入門
- React組件生命周期
- 使用React實現類似快遞單號查詢效果
- ReactJS組件生命周期詳述
- React 屬性和狀態詳解