Bootstrap 表单

在本章中,咱们将学习怎么运用 Bootstrap 创立表单。Bootstrap 经过一些简略的 HTML 标签和扩展的类即可创立出不同款式的表单。

表单布局

Bootstrap 供给了下列类型的表单布局:

  • 笔直表单(默许)
  • 内联表单
  • 水平表单

笔直或根本表单

根本的表单结构是 Bootstrap 自带的,单个的表单控件主动接纳一些大局款式。下面列出了创立根本表单的过程:

  • 向父 <form> 元素增加 role="form"
  • 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳距离所必需的。
  • 向一切的文本元素 <input>、<textarea> 和 <select> 增加 class .form-control
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 根本表单</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
   <div class="form-group">
      <label for="name">称号</label>
      <input type="text" class="form-control" id="name" 
         placeholder="请输入称号">
   </div>
   <div class="form-group">
      <label for="inputfile">文件输入</label>
      <input type="file" id="inputfile">
      <p class="help-block">这里是块级协助文本的实例。</p>
   </div>
   <div class="checkbox">
      <label>
      <input type="checkbox"> 请打勾
      </label>
   </div>
   <button type="submit" class="btn btn-default">提交</button>
</form>

</body>
</html>

成果如下所示:

根本表单

内联表单

假如需求创立一个表单,它的一切元素是内联的,向左对齐的,标签是并排的,请向 <form> 标签增加 class .form-inline

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 内联表单</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-inline" role="form">
   <div class="form-group">
      <label class="sr-only" for="name">称号</label>
      <input type="text" class="form-control" id="name" 
         placeholder="请输入称号">
   </div>
   <div class="form-group">
      <label class="sr-only" for="inputfile">文件输入</label>
      <input type="file" id="inputfile">
   </div>
   <div class="checkbox">
      <label>
      <input type="checkbox"> 请打勾
      </label>
   </div>
   <button type="submit" class="btn btn-default">提交</button>
</form>

</body>
</html>

成果如下所示:

内联表单
  • 默许情况下,Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在运用内联表单时,您需求在表单控件上设置一个宽度。
  • 运用 class .sr-only,您能够躲藏内联表单的标签。

水平表单

水平表单与其他表单不只符号的数量上不同,并且表单的出现方式也不同。如需创立一个水平布局的表单,请按下面的几个过程进行:

  • 向父 <form> 元素增加 class .form-horizontal
  • 把标签和控件放在一个带有 class .form-group 的 <div> 中。
  • 向标签增加 class .control-label
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 水平表单</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form">
   <div class="form-group">
      <label for="firstname" class="col-sm-2 control-label">姓名</label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="firstname" 
            placeholder="请输入姓名">
      </div>
   </div>
   <div class="form-group">
      <label for="lastname" class="col-sm-2 control-label">姓</label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="lastname" 
            placeholder="请输入姓">
      </div>
   </div>
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <div class="checkbox">
            <label>
               <input type="checkbox"> 请记住我
            </label>
         </div>
      </div>
   </div>
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <button type="submit" class="btn btn-default">登录</button>
      </div>
   </div>
</form>

</body>
</html>

成果如下所示:

水平表单

支撑的表单控件

Bootstrap 支撑最常见的表单控件,主要是 input、textarea、checkbox、radio 和 select

输入框(Input)

最常见的表单文本字段是输入框 input。用户能够在其间输入大多数必要的表单数据。Bootstrap 供给了对一切原生的 HTML5 的 input 类型的支撑,包含:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、telcolor。恰当的 type 声明是必需的,这样才能让 input 取得完好的款式。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 输入框</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
  <div class="form-group">
    <label for="name">标签</label>
    <input type="text" class="form-control" placeholder="文本输入">
  </div>
 </form>

</body>
</html>

成果如下所示:

输入框

文本框(Textarea)

当您需求进行多行输入的时,则能够运用文本框 textarea。必要时能够改动 rows 特点(较少的行 = 较小的盒子,较多的行 = 较大的盒子)。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 文本框</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
  <div class="form-group">
    <label for="name">文本框</label>
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

</body>
</html>

成果如下所示:

文本框

复选框((Checkbox)和单选框(Radio)

复选框和单选按钮用于让用户从一系列预设置的选项中进行挑选。

  • 当创立表单时,假如您想让用户从列表中挑选若干个选项时,请运用 checkbox。假如您约束用户只能挑选一个选项,请运用 radio
  • 对一系列复选框和单选框运用 .checkbox-inline.radio-inline class,操控它们显现在同一行上。

下面的实例演示了这两种类型(默许和内联):

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 复选框和单选按钮</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<label for="name">默许的复选框和单选按钮的实例</label>
<div class="checkbox">
   <label><input type="checkbox" value="">选项 1</label>
</div>
<div class="checkbox">
   <label><input type="checkbox" value="">选项 2</label>
</div>

<div class="radio">
   <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" 
         value="option1" checked> 选项 1
   </label>
</div>
<div class="radio">
   <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" 
         value="option2">
         选项 2 - 挑选它将会撤销挑选选项 1
   </label>
</div>
<label for="name">内联的复选框和单选按钮的实例</label>
<div>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
   </label>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
   </label>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3
   </label>
   <label class="checkbox-inline">
      <input type="radio" name="optionsRadiosinline" id="optionsRadios3" 
         value="option1" checked> 选项 1
   </label>
   <label class="checkbox-inline">
      <input type="radio" name="optionsRadiosinline" id="optionsRadios4" 
         value="option2"> 选项 2
   </label>
</div>

</body>
</html>

成果如下所示:

复选框和单选按钮

挑选框(Select)

当您想让用户从多个选项中进行挑选,可是默许情况下只能挑选一个选项时,则运用挑选框。

  • 运用 <select> 展现列表选项,通常是那些用户很熟悉的挑选列表,比方州或许数字。
  • 运用 multiple="multiple" 答运用户挑选多个选项。

下面的实例演示了这两种类型(select 和 multiple):

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 挑选框</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
   <div class="form-group">
      <label for="name">挑选列表</label>
      <select class="form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>

      <label for="name">可多选的挑选列表</label>
      <select multiple class="form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
   </div>
</form>

</body>
</html>

成果如下所示:

挑选框

静态控件

当您需求在一个水平表单内的表单标签后放置纯文本时,请在 <p> 上运用 class .form-control-static

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 静态控件</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">暗码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" 
         placeholder="请输入暗码">
    </div>
  </div>
</form>

</body>
</html>

成果如下所示:

静态控件

表单控件状况

除了 :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)即可运用验证状况。

下面的实例演示了一切控件状况:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 表单控件状况</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form">
   <div class="form-group">
      <label class="col-sm-2 control-label">聚集</label>
      <div class="col-sm-10">
         <input class="form-control" id="focusedInput" type="text" 
            value="该输入框取得焦点...">
      </div>
   </div>
   <div class="form-group">
      <label for="inputPassword" class="col-sm-2 control-label">
         禁用
      </label>
      <div class="col-sm-10">
         <input class="form-control" id="disabledInput" type="text" 
            placeholder="该输入框制止输入..." disabled>
      </div>
   </div>
   <fieldset disabled>
      <div class="form-group">
         <label for="disabledTextInput"  class="col-sm-2 control-label">
            禁用输入(Fieldset disabled)
         </label>
         <div class="col-sm-10">
            <input type="text" id="disabledTextInput" class="form-control" 
               placeholder="制止输入">
         </div>
      </div>
      <div class="form-group">
         <label for="disabledSelect"  class="col-sm-2 control-label">
            禁用挑选菜单(Fieldset disabled)
         </label>
         <div class="col-sm-10">
            <select id="disabledSelect" class="form-control">
               <option>制止挑选</option>
            </select>
         </div>
      </div>
   </fieldset>
   <div class="form-group has-success">
      <label class="col-sm-2 control-label" for="inputSuccess">
         输入成功
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputSuccess">
      </div>
   </div>
   <div class="form-group has-warning">
      <label class="col-sm-2 control-label" for="inputWarning">
         输入正告
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputWarning">
      </div>
   </div>
   <div class="form-group has-error">
      <label class="col-sm-2 control-label" for="inputError">
         输入过错
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputError">
      </div>
   </div>
</form>

</body>
</html>

成果如下所示:

表单控件状况

表单控件巨细

您能够别离运用 class .input-lg.col-lg-* 来设置表单的高度和宽度。下面的实例演示了这点:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 表单控件巨细</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
   <div class="form-group">
      <input class="form-control input-lg" type="text" 
         placeholder=".input-lg">
   </div>

   <div class="form-group">
      <input class="form-control" type="text" placeholder="默许输入">
   </div>

   <div class="form-group">
      <input class="form-control input-sm" type="text" 
         placeholder=".input-sm">
   </div>
   <div class="form-group">
   </div>
   <div class="form-group">
      <select class="form-control input-lg">
         <option value="">.input-lg</option>
      </select>
   </div>
   <div class="form-group">
      <select class="form-control">
         <option value="">默许挑选</option>
      </select>
   </div>
   <div class="form-group">
      <select class="form-control input-sm">
         <option value="">.input-sm</option>
      </select>
   </div>

   <div class="row">
      <div class="col-lg-2">
         <input type="text" class="form-control" placeholder=".col-lg-2">
      </div>
      <div class="col-lg-3">
         <input type="text" class="form-control" placeholder=".col-lg-3">
      </div>
      <div class="col-lg-4">
         <input type="text" class="form-control" placeholder=".col-lg-4">
      </div>
   </div>
</form>

</body>
</html>

成果如下所示:

表单控件巨细

表单协助文本

Bootstrap 表单控件能够在输入框 input 上有一个块级协助文本。为了增加一个占用整个宽度的内容块,请在 <input> 后运用 .help-block。下面的实例演示了这点:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 表单协助文本</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
   <span>协助文本实例</span>
   <input class="form-control" type="text" placeholder="">
   <span class="help-block">一个较长的协助文本块,超越一行,
   需求扩展到下一行。本实例中的协助文本总共有两行。</span>
</form>

</body>
</html>

成果如下所示:

表单协助文本