Forms
在本章中,我们将学习如何使用Bootstrap轻松创建表单。 Bootstrap使用简单的HTML标记和扩展类可以轻松实现不同样式的表单。 在本章中,我们将学习如何使用Bootstrap轻松创建表单。
表格布局
Bootstrap为您提供以下类型的表单布局 -
- 垂直(默认)表单
- In-line form
- 横向形式
垂直或基本形式
基本的表单结构附带Bootstrap; 单独的表单控件自动接收一些全局样式。 要创建基本表单,请执行以下操作 -
将角色form添加到父“form”元素。
使用.form-group类在<div>中包装标签和控件。 这是最佳间距所必需的。
将.form-control类添加到所有文本“input”,“textarea”和“select”元素。
<form role = "form">
<div class = "form-group">
<label for = "name">Name</label>
<input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
</div>
<div class = "form-group">
<label for = "inputfile">File input</label>
<input type = "file" id = "inputfile">
<p class = "help-block">Example block-level help text here.</p>
</div>
<div class = "checkbox">
<label><input type = "checkbox"> Check me out</label>
</div>
<button type = "submit" class = "btn btn-default">Submit</button>
</form>
内联表格
要创建一个所有元素都是内联,左对齐和标签的表单,请将.form-inline类添加到“form”标记中。
<form class = "form-inline" role = "form">
<div class = "form-group">
<label class = "sr-only" for = "name">Name</label>
<input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
</div>
<div class = "form-group">
<label class = "sr-only" for = "inputfile">File input</label>
<input type = "file" id = "inputfile">
</div>
<div class = "checkbox">
<label><input type = "checkbox"> Check me out</label>
</div>
<button type = "submit" class = "btn btn-default">Submit</button>
</form>
默认情况下,输入,选择和textareas在Bootstrap中具有100%的宽度。 使用内联表单时,需要在表单控件上设置宽度。
使用.sr-only类,您可以隐藏内联表单的标签。
横向表格
水平形式与其他形式不同,不仅在标记量方面,而且在形式的呈现方面。 要创建使用水平布局的表单,请执行以下操作 -
将一个.form-horizontal类添加到父“form”元素。
使用.form-group类在<div>中包装标签和控件。
在标签中添加一类.control-label 。
<form class = "form-horizontal" role = "form">
<div class = "form-group">
<label for = "firstname" class = "col-sm-2 control-label">First Name</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "firstname" placeholder = "Enter First Name">
</div>
</div>
<div class = "form-group">
<label for = "lastname" class = "col-sm-2 control-label">Last Name</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Last Name">
</div>
</div>
<div class = "form-group">
<div class = "col-sm-offset-2 col-sm-10">
<div class = "checkbox">
<label><input type = "checkbox"> Remember me</label>
</div>
</div>
</div>
<div class = "form-group">
<div class = "col-sm-offset-2 col-sm-10">
<button type = "submit" class = "btn btn-default">Sign in</button>
</div>
</div>
</form>
支持的表单控件
Bootstrap本身支持最常见的表单控件,主要是input, textarea, checkbox, radio, and select.
Inputs
最常见的表单文本字段是输入字段。 这是用户输入大部分基本表单数据的地方。 Bootstrap支持所有原生HTML5输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel,和color 。 需要正确的type声明才能使Inputs完全样式化。
<form role = "form">
<div class = "form-group">
<label for = "name">Label</label>
<input type = "text" class = "form-control" placeholder = "Text input">
</div>
</form>
Textarea
当您需要多行输入时,将使用textarea。 根据需要更改rows属性(更少的行=更小的框,更多行=更大的框)。
<form role = "form">
<div class = "form-group">
<label for = "name">Text Area</label>
<textarea class = "form-control" rows = "3"></textarea>
</div>
</form>
复选框和单选按钮
当您希望用户从预设选项列表中进行选择时,复选框和单选按钮非常棒。
构建表单时,如果希望用户从列表中选择任意数量的选项,请使用checkbox 。 如果要将用户限制为仅一个选择,请使用radio 。
将.checkbox-inline或.radio-inline类用于一系列复选框或控件的无线电显示在同一行上。
以下示例演示了(默认和内联)类型 -
<label for = "name">Example of Default Checkbox and radio button </label>
<div class = "checkbox">
<label>
<input type = "checkbox" value = "">Option 1
</label>
</div>
<div class = "checkbox">
<label>
<input type = "checkbox" value = "">Option 2
</label>
</div>
<div class = "radio">
<label>
<input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked> Option 1
</label>
</div>
<div class = "radio">
<label>
<input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2">
Option 2 - selecting it will deselect option 1
</label>
</div>
<label for = "name">Example of Inline Checkbox and radio button </label>
<div>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Option 1
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Option 2
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox3" value = "option3"> Option 3
</label>
<label class = "checkbox-inline">
<input type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "option1" checked> Option 1
</label>
<label class = "checkbox-inline">
<input type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "option2"> Option 2
</label>
</div>
Selects
如果要允许用户从多个选项中进行选择,则使用选择,但默认情况下只允许选择一个选项。
使用表示用户熟悉的列表选项,例如状态或数字。
使用multiple = "multiple"允许用户选择多个选项。
以下示例演示了(选择和多个)类型 -
<form role = "form">
<div class = "form-group">
<label for = "name">Select list</label>
<select class = "form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for = "name">Mutiple Select list</label>
<select multiple class = "form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
静态控制
当您需要在水平表单中的表单标签旁边放置纯文本时,请在“p”上使用.form-control-static类。
<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">Password</label>
<div class = "col-sm-10">
<input type = "password" class = "form-control" id = "inputPassword" placeholder = "Password">
</div>
</div>
</form>
表格控制国
除了:focus (即用户点击输入或其中的选项卡)状态之外,Bootstrap还为禁用的输入和类提供样式以进行表单验证。
输入焦点
当输入接收:focus ,将删除输入的轮廓并应用box-shadow 。
禁用输入
如果您需要禁用输入,只需添加disabled属性不仅会禁用它; 当光标悬停在元素上时,它也会改变样式和鼠标光标。
禁用的字段集
将disabled属性添加到
验证国家
Bootstrap包含错误,警告和成功消息的验证样式。 要使用,只需将适当的类( .has-warning, .has-error, or .has-success )添加到父元素即可。
以下示例演示了所有表单控件状态 -
<form class = "form-horizontal" role = "form">
<div class = "form-group">
<label class = "col-sm-2 control-label">Focused</label>
<div class = "col-sm-10">
<input class = "form-control" id = "focusedInput" type = "text" value = "This is focused...">
</div>
</div>
<div class = "form-group">
<label for = "inputPassword" class = "col-sm-2 control-label">Disabled</label>
<div class = "col-sm-10">
<input class = "form-control" id = "disabledInput" type = "text" placeholder = "Disabled input here..." disabled>
</div>
</div>
<fieldset disabled>
<div class = "form-group">
<label for = "disabledTextInput" class = "col-sm-2 control-label">
Disabled input (Fieldset disabled)
</label>
<div class = "col-sm-10">
<input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Disabled input">
</div>
</div>
<div class = "form-group">
<label for = "disabledSelect" class = "col-sm-2 control-label">
Disabled select menu (Fieldset disabled)
</label>
<div class = "col-sm-10">
<select id = "disabledSelect" class = "form-control">
<option>Disabled select</option>
</select>
</div>
</div>
</fieldset>
<div class = "form-group has-success">
<label class = "col-sm-2 control-label" for = "inputSuccess">
Input with success
</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">
Input with warning
</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">
Input with error
</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputError">
</div>
</div>
</form>
表格控制尺寸
您可以分别使用.input-lg和.col-lg-*等类来设置表单的高度和宽度。 以下示例演示了这一点 -
<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 = "Default input">
</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 = "">Default select</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>
帮助文字
Bootstrap表单控件可以具有与输入一起流动的块级帮助文本。 要添加全宽度的内容.help-block ,请在“输入”后使用.help-block 。 以下示例演示了这一点 -
<form role = "form">
<span>Example of Help Text</span>
<input class = "form-control" type = "text" placeholder = "">
<span class = "help-block">
A longer block of help text that breaks onto a new line and may extend beyond one line.
</span>
</form>