bootstrap之表单

关于作者：

• 郑云飞, 程序员Java（web前端，web后端，oracle数据库or mysql数据库）
• 艺名：天放
• weibo：@tianFang
• blog: zhengyunfei.iteye.com
• email: [email protected]

本文主要讲解的是表单，这个其实对于做过网站的人来说，并不陌生，而且可以说是最为常用的提交数据的Form表单。

本文主要来讲解以下内容：

1.基本案例

2.内联表单

3.水平排列的表单

4.被支持的控件

5.静态控件

6.控件状态

7.控件尺寸

8.帮助文本

9.总结

基本案例

单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control的、和<select>元素都将被默认设置为width: 100%;。将label和前面提到的这些控件包裹在.form-group中可以获得最好的排列。</p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><form role="form"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><div class="form-group"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><label for="exampleInputEmail1">Email address</label></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"></div></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><div class="form-group"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><label for="exampleInputPassword1">Password</label></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"></div></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><div class="form-group"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><label for="exampleInputFile">File input</label></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><input type="file" id="exampleInputFile"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><p class="help-block">Example block-level help text here.</p></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"></div></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><div class="checkbox"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><label></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><input type="checkbox"> Check me out    </label></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"></div></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><button type="submit" class="btn btn-default">Submit</button></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"></form></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;background-color:#f5faff;text-align:center;"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;">两个文本框的宽度的确为100%。并且有三个form-group。</p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><strong>内联表单</strong></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;">为左对齐和inline-block级别的控件设置.form-inline，可以将其排布的更紧凑。</p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;">需要设置宽度：在Bootstrap中,input、select和textarea默认被设置为100%宽度。为了使用内联表单，你需要专门为使用到的表单控件设置宽度。</p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;">一定要设置label:如果你没有为每个输入控件设置label,屏幕阅读器将无法正确识读。对于这些内联表单,你可以通过为label设置.sr-only已将其隐藏。</p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><form class="form-inline" role="form"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><div class="form-group"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><label class="sr-only" for="exampleInputEmail2">Email address</label></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"></div></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><div class="form-group"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><label class="sr-only" for="exampleInputPassword2">Password</label></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"></div></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><div class="checkbox"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><label></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><input type="checkbox"> Remember me    </label></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"></div></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><button type="submit" class="btn btn-default">Sign in</button></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"></form></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;background-color:#f5faff;text-align:center;"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><strong>水平排列的表单</strong></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;">通过为表单添加.form-horizontal，并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再使用.row了。</p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><form class="form-horizontal" role="form"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><div class="form-group"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><label for="inputEmail3" class="col-sm-2 control-label">Email</label></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><div class="col-sm-10"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><input type="email" class="form-control" id="inputEmail3" placeholder="Email"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"></div></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"></div></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><div class="form-group"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><label for="inputPassword3" class="col-sm-2 control-label">Password</label></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><div class="col-sm-10"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><input type="password" class="form-control" id="inputPassword3" placeholder="Password"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"></div></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"></div></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><div class="form-group"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><div class="col-sm-offset-2 col-sm-10"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><div class="checkbox"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><label></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><input type="checkbox"> Remember me        </label></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"></div></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"></div></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"></div></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><div class="form-group"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><div class="col-sm-offset-2 col-sm-10"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><button type="submit" class="btn btn-default">Sign in</button></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"></div></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"></div></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"></form></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;background-color:#f5faff;text-align:center;"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><strong>被支持的控件</strong></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;">在表单布局案例中展示了其所支持的标准表单控件。</p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><strong>Input</strong></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;">大部分表单控件、文本输入域控件。包括HTML5支持的所有类型：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。</p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;">注意：有正确设置了type的input控件才能被赋予正确的样式。</p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;">文本框示例</p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><input type="text" class="form-control" placeholder="Text input"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;background-color:#f5faff;text-align:center;"></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><strong>Textarea</strong></p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;">支持多行文本的表单控件。可根据需要改变rows属性。</p> <p style="border:0px;font-family:'Segoe UI', Tahoma, Arial;line-height:27px;vertical-align:baseline;text-indent:2em;background-color:#f5faff;"><h1>textarea</h1> <textarea class="form-control" rows="3">

Checkbox 和 radio

Checkbox用于选择列表中的一个或多个选项，而radio用于从多个选项中只选择一个。

默认外观(堆叠在一起)

    Option one is this and that—be sure to include why it's great

    Option one is this and that—be sure to include why it's great

    Option two can be something else and selecting it will deselect option one 

Inline checkboxes

通过将.checkbox-inline 或 .radio-inline应用到一系列的checkbox或radio控件上，可以使这些控件排列在一行。

1

2

3

同理Radio是一样的，只需要添加一下样式即可。

Select

1

2

3

4

5

1

2

3

4

5

静态控件

在水平布局的表单中，如果需要将一行纯文本放置于label的同一行，为

元素添加.form-control-static即可。

Email

[email protected]

Password

控件状态

控件状态

通过为控件和label设置一些基本状态，可以为用户提供回馈。

输入焦点

我们移除了某些表单控件的默认outline样式，并对其:focus状态赋予了box-shadow样式。

被禁用的输入框

为输入框设置disabled属性可以防止用户输入，并能改变一点外观，使其更直观。

被禁用的fieldset

为

设置disabled属性可以禁用

中包含的所有控件。

标签的链接功能不受影响

这个class只改变按钮的外观，并不能禁用其功能。建议自己通过JavaScript代码禁用链接功能。

跨浏览器兼容性

虽然Bootstrap会将这些样式应用到所有浏览器上，Internet Explorer 9及以下浏览器中的

并不支持disabled属性。因此建议在这些浏览器上通过JavaScript代码来禁用fieldset

Disabled input

Disabled select menu

Disabled select

Can't check this

Submit

可将鼠标移到各个控件上进行查看效果。

校验状态

Bootstrap对表单控件的校验状态，如error、warning和success状态，都定义了样式。使用时，添加.has-warning、.has-error或.has-success到这些控件的父元素即可。任何包含在此元素之内的.control-label、.form-control和.help-block都将接受这些校验状态的样式。

Input with success

Input with warning

Input with error

控件尺寸

通过.input-lg之类的class可以为控件设置高度，通过.col-lg-*之类的class可以为控件设置宽度。

高度尺寸

创建大一些或小一些的表单控件以匹配按钮尺寸。

...

...

...

调整列尺寸

用栅格系统中的列包裹input或其任何父元素，都可很容易的为其设置宽度。

帮助文本

用于表单控件的块级帮助文本。

自己独占一行或多行的块级帮助文本。

总结

本篇文章主要讲解表单中各种控件的样式控制。其中也有看到按钮的简单样式使用，下一篇文章将重点来讲解按钮的样式。