Form表单&Bootstrap表单控件

表单(Form)是HTML网页交互中最重要的部分,同时也是Bootstrap框架中的核心内容,表单提供了丰富的样式(基础、内联、横向)。结合各种各样的表单控件,利用各种表单控件不同的状态、大小、分组,可以组合出绚丽多彩的表单。下面详细介绍表单的各种功能。
基础表单
Bootstrap对基础表单未做太多的定制化效果设计,默认都使用全局设置,只是对表单内的fieldset、legend、label标签进行了设定,将这些元素的margin、padding、border等进行了细化设置。
如果在select、input、textarea元素上应用了.form-control样式,显示的宽度会变成100%,并且placeholder的颜色都设置成了#999999。主要源码如下:

.form-control {
display: block;
width: 100%; /*设置宽度100%*/
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc; /*边框设置*/
border-radius: 4px; /*圆角设置*/
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); /*添加阴影*/
/*box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需 水平阴影的位置 允许负值
v-shadow 必需 垂直阴影的位置 允许负值
blur 可选 模糊距离
spread 可选 阴影的尺寸
color 可选 阴影的颜色
inset 可选 将外部阴影 (outset) 改为内部阴影*/
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
/*transition: property duration timing-function delay;
transition-property 规定设置过渡效果的 CSS 属性的名称
transition-duration 规定完成过渡效果需要多少秒或毫秒
transition-timing-function 规定速度效果的速度曲线
transition-delay 定义过渡效果何时开始*/
}
.form-control:focus {
border-color: #66afe9; /*作用域得到焦点时边框的颜色*/
outline: 0;
/*outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。*/
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-control::-moz-placeholder {
color: #999; /*placeholder的文本颜色*/
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #999;
}
.form-control::-webkit-input-placeholder {
color: #999;
}

使用方式如下:

<form>
   
<fieldset>
 <!-- fieldset 元素可将表单内的相关元素分组 -->
<legend>用户登录</legend>

<!-- legend 元素为 fieldset 元素定义标题(caption) -->
<div class="form-group">

<label for="login">登录账户</label>

<!-- <label> 标签为 input 元素定义标注(标记) -->
<!-- 注:label 元素不会向用户呈现任何特殊效果
不过,它为鼠标用户改进了可用性
如果您在label元素内点击文本,就会触发此控件
即当用户选择该标签时浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。 -->

<input type="email" class="form-control"
placeholder="请输入用户名" id="login">
</div>
<div class="form-group">
<label for="passward">密码</label>
<input type="text" class="form-control"
placeholder="请输入密码" id="passward">
</div>
<div class="checkbox">
<label><input type="checkbox">记住密码</label>
</div>
<button type="submit" class="btn btn-default">登录</button>
</fieldset>
</form>

运行效果如图
wechatimg5
注意:
在上例中,提示语label和input元素放在一个样式为.form-group的div里了。.form-group样式提供了一个margin-bottom:15px的底部外边距,所以可以很清晰地看到每一组控件。

.form-group {
margin-bottom: 15px;
}

内联表单
有的时候,我们可能需要一个所有控件都在一行中的表单。要实现这种内联样式效果,只需要在普通的form元素上应用一个.form-inline样式,即可将表单内的元素设置为内联样式。
水平线上的唯一因素就是要控制元素的显示方式为display: inline-block,所以只需要为相应的子元素设置display属性即可。但需要注意的是,该.form-inline样式只能在大于768像素的浏览器上才能应用。

@media (min-width: 768px) {
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
.form-inline .form-control-static {
display: inline-block;
}
.form-inline .input-group {
display: inline-table;
vertical-align: middle;
}
.form-inline .input-group .input-group-addon,
.form-inline .input-group .input-group-btn,
.form-inline .input-group .form-control {
width: auto;
}
.form-inline .input-group > .form-control {
width: 100%;
}
.form-inline .control-label {
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .radio,
.form-inline .checkbox {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .radio label,
.form-inline .checkbox label {
padding-left: 0;
}
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
position: relative;
margin-left: 0;
}
.form-inline .has-feedback .form-control-feedback {
top: 0;
}
}

要注意,由于默认的样式为.form-control,且其input、select和textarea的宽度都是100%,所以在使用内联表单的时候是无效的,需要对这些控件元素单独设置宽度width,或者外面再加上一层带有.form-group样式的div元素。示例如下:

<form class="form-inline">
<div class="form-group">

<input type="text" class="form-control" placeholder="请输入你的用户名">
</div>

<div class="form-group">

<input type="text" class="form-control" placeholder="请输入你的密码">

</div>

<div class="checkbox">
<label><input type="checkbox">记住密码</label>
</div>
<button type="submit" class="btn btn-default">登录</button>

</form>

但这种情况下,如果再设置一个label的话,input又换行了。所以如果非要label的话,那就只能在input所在div元素的上边再加一个div元素用于包含label标签。比如:

<div class="form-group">

<label>用户名:</label>

</div>

<div class="form-group">
<input type="text" class="form-control" placeholder="请输入你的用户名">

</div>

注意
如果没有为每个输入控件设置label,屏幕阅读器将无法正确识别。对于这种内联表单,可以通过为label设置.sr-only样式将其隐藏。比如:

<div class="form-group">
<label class="sr-only" for="account">登录用户名</label>
<input type="text" class="form-control" id="account" placeholder="请输入你的用户名">

</div>

横向表单
横向表单与内联表单的使用方式不太一样,其不能在form元素上简单应用一个.form-horizontal样式,这是因为.form-horizontal样式本身没有做什么特殊的设置,只简单设置了一下相关的padding和margin值。源码如下:

.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
padding-top: 7px;
margin-top: 0;
margin-bottom: 0;
}
.form-horizontal .radio,
.form-horizontal .checkbox {
min-height: 27px;
}
.form-horizontal .form-group {
margin-right: -15px;
margin-left: -15px;
}
@media (min-width: 768px) {
.form-horizontal .control-label {
padding-top: 7px;
margin-bottom: 0;
text-align: right;
}
}
.form-horizontal .has-feedback .form-control-feedback {
right: 15px;
}
@media (min-width: 768px) {
.form-horizontal .form-group-lg .control-label {
padding-top: 14.333333px;
font-size: 18px;
}
}
@media (min-width: 768px) {
.form-horizontal .form-group-sm .control-label {
padding-top: 6px;
font-size: 12px;
}
}

要实现横向表单,不仅要应用上述样式,还要使用Bootstrap预置的栅格类,以便将label和控件水平并排布局。由于.form-horizontal样式改变了.form-group的行为,将其表现得像栅格系统中的行(row)一样,因此就无需再使用.row样

<form class="form-horizontal" role="form">

<div class="form-group">
<label for="account" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="email" class="form-control" id=" account "
placeholder="请输入你的用户名">
</div>

</div>

<div class="form-group">

<label for="password" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password"
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>

表单控件
在默认的Bootstrap源码里,对input、select、testarea都有良好的支持,尤其是对现有HTML5语法下的input都进行了支持(如type为text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color的元素)。
1.input元素
在使用input元素的时候,必须声明type类型,否则可能会引起其他问题,因为Bootstrap在定义这些样式的时候都指定了type类型,比如,input[type=”text”]。


<input type="text" placeholder=“文本输入框”>

2.select元素
下拉列表select元素的使用方式和原始的一致,多行选择设置mulitiple属性为multiple即可。Bootstrap会为这些默认的元素提供统一风格的显示。示例如下:

<select>
<option>1</option>

</select>

<select multiple="multiple">
<option>1</option>
<option>2</option>

</select>

3.textarea元素
同样,在textarea元素里定义了rows数字即可定义大文本框的高度,定义cols可以定义大文本框的宽度。但是如果在该框架上应用了.form-control样式,则cols属性不起作用,因为.form-control样式的表单控件都设置了100%的宽度(或auto)。所以大家在使用时,一旦设置了该样式,就不需要再设置cols属性了。如:


<textarea class="form-control" rows="3"></textarea>

4.checkbox和radio
checkbox和radio是input元素里两个非常特殊的type,通常在使用的过程中和label文字搭配,但通常会出现左右边距对不齐的问题。为此,Bootstrap进行了标准设置,开发人员在使用的过程中遵循如下方式即可:

<div class="checkbox">
<label><input type="checkbox" value="">是否想赚大钱?</label>

</div>

<div class="radio">
<label>
<input type="radio" name="optionsRadios" value="female" checked>请确保,您喜欢女人?
</label>

</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" value="male">请确保,您喜欢男人?
</label>

</div>

即使用的时候,每个input外部都要用label包住,并且在最外层用容器元素包住,并应用相应的.checkbox和.radio样式。主要源码如下:

.radio,
.checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
.radio label,
.checkbox label {
min-height: 20px;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
position: absolute;
margin-top: 4px \9;
margin-left: -20px;
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px;
}
.radio-inline,
.checkbox-inline {
position: relative;
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px;
}

有些checkbox或者radio元素中文本很少,可能需要横向显示,为此Bootstrap也提供了相应的内联样式.checkbox-inline和.radio-inline,在label上添加样式即可。
控件状态
每个控件(尤其是input)在使用的过程中,可能都会有很多种状态,比如输入内容的时候有焦点提示,输错的时候有出错提示等。Bootstrap提供了3种状态的样式可供使用,分别是:焦点状态、禁用状态、验证提示状态。
1.焦点状态
焦点状态的实现方式是在选择器:focus上删除默认的outline样式,重新应用一个新的box-shadow样式,从而实现焦点状态下,input出现柔和的阴影边框(注意,该效果必须使用.form-control样式才行)。
该效果实现源码如下:

.form-control:focus {
border-color: #66afe9; /*作用域得到焦点时边框的颜色*/
outline: 0;
/*outline (轮廓)是绘制于元素周围的一条线,
位于边框边缘的外围,可起到突出元素的作用。*/
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

Bootstrap对fail、radio、checkbox的焦点效果做了特殊处理,以便更圆形化。源码如下:

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
/*outline-offset对轮廓进行偏移,并在边框边缘进行绘制*/
}

2.禁用状态
禁用状态的实现方式主要是完善默认disabled状态的显示状态,使用方式和普通的disabled一样,只需要在禁用元素上使用disabled属性即可。使用方法如下:


<input type="text" placeholder="Disabled input here..." disabled>

其源码主要是设置了不准输入的鼠标样式和背景颜色(灰色)。注意,只有带.form-control样式的控件才会更改背景色。请看下面的源码:

.form-control[disabled],
.form-control[readonly],/*readonly 属性规定输入字段为只读*/
fieldset[disabled] .form-control {
background-color: #eee;
opacity: 1;
}
.form-control[disabled],
fieldset[disabled] .form-control {
cursor: not-allowed;
/* 若form-control控件或fieldset元素被禁用,显示不允许输入手形图标*/
}


而如果不使用上述样式,直接在普通的元素上使用disabled属性,则只会显示一个不能输入的手形图标。源码如下:

input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"].disabled,
input[type="checkbox"].disabled,
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"] {
cursor: not-allowed;
}
.radio-inline.disabled,
.checkbox-inline.disabled,
fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox-inline {
cursor: not-allowed;
}
.radio.disabled label,
.checkbox.disabled label,
fieldset[disabled] .radio label,
fieldset[disabled] .checkbox label {
cursor: not-allowed;
}

从上述源码可以看出,fieldset如果使用了disabled属性,则fieldset内部的input、select、textarea或应用了.form-control样式的其他控件也将为禁用状态。让我们来验证一下,示例如下:

<fieldset disabled>
<legend><input></legend>
<input type="text" placeholder="Disabled input">
<select>

<option>不可选择</option>
</select>
<div class="checkbox">
<label><input type="checkbox">记住密码</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</fieldset>

运行后可以发现大部分都被禁用了,但是legend内的input却没有被禁用,依然可以输入文本,这是因为这是HTML5的一个限制,即fieldset内的第一个legend元素不受disabled的影响。Bootstrap为了遵守这一规则(其实实现起来也很复杂,要用JavaScript代码进行实现)就继续保持原状了,使用过程中要特别注意。
注意:
由于IE不支持fieldset下的disabled属性(比如,IE10不支持input和button),所以IE下的开发者需要用JavaScript代码再进行特殊处理。
fieldset上应用disabled时,fieldset内部的a标签在所有浏览器下的单击行为都不能被禁用(比如:),需要使用JavaScript代码再进行特殊处理。
3.验证提示状态
在填写表单的时候,经常要提示用户其输入内容是否合法,长度是否够用,再次输入的密码是否和第一次输入的密码一致,或者输入的用户名存在还是不存在等问题,不同的提示可能需要不同的提示状态(如,颜色、边框、提示语等)。Bootstrap提供了.has-warning、. has-error、.has-success三种样式用于分别表示警告(黄色)、错误(红色)、成功(绿色)语境的内容。

有的时候,我们在验证状态时提供所对应状态的小图标,以便能够直观地显示,实现效果如图所示。
wechatimg27
从运行效果可以看到,小图标肯定是固定在输入框的右边的。要实现这种效果,通常要解决两个问题:首先设置输入框父元素的定位方式为相对定位,然后设置这种小图标的定位方式为绝对定位(并设置right值)。
Bootstrap针对该功能提供了特殊的feedback样式,用于实现该效果。其用法如下:

<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" />

<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

该效果运用了两个样式:父容器上的has-feedback样式用于设置定位方式;小图标元素上的form-control-feedback样式用于设置图标的显示大小等。两个样式的源码正好符合我们前面所说的要求,具体源码如下:

.has-feedback {
position: relative;
}
.has-feedback .form-control {
padding-right: 42.5px;
}
.form-control-feedback {
position: absolute;
top: 0;
right: 0;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
pointer-events: none;
}

控件大小
Bootstrap提供了两个样式用于设置稍大或者稍小的input输入框,分别是:.input-lg和.input-sm。
控件大小的实现思路是给input输入框设定不同大小的padding、font-size、border-radius值。从如下源码也可以看出,.input-lg和.input-sm样式不仅适用于input,也适用于select和textarea元素。

.input-sm {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
select.input-sm {
height: 30px;
line-height: 30px;
}
textarea.input-sm,
select[multiple].input-sm {
height: auto;
}
.input-lg {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
select.input-lg {
height: 46px;
line-height: 46px;
}
textarea.input-lg,
select[multiple].input-lg {
height: auto;
}

在设置大小的时候只设置了高度,并没有设置宽度。所以,在实际设计过程中,对于不同尺寸的元素还要进行相应宽度的调整。好在这些元素默认都是100%显示,而且还有栅格系统提供的支持。所以对于控制宽度,可以按照如下方式设置:

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

</div>

</div>







您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注