自强学堂
自强学堂:学习、分享、让你更强!
Bootstrap 教程HTMLCSSJAVASCRIPTJQUERYSQLPHPBOOTSTRAPANGULARXML
 

Bootstrap 表单

简介

在本教程中,您将学习如何使用 Bootstrap 2.0 工具包来创建表单。

Bootstrap 已经为 input、textarea 和 select 等表单控件定义样式,支持列表和复选框,为禁用的表单控件定义样式,包括每个表单控件的错误、警告、成功状态。

自版本 2.0 起,Bootstrap 提供了四中类型的表单布局 -

  • 垂直(默认)
  • 搜索
  • 内联
  • 水平

在 Bootstrap 的上一个版本中,表单布局默认是水平布局。但是,自版本 2.0 起,垂直布局是默认布局。

创建垂直表单布局

为 bootstrap.css 中 .form-vertical class 的 Bootstrap 默认表单布局(即垂直表单)定义样式。但是由于这是默认表单布局,在通过默认布局创建表单的时候,不需要规定 .form-vertical class。下面的实例演示一个通过 Bootstrap 2.0 默认表单布局创建的表单。

.well class 用于创建表单的容器(当然,它还有其他用途)。这个 class 可在 bootstrap.css 中行号 1650 到 1663 找到。对于这个布局,输入框是块级的(block level)。下面的实例演示如何使用 Bootstrap 创建一个默认表单布局。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Bootstrap Version2.0 default form layout example</title> 
<meta name="description" content="Bootstrap Version2.0 default form layout example from ziqiangxuetang.com."> 
<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form class="well">
  <label>Label name</label>
  <input type="text" class="span3" placeholder="Type something…">
  <span class="help-inline">Associated help text!</span>
  <label class="checkbox">
    <input type="checkbox"> Check me out
  </label>
  <button type="submit" class="btn">Submit</button>
</form>
</body>
</html>

在线查看

在不同的浏览器窗口查看上面实例。

创建搜索表单布局

使用位于 bootstrap.css 中行号为 962 到 1003 (这些行也包含了 .form-inline 的样式)的 .form-search class,来创建一个搜索表单。对于这个布局,输入框是块级的(block level)。下面是一个实例:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Bootstrap Version2.0 search form layout example</title> 
<meta name="description" content="Bootstrap Version2.0 search form layout example from ziqiangxuetang.com."> 
<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form class="well form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">Search</button>
</form>
</body>
</html>

在线查看

在不同的浏览器窗口查看上面实例。

创建内联表单布局

使用位于 bootstrap.css 中行号为 962 到 1003 (这些行也包含了 .form-search 的样式)的 .form-inline class,来创建一个内联表单。对于这个布局,输入框是内联的(inline)。下面是一个实例:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Bootstrap Version2.0 inline form layout example</title> 
<meta name="description" content="Bootstrap Version2.0 inline form layout example from ziqiangxuetang.com."> 
<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form class="well form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Password">
  <label class="checkbox">
    <input type="checkbox"> Remember me
  </label>
  <button type="submit" class="btn">Sign in</button>
</form>
</body>
</html>

在线查看

在不同的浏览器窗口查看上面实例。

创建水平表单布局

使用位于 bootstrap.css 中的 .form-horizontal class,来创建一个水平表单。对于这个布局,输入框是块级的(block level)。下面是一个实例:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Bootstrap Version2.0 horizontal form layout example</title> 
<meta name="description" content="Bootstrap Version2.0 horizontal form layout example from ziqiangxuetang.com."> 
<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form class="form-horizontal">
        <fieldset>
          <legend>Controls Bootstrap supports</legend>
          <div class="control-group">
            <label class="control-label" for="input01">Text input</label>
            <div class="controls">
              <input type="text" class="input-xlarge" id="input01">
              <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="optionsCheckbox">Checkbox</label>
            <div class="controls">
              <label class="checkbox">
                <input type="checkbox" id="optionsCheckbox" value="option1">
                Option one is this and that—be sure to include why it's great
              </label>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="select01">Select list</label>
            <div class="controls">
              <select id="select01">
                <option>something</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="multiSelect">Multicon-select</label>
            <div class="controls">
              <select multiple="multiple" id="multiSelect">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="fileInput">File input</label>
            <div class="controls">
              <input class="input-file" id="fileInput" type="file">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="textarea">Textarea</label>
            <div class="controls">
              <textarea class="input-xlarge" id="textarea" rows="3"></textarea>
            </div>
          </div>
          <div class="form-actions">
            <button type="submit" class="btn btn-primary">Save changes</button>
            <button class="btn">Cancel</button>
          </div>
        </fieldset>
</form>
</body>
</html>

在线查看

在不同的浏览器窗口查看上面实例。

Bootstrap 表单控件的浏览器状态

当输入字段获得焦点或者输入字段被禁用或者字段只读时,Bootstrap 已经为这些定义样式。在 bootstrap.css 中从行号 677 到 697,为获得焦点的输入框和输入域元素定义了样式。

首先,Webkit "outline" 作为 ":focus" 的值使用,但是现在已经变为 " box-shadow"。

下面是一个实例,展示了获得焦点的输入框、只读的输入框、禁用的输入框、禁用的复选框和禁用的按钮的样式如何改变。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Bootstrap Version2.0 horizontal form browser status example</title> 
<meta name="description" content="Bootstrap Version2.0 horizontal form browser status example from ziqiangxuetang.com."> 
<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form class="form-horizontal">
        <fieldset>
          <legend>Controls Bootstrap supports</legend>
          <div class="control-group">
            <label class="control-label" for="input01">Focused Input</label>
            <div class="controls">
              <input type="text" class="input-xlarge" id="input01">
              <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="input01">Read only Input</label>
            <div class="controls">
              <input type="text" class="input-xlarge" id="input01" readonly="true">
              <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
            </div>
          </div>
		  <div class="control-group">
            <label class="control-label" for="input01">Disabled Input</label>
            <div class="controls">
              <input type="text" class="input-xlarge" id="input01" disabled>
              <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
            </div>
          </div>
		  <div class="control-group">
            <label class="control-label" for="optionsCheckbox" reado>Checkbox (disabled)</label>
            <div class="controls">
              <label class="checkbox">
                <input type="checkbox" id="optionsCheckbox" value="option1" disabled>
                Option one is this and that—be sure to include why it's great
              </label>
            </div>
          </div>
          <div class="form-actions">
            <button type="submit" class="btn btn-primary" disabled>Save changes (disabled button)</button>
            <button class="btn">Cancel</button>
          </div>
        </fieldset>
</form>
</body>
</html>

在线查看

在不同的浏览器窗口查看上面实例。

为表单验证定义样式

Bootstrap 2.0 可以为验证表单时的错误、警告、成功状态定义样式。这是很好的特性,由于当用户提交表单数据发生错误时,或者需要生成一个警告时,甚至是通知用户已经成功提交数据时,需要向用户展示不同的样式。

这里有一个实例:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Bootstrap Version2.0 form error example</title> 
<meta name="description" content="Bootstrap Version2.0 form error example from ziqiangxuetang.com."> 
<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form class="form-horizontal">
        <fieldset>
          <legend>Form validation error, warning and success</legend>
          <div class="control-group error">
            <label class="control-label" for="inputError">Input with error</label>
            <div class="controls">
              <input type="text" id="inputError">
              <span class="help-inline">Please correct the error</span>
            </div>
          </div>
		  <div class="control-group warning">
            <label class="control-label" for="inputWarning">Input with warning</label>
            <div class="controls">
              <input type="text" id="inputWarning">
              <span class="help-inline">Something may have gone wrong</span>
            </div>
          </div>
		  <div class="control-group success">
            <label class="control-label" for="inputSuccess">Input with success</label>
            <div class="controls">
              <input type="text" id="inputSuccess">
              <span class="help-inline">Successfully entered</span>
            </div>
          </div>
		  <div class="control-group success">
            <label class="control-label" for="selectError">Select with success</label>
            <div class="controls">
              <select id="selectError">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
              <span class="help-inline">Successfully selected</span>
            </div>
          </div>
        </fieldset>
</form>
</body>
</html>

在线查看

在不同的浏览器窗口查看上面实例。

点击这里,下载本教程中使用到的所有 HTML、CSS、JS 和图片文件。

为什么有广告?:广告收入是作者继续投入更多业余时间的动力,也可以补贴服务器等的花费,本站也不会阻止屏蔽广告插件,请大家理解!