0%

6.9.2 行内表单

发表于 更新于 分类于 ， ，

6.9.2 行内表单

行内表单的意思是,将表单内所有控件都放在单独一行。为<form>元素或表单控件的容器设置.form-inline样式即可实现行内表单。
行内表单会让所有表单控件表现为inline-block级别的控件,其只适用于viewport宽度≥768px的情形,如果viewport再小的话表单还是会以堆叠方式显示(重新变回普通基础表单的显示方式)。
需要说明的是,Bootstrap默认将输入框、单选/多选框控件设置为width:100%;,但对于行内表单,Bootstrap将这些元素的宽度设置为width:auto;,这样才能将多个控件排列在同一行。但在这种方式下,可能需要开发者手动设置表单控件的宽度。
只有当表单内的控件不是太多的情况下才适合使用行内表单,否则行内表单的显示会比较丑陋。

程序示例

下面代码示范了行内表单的用法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title> 基础表单 </title>
	<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
	<div class="container">
		<form action="http://www.fkit.org">
			<!-- .form-group样式的元素作为容器 -->
			<div class="form-group">
				<label for="name">用户名</label>
				<!-- .form-control样式应用于表单控件 -->
				<input type="text" class="form-control" id="name" placeholder="用户名">
			</div>
			<div class="form-group">
				<label for="passwd">密码</label>
				<!-- .form-control样式应用于表单控件 -->
				<input type="password" class="form-control" id="passwd" placeholder="密码">
			</div>
			<div class="form-group">
				<label for="photo">选择照片上传</label>
				<input type="file" id="photo">
			</div>
			<!-- .checkbox样式的元素作为容器 -->
			<div class="checkbox">
				<label>
					<input type="checkbox"> 婚否
				</label>
			</div>
			<button type="submit" class="btn btn-default">提交</button>
		</form>
	</div>
	<script type="text/javascript" src="../jquery-3.1.1.js"></script>
	<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

在该页面代码中,并未使用<form>元素作为表单控件的容器,而是直接使用<div>元素作为表单控件的容器,并为该<div>元素指定了class="form-inline",这表明该容器将会以行内表单的形式来显示这些控件。
需要说明的是,即使对于行内表单,也应该为每个表单控件配置对应的<label>元素,否则屏幕阅读器将无法正确识别它们,如果为了节省行内表单的空间,可为<label>元素设置.sr-only来隐藏该元素(只有在屏幕阅读器上才会显示出来)。
此外,还可使用aria-label、aria-labelledby或title属性来代替<label>元素,但如果这些属性都不存在,屏幕阅读器可能会读取placeholder 属性(如果指定了该属性),但使用placeholder来代替aria-label、aria-labelledby其实并不妥当。

程序示例 使用.sr-only隐藏label元素

下面代码示范了使用.sr-only在屏幕上将<label>元素隐藏的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>

<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title> 行内表单 </title>
	<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
	<div class="container">
		<div class="form-inline">
			<!-- .form-group样式的元素作为容器 -->
			<div class="form-group">
				<label for="name" class="sr-only">用户名</label>
				<!-- .form-control样式应用于表单控件 -->
				<input type="text" class="form-control" id="name" placeholder="用户名">
			</div>
			<div class="form-group">
				<label for="passwd" class="sr-only">密码</label>
				<!-- .form-control样式应用于表单控件 -->
				<input type="password" class="form-control" id="passwd" placeholder="密码">
			</div>
			<!-- .checkbox样式的元素作为容器 -->
			<div class="checkbox">
				<label>
					<input type="checkbox"> 婚否
				</label>
			</div>
			<button type="submit" class="btn btn-default">提交</button>
		</div>
	</div>
	<script type="text/javascript" src="../jquery-3.1.1.js"></script>
	<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

原文链接: 6.9.2 行内表单