垂直布局的HTML表单

对于比较复杂的表单，要填写的内容相对较多，采用水平布局显然不合适。因此，垂直布局的表单更加常用。垂直对齐的表单中，标签和输入框可以使用三种对齐方式，包括顶对齐、左对齐和右对齐。

顶对齐可以缩短用户填写表单的时间，由于标签和输入框非常靠近，处理起来毫不费力，用户只需顺着表单向下移动，就可完成整个表单。如图 7‑22 所示：

图7-22 顶对齐的表单

但是，顶对齐的标签会占用额外的垂直空间。因此，如果可供使用的垂直屏幕空间较小，应当谨慎使用顶对齐标签。另外，顶对齐的表单还应当采用合适的垂直距离，输入框之间的垂直距离太小或太大都会影响填写。一般而言，最好使用输入框高度的50%到70%，作为相邻输入框的间距。

如果人们不熟悉表单要收集的数据，或者在逻辑上分组有困难，左对齐的标签浏览起来可能更容易。用户只需要上下看看左侧的标签就可以了，而不会被输入框打断思路。如图 7‑23 所示：

图7-23 左对齐的表单

左对齐可以占用较少的垂直屏幕空间，但有些长标签会增加标签和输入框之间的距离，用户必须左右来回跳转目光，来找到标签对应的输入框，因而影响填写表单的时间。

于是产生了一种替代的方案，右对齐标签的布局，它使得标签和输入框之间的联系更紧密，有助于快速填写表单。如图 7‑24 所示：

图7-24 右对齐的表单

然而，右对齐会导致左边参差不齐，会降低浏览表单的效率。对于西方国家，人们习惯于从左至右的书写，右对齐会给这些用户造成阅读障碍。

由此可知，三种对齐方式各有利弊，在实际应用中，到底采用哪种对齐方式，则由应用场景和具体的目标而定，不能一概而论。根据中文的语言习惯，以及大多数网站的情况，右对齐的表单比较常用。

接下来，通过一个实例，来简单介绍一下垂直布局表单的实现方法。众所周知，表格本身是一种网格结构，其最大特点是同一列都具有相同的宽度，因此，表格本身是一种很好的布局工具。

由于表单内容相对简单，每行一般只包含一项内容，都是在一个标签后，紧跟一项待填写的表单元素。因此，表单的就相当于 n 行两列的布局，一列是标签，一列是待填写的表单元素。

如果把表单的每一行放在一个块级容器中（如，div、p等），并让每一列都具有固定宽度，则表单的内容就具有表格的特点，其布局也就非常简单。

在表单元素中，label 元素默认生成一个行内框，其他元素则生成一个原子行内级框。因此，如果把 label 元素的 display 属性设置为 inline-block，它也会生成一个原子行内级框。这样的话，就可以为表单上的所有元素设置固定宽度，实现网格布局。

当然，对于复杂的表单，一行内可能有三列、四列，甚至更多列。无论有多复杂，都可以沿用这种思想，让每一列生成一个原子行内级框，来采用网格布局。如，以下表单：

<form action="" method="post">
<p><label>姓名: </label><input type="text" name="name" /></p>
<p><label>E-Mail: </label><input type="email" name="email" /></p>
<p><label>所在城市: </label>
<select name="city">
<option value="1">北京</option>
<option value="2">上海</option>
</select>
</p>
<p><label>性别: </label>
<input type="radio" name="sex" value="male" checked />男
<input type="radio" name="sex" value="female" />女
</p>
<p><label>个人爱好: </label>
<input type="checkbox" name="music" value="music" checked />音乐
<input type="checkbox" name="swimming" value="swimming" />游泳
<input type="checkbox" name="football" value="football" checked />足球
<input type="checkbox" name="skating" value="skating" />轮滑
</p>
<p><label>自我介绍: </label><textarea name="introduce" ></textarea></p>
</form>

在没有进行布局设计之前，运行结果如图 7‑25 所示：

图7-25 没有应用样式的表单

事实上，网格布局的核心，就是行和列的布局，行布局负责元素在行内的水平摆放整齐，列布局负责相同的列能够正确对齐。

首先，进行行格式化。为了防止行之间过于拥挤，可以为 p 元素添加 10px 的上下外边距。由于相邻的 p 元素会发生外边距合并，则所有行之间的距离都将是 10px。

form p {
margin: 10px 0;
}

在一行内，如果 label 和 input 元素生成的框垂直居中对齐，会比较美观。这样的话，无论行有多高，这些元素会始终保持居中对齐。

label, input {
vertical-align: middle;
}

其次，进行列格式化。列格式化的目的，是实现网格中列的对齐。如果相同的列都等宽的话，网格自然就会对齐。因此，只需把 label 元素的 display 属性设置为 inline-block，再为 label 和 input 元素设置合适的宽度，即可实现列的对齐。

label {
width: 80px;
display: inline-block;
}
input {
width: 240px;
}

当为 input 元素设置宽度 240px 后，预览就会发现，所有的input 元素（如radio、checkbox、提交按钮等）的宽度都将变成 240px。

解决这个问题的一个办法是，使用属性选择器寻找特定类型的表单元素，专门设置宽度。如，专门设置文本输入框的宽度：

input[type="text"] {
width: 240px;
}

或者如果希望大多数的 input 元素的宽度都是 240px，只有 radio 和 checkbox 使用其它宽度，则可以将这些元素的宽度设置为 auto，来覆盖前面对 input 元素的设置：

input[type="radio"],
input[type="checkbox"] {
width: auto;
}

遗憾的是，属性选择器在IE6及更低版本中是无效的。因此，在属性选择器得到广泛支持之前，区分输入元素最好的方法，是给他们分配一个类。如，为单选按钮分配类名 radio，为复现框分配类名 checkbox：

.radio, .checkbox {
width: auto;
}

再为 label元素设置 text-align: right 来实现标签的右对齐，并通过右侧的外边距，使 label 和 input 之间保持适当的距离，防止标签和输入框过于拥挤。

label {
text-align: right;
margin-right: 10px;
}

好了，表单元素现在已经按照网格排列整齐。然后，再按照前面介绍的方法，对每个表单元素的细节进行处理，来实现需要的表单效果。运行结果如图 7‑26 所示：

图7-26 垂直布局的表单

从上图可以看出，本节所实现的表单非常朴素。这是因为本节的重点，是介绍表单的布局方法，而不是表单的美工方法。掌握基本布局方法之后，设计师可以充分发挥想象，通过更多的美工元素，来实现美轮美奂、精彩绝伦的表单。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

垂直布局的HTML表单相关推荐

水平布局的HTML表单
对于非常简短的表单,用户要填写的内容比较少,表单本身也不会占用太多空间,比如网站顶端的快捷登录表单,它只包含用户名.密码和登录按钮: <form action="" meth ...
Qt布局管理器之表单布局(QFormLayout)
QFormLayout顾名思义,主要用来做表单的输入及显示.和前面讲到的QBoxLayout.QGridLayout类似,QFormLayout可以插入widget.layout,直接用QGridLa ...
Bootstrap表单的默认布局
Bootstrap 自带了基本的表单样式,不需要添加任何辅助类,即可使用表单的默认布局.默认布局中,表单元素采用垂直布局,标签和输入框使用顶对齐方式.如: <form> <fie ...
JEECG 3.7.8 新版表单校验提示风格使用升级方法（validform 新风格漂亮，布局简单)
JEECG 表单校验新提示风格使用讲解&升级方法 (validform 新风格漂亮,布局简单) JEECG 表单校验采用的是validform,默认的校验提示需要占用页面布局,提示效果较传统. ...
JavaFX官方教程（五）之在JavaFX中创建表单
翻译自在JavaFX中创建表单在开发应用程序时,创建表单是一项常见活动.本教程将向您介绍屏幕布局的基础知识,如何将控件添加到布局窗格以及如何创建输入事件. 在本教程中,您将使用JavaFX构建如 ...
Bootstrap3 表单
表单 Bootstrap 为表单和表单控件提供了一些全局样式,不需要添加任何辅助类,即可让表单使用默认布局.默认布局中,表单元素采用垂直布局,标签和输入框采用顶对齐方式. Bootstrap 中创建表 ...
React 表单源码阅读笔记
1 概念 1.1 什么是表单实际上广义上的表单并不是特别好界定,维基上讲表单是一系列带有空格的文档,用于输写或选择.更具体的,在网页中表单主要负责数据采集的功能,我们下文中所提到的表单都指后者.如下 ...
网页注册表单设计原则
如果你想最大化你的服务所带来的效益,你就必须最大化你网站表单的成功率.仅仅简单的让用户在你网站上注册是不够的,除非你有能够让访问你网站的人一看就映像深刻的点子.为了让服务达到最大化的体现,我们设计师需 ...
android 漂亮的表单界面,面向ArcGIS for Android的表单界面生成器的设计与实现
孙俊英陈忠超摘要:基于ArcGIS for Android的采集系统作为当下主要的野外采样方式之一,被广泛的应用于各类场景,针对不同采集内容,采集系统的主要差异在于采样的属性数据所有不同,使用传 ...

垂直布局的HTML表单

垂直布局的HTML表单相关推荐

最新文章

热门文章