4, 表单

复选框

复选框组

将一组复选框或单选按钮组合成一组并排放置的Bootstrap按钮

  bootstrap.min.css
  jquery.min.js
  bootstrap.min.js
  
  div.btn-group[data-toggle=buttons]
      label.btn.btn-default.active
          input[type=checkbox]
          {Option 1｝
      label.btn.btn-default
          input[type=checkbox]
          {Option 2}
      label.btn.btn-default
          input[type=checkbox]
          {Option 3}
  ------------
  lable 里面 有个 input checkbox
  data-toggle=buttons  用来切换复选框样式
  类active   checkbox 预选

---

表单布局

垂直表单
水平表单
内联表单

垂直表单 (在顶部以左对齐标签堆叠)

div.bs-example
    form
        div.form-group
            label[for=inputEmail]{Email}
            input#inputEmail.form-control[type=email][placeholder=Email]
        div.form-group
            label[for=inputPassword]{Password}
            input#inputPassword.form-control[type=password][placeholder="password"]
        div.checkbox
            label
                input[type=checkbox]Remember me
        button.btn.btn-primary[type=submit]{Login}
----------------------
placeholder='Email'   框里面的提示信息 'Email'
autocomplete='off'   关闭(存储填写记录)
.form-control 默认宽度是100%；全角元素？
.form-group    标签和对应的输入 需要一个这个div 类？

``` $(".myDropdownHandle").dropdown('toggle'); //???

form.form
div.form-group
label[for=nameField]{Name}
input#nameField.form-control[type=text][placeholder=Your Name]
div.form-group
label[for=emailField]{Email}
input#emailField.form-control[type=email][placeholder=Your Email]
div.form-group
label[for=phoneField]{Phone}
input#phoneField.form-control[type=text][placeholder=Your Phone Number]
div.form-group
lable[for=descField]{Dedcription}
input#descField.form-control[type=text][placeholder=Your Comments]
button.btn.btn-primary[type=submit]{submit}
button.btn.btn-default[type=reset]{Reset}

##### 水平表单
<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g0uc3qi2zoj30i607qaa7.jpg" alt="img">

$(".myDropdownHandle").dropdown('toggle'); //?/?

div.bs-example
form.form-horizontal
div.form-group
label.col-xs-2[for=nameField]{Name}
div.col.xs-10
input#nameField.form-control[placeholder=Your Name][type=text]
div.form-group
同上
div.form-group
同上
div.form-group
同上
button 同上
button

与垂直表单相比，多了
form.form-horizontal
label.col-xs-2 div.col.xs-10

##### 内联表单 Δ
<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g0uc55kjdbj30mp02vaa0.jpg" alt="img">
<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g0uc5m7cr8j30jg06umx8.jpg" alt="img">

$('.myDropdownHandle').dropdown('toggle') //?????

div.well.well-sm
form.form-inline
div.form-group
input#emailField.form-control[placeholder=Enter email[type=email]
div.form-group
input#passwordField.form-control[placeholder=Password][type=password]
div.checkbox
label
input[type=checkbox]Rember me
button.btn.btn-primary[type=submit]{Sigb in}

与垂直表单的区别：
div.well.well-sm 引起内容凹陷的容器
form.form-inline 表单所有元素是内联的，向左对齐的，标签是并排的

#### 表单控件尺寸
##### 高度输入与选择框 `input-xx`

form
div.row
div.col-xs-6
input.form-control.input-lg[type=text][placeholder=Larger input]
div.col-xs-6
select.form-control.input-lg
option{Larger select}
br
div.row
input-lg input input-sm

<img src="//tva3.sinaimg.cn/mw690/005zbIM7ly1g113587spwj30tr04o74b.jpg" alt="img">

##### 尺寸与网格列尺寸相匹配

form
div.row
div.col-xs-3
input.form-control[type=text]
div.col-xs-4
input.form-control[type=text]
div.col-xs-5
input.form-control[type=text]
div.row
textarea....
div.row
select.form-control
option{Select}

<img src="//tva3.sinaimg.cn/mw690/005zbIM7ly1g113nemba9j30jv05b0sm.jpg" alt="img">

##### 输入组的高度 `input-group-xx`

css js

div.row
div.col-xs-4
div.input-group.input-group-lg
span.input-group-addon
span.glyphicon.glyphicon-user
input.form-control[type=text]
div.col-xs-4
div.input-group.input-group-lg
span.input-group-addon
input[type=checkbox]
input.form-control[type=text]
div.col-xs-4
div.input-group.input-group-lg
div.input-group-btn
button.btn.btn-default[tabindex=-1]{Action}
button.btn.btn-default.dropdown-toggle[data-toggle=dropdown]
span.caret
span.sr-only{Toggle Dropdown}
ul.dropdown-menu
li>a[href=#]{Action}
li>a[href="#"{Another action]
li.divider
li>a[href=#]{Separated link}
input.form-control[type=text]
div.col-xs-4
...
...

<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g11533yrd8j30m304z0ss.jpg" alt="img">

#### 表单禁用和只读
##### 禁用表单控件

body
input.form-control[type=text][placeholder=Disabled input here...][disabled]

disabled

<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g115dejtb5j305500ra9t.jpg" alt="img">
##### 禁用字段集
通过向 <fieldset> 元素中添加 disabled 属性来禁用字段集中的所有表单控件

form.form-horizontal
fieldset[disabled=disabled]
div.form-group
label.control-label.col-xs-2[for=inputEmail]{Email}
div.col-xs-10
input#inputEmail.form-control[type=email][placeholder=Email]
div.form-group
label.control-label.colxs-2[for=inputPassword]{password}
div.col-xs-10
input#inputPassword.form-control[type=password][placeholder=Passowrd]
div.form-group
div.col-xs-offset-2.col-xs-10
div.checkbox
lable>input[type=checkbox]^{Rember me}
div.form-group
div.col-xs-offset-2.col-xs-10
button.btn.btn-primay[type=submit}{Login}

<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g115frk7yij30ke055dfs.jpg" alt="img">

##### 只读

div.bs-example
form
input.form-control[placeholder="Readonly input"][readonly=readonly]

<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g1177wkwplj308d01ht8h.jpg" alt="img">

#### 表单帮助
##### helper类
用户在输入字段中输入无效值时候显示一些自定义文本。(使用带help-block类的span元素)

form
input.form-control[type=text]
span.help-block{A block of text that ...}

不知道有什么作用

<img src="//tva3.sinaimg.cn/mw690/005zbIM7ly1g117fcab07j30do02ja9x.jpg" alt="img">

##### 表单静态控件
在水平表单布局中的表单标签旁放置纯文本，请在\<p>元素上使用 `.form-control-static`

form.form-horizontal
div.form-group
label.control-label.col-xs-2[for=inputEmail]{Email}
div.col-xs-10
p.form-control-static{harrypotter@mail.com}
div.form-group
label.control-label.col-xs-2[for=inputPassword]{Password}
div.col-xs-10
p#inputPassword.form-control[type=password][placeholder=Password]
div.form-group
div.col-xs-offset-2.col-xs-10
label>input[type=checkbox]^{Remember me}
div.form-group
div.col-xs-offset-2.col-xs-10
button.btn.btn-primary[type=submit]{Login}

<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g117gspzutj30hp05amx5.jpg" alt="img">

#### 表单验证
##### 三个验证状态
- `has-success`将使标签文本和边框字段的颜色变为绿色
- `has-error`将使用棕色
- `has-warning`将使用深红色
- 会将颜色应用与`form-control`,`control-label`和`help-block`类元素。

form.form-horizontal
div.form-group.has-success
label.col-xs-2.control-label[for=inputSuccess]{Username}
div.col-xs-10
input#inputSuccess.form-control[placeholder=Input with success][type=text]
span.help-block{Username is available}
div.form-group.has-worning
...
div.form-group.has-error
...

<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g123aagvwxj30kv06zwen.jpg" alt="img">

##### feedback图标
在`.form-group`和`glyphicon`上使用类 `.has-feedback`

form.form-horizontal
div.form-group.has-success.has-feedback
label.control-label.col-xs-2[for=inputSuccess]{Usrname}
div.col-xs-10
input#[inputSuccess].form-control[placeholder=input with success][type=text]
span.glyphicon.glyphicon-ok.formcontrol-feedback
span.help-block{Username is availabel}
div.form-group.haswarning-has-feedback
...
span.glyphicon.glyphicon-warning-sign.form-control-feedback
...
idv.form-group.has-error.has-feedback
...
span.glyphicon.glyphicon-remove.form-control-feedback
...

<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g123laem2aj30io06udg0.jpg" alt="img">

#### 单选按钮
一组按钮仅一个可选

script ..attr('checked')=> undefind
('input').map(function(){ if((this).is(':checked')){
alert($(this).attr('id'));
}
});

css js

div.btn-group.data-toggle=buttons
label.btn.btn-info.active
input[type=radio][name=options][cehcked=checked]{Option 1}
label.btn.btn-info
input[type=radio][name=options]{Option 2}
label.btn.btn-info
input[type=radio][name=options]{Option 3}

---

点击一个按钮后，不可取消，只能切换
data-toggle=buttons active checked

[`data-toggle`属性](http://www.runoob.com/bootstrap/bootstrap-button-plugin.html)</br>
<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g1243akm53j307801lq2s.jpg" alt="img">