Bootstrap入门3——表单

最新推荐文章于 2025-01-09 22:19:37 发布

原创最新推荐文章于 2025-01-09 22:19:37 发布 · 284 阅读

0 ·

CC 4.0 BY-SA版权

bootstrap 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了HTML表单的设计，包括基础表单、水平表单和内联表单的构建方式，以及如何使用下拉选择框、文本域、复选框和单选按钮等控件。同时，文章还讲解了按钮的不同样式、大小、禁用状态和验证状态的实现方法，为网页设计者提供了全面的表单与按钮设计指南。

基础表单

<form role="form">
	<div class="form-group">
		<label for="myEmail">邮箱
		</label>
		<input type="email" class="form-control" id="myEail" placeholder="请输入您的邮箱">
	</div>

	<div class="form-group">
		<label for="myPassword">密码
		</label>
		<input type="password" class="form-control" id="myPassword" placeholder="请输入您的密码">
	</div>

	<div class="checkbox">
		<label>
			<input type="checkbox">记住密码
		</label>
	</div>

	<button type="submit" class="btn btn-default">
	进入邮箱
	</button>
</form>

水平表单

<form role="form" class="form-horizontal">
	<div class="form-group">
		<label for="myEmail" class="col-md-2 control-label">邮箱
		</label>
		<div class="col-md-10">
			<input type="email" id="myEmail" class="form-control" placeholder="请输入您的邮箱" >
		</div>
	</div>

	<div class="form-group">
		<label for="myPassword" class="col-md-2 control-label">密码
		</label>
		<div class="col-md-10">
			<input type="password" class="form-control" placeholder="请输入您的密码" id="myPassword" >
		</div>
	</div>
	
	<div class="form-group">
		<div class="col-md-8 col-md-offset-2">
			<div class="checkbox">
				<label>
					<input type="checkbox">记住密码
				</label>
			</div>
		</div>
	</div>

	<div class="form-group">
		<div class="col-md-8 col-md-offset-2">
			<button type="submit" class="btn btn-default">
				进入邮箱
			</button>
		</div>
	</div>
</form>

内联表单

只需添加一个class="form-inline"到form标签即可。
若将class="sr-only"添加到label标签，则label不再显示，而且不会占据空的一行

下拉选择框

<form role="form">
 <div class="form-group">
  <select name="" id="" class="form-control">
   <option value="">1</option>
   <option value="">2</option>
   <option value="">3</option>
   <option value="">4</option>
   <option value="">5</option>
  </select>
 </div>
 <div class="form-group">
  <select name="" id="" class="form-control" multiple="">
   <option value="">1</option>
   <option value="">2</option>
   <option value="">3</option>
   <option value="">4</option>
   <option value="">5</option>
  </select>
 </div>
</form>

文本域

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

复选框和单选按钮

<form roel="form">
	<div class="checkbox">
		<label>
			<input type="checkbox" value="">记住密码
		</label>
	</div>

	<div class="radio">
		<label>
			<input type="radio" name="sex" value="boy" checked>男
		</label>
	</div>

	<div class="radio">
		<label>
			<input type="radio" name="sex" value="girl"> 女
		</label>
	</div>
</form>

复选和单选框水平排列

在label标签上添加类名"checkbox-inline"，“radio-inline”。

按钮

样式

class="btn"
class="btn btn-primary"//主要按钮，蓝色
class="btn btn-success"//成功按钮，绿色
class="btn btn-info"//信息按钮，浅蓝色
class="btn btn-warning"//警告按钮，橙色
class="btn btn-danger"//危险按钮，红色

大小
在button标签中添加一个类：btn-lg或btn-sm即可。
块状按钮
在button标签中添加一个类：btn-block即可。此时按钮宽度为100%.
禁用状态
方法1：在标签中添加disabled属性(可以禁止元素默认行为)
方法2：在标签中添加disable类

表单控件的大小

input标签中添加类名：input-lg,input-sm

表单控件禁用状态

在要禁用的表单控件上加上"disabled"
如果在fieldset设置了disabled属性，整个域都处于被禁用的状态

表单控件验证状态

has-warning 警告状态（黄色）
has-error错误状态（红色）
has-success成功状态（绿色）

<form role="form">
	<div class="form-group has-success">
		<label class="control-label" for="inputSuccess1">成功状态
			<input class="form-control" id="inputSuccess1" type="text" placeholder="成功状态">
		</label>
	</div>
	......
</form>

表单提醒信息

<div class="form-group has-success has-feedback">
	<label class="control-label" for="inputSuccess1">
		成功状态
	</label>
	<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态">
	<span class="help-block">你输入的信息是对的</span>
	<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

多标签支持

<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="##" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span按钮标签</span>
<div class="btn btn-default">div按钮标签</div>

图像

给img添加类：

img-responsive：响应式图片
img-rounded：圆角图片
img-circle：圆形图片
img-thumbnail：缩略图片

图标

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-plus"></span>