在线表单是网站开发中最棘手的领域之一，尤其是有很多可能出错的东西。 人们如何访问在线内容的不断变化的性质也对人们期望能够通过电话开发的技术产生了影响，这些技术通常只能用于计算机。 这是一项经历了很少发展的技术。
网络表单的设计应该是一个独立的职业。 网站设计师应该聘请全职专业网页表单设计师的服务来帮助他们完成任务。 但这并不足够经济，所以大部分时间网站设计师也负责网站上使用的任何表格的设计。
但设计表格是一项高度专业化的技能。 它需要了解人们如何与format离子和了解收集和呈现的最佳方式format离子。 一般网页设计主要集中在展示format离子和图像以有吸引力但实用的方式，形式设计要求我们将注意力集中在formation，然后决定在页面上构建它的最佳方式，以便它按预期工作。 在这种情况下，美学是一个不太重要的考虑因素，但仍然不应该gotten.
在本文中，我们将介绍Web表单设计的艺术，并了解我们是否可以找到一种方法，使我们的Web表单在外观和运行方式方面更加智能。
Web表单构建工具
浏览器开发人员和W3C将我们的Web表单放在一起的标准工具并不完全理想，在将CSS应用到它们之前，它们实际上相当可怕。 这就是他们的样子：
还有一个叫做的标准输入控件 选择，但你应该避免使用它，除非节省空间是一个严重的问题。 有更好的方法来处理select控件执行的任务，我们稍后会讨论。 在可能的情况下也应该避免Textarea控制，因为它们是如此有问题和古老的。
除了这些标准输入项之外，还为HTML5创建了一些特殊的新输入项。 除非正在准备文档以供内部使用且浏览器环境已知，否则只应使用在Firefox和Chrome中均可使用的组件。 如果组件也可以在其他浏览器中运行，那就太好了，但它不应该 仅由 在其他浏览器中工作。 以下是Firefox中出现的HTML5组件：
它们在Chrome中的外观略有不同：
现在，显然非常重要的是要注意您的HTML5输入在Chrome和Firefox之间的外观和功能会有所不同，但它们仍然有效。 Chrome中的标准输入控件看起来也比Firefox好一点。 请注意，Chrome强加了北美日期标准，用户可能不会欣赏。 此外，Chrome版本的日期控件使其不适合显示，并且只应用于输入。 添加日期选择器是Chrome的主要改进，但我们可能希望在未来版本的Firefox中看到这一点。
由于Firefox是开源的，您实际上可以通过下载Chrome所基于的开源Chromium浏览器源代码，将相关的代码段移植到Firefox源，使您自己的个人版Firefox以与Chrome相同的方式呈现输入。代码（但每次将Firefox升级到新版本时都必须这样做）。
然而，重点是，即使使用Chrome的增强功能，输入控件的默认外观也很小且没有吸引力。 还有一些其他控件可用，但由于它们在Chrome和Firefox中都不起作用，因此不应在用于公众的网站上使用它们。
Bootstrap（几乎足够）的答案
Bootstrap将样式应用于标准控件，以在一定程度上增强其外观。 但是由于Bootstrap以移动为中心的设计理念，它确实会对不打算作为单个列显示的表单造成一些不良影响，并且默认情况下，当短输入字段跨越整个列时，它们看起来很有趣。 世界可能已经移动，但形式并不是出于移动用户的想法。
Bootstrap扩展控件以填充其容器的水平宽度，这意味着无论您喜欢与否，所有控件都将具有相同的宽度（除非您手动覆盖此行为），并允许您使用额外的bling来装饰某些控件类型。 Bootstrap的解决方案非常优雅，克服了在不同浏览器中具有不同外观的控件的一些问题，但它仅适用于标准控件。 HTML5控件未在当前版本的Bootstrap中实现，因此您必须自己设置样式。
Bootstrap还允许您将控件组合在一起。 有时这很好，有时不太好。 将文本输入与按钮和复选框组合可能看起来不错，但是它可能会使用户混淆他们应该如何与这种不熟悉的控件进行交互。
Bootstrap提供的是我最喜欢的两种表单构建设备 面板 和 好。 这些对于分组表单数据非常有用，可以直观地指示哪些数据与哪些其他数据相关，以及用于隔离数据。
智能表格构建101
现在我们准备考虑如何以更智能的方式构建表单。 为此，我们需要很好地超越默认设置。 我们需要意识到 desktop- 绑定表单控件的根源，以及对移动兼容性的需求。 我们需要关心可用性和验证等事情（如果表单将用于数据收集）。
最后一点很好，因为虽然表单控件用于收集输入，但它们也用于显示存储的数据。 普通网络用户（并且应该）对进入更感兴趣format来自你的离子而不是屈服format离子给你。
数据收集很容易。 人们会填补您粘贴在他们面前的任何东西，即使那是一团糟。 但是，当涉及到数据显示时，它们更加繁琐。 因此，由于显示需要更多的关注和更多的“智能”，因此在这里我们将更加着重于使用表单显示数据而不是收集数据。
1。 我们需要表格吗？
在我们构建表单之前，我们应该检查一下我们确实需要一个表单。 如果数据可以充分和不合理地表示为表格，那么表格通常会更有效和实用。
如果符合以下条
- 我们正在收集用户的意见
- 我们有很多数据要显示
- 数据需要明确分段
- 用户可能正在从移动设备访问数据
如果上述任何一项不成立，则无需使用表格，表格就足够了。 我们在移动兼容性方面面临的挑战是表格和表格都不适合移动显示。 事实上，智能手机设计师为用户提供了纵向使用浏览器的选择，并且大多数用户更喜欢以这种方式使用手机，这导致了网站设计人员必须应对的大多数移动兼容性问题。
无论如何，表单比表格更适合移动显示。 因此，如果您真的必须确保可以在移动显示器上轻松查看所有数据，那么表格是比表格更好的选择……有时！
2. 设计 desktop 布局
的确，一般来说你应该首先设计一个移动布局，但是当涉及到表单时，这不是最好的方式，因为我们需要知道如何对数据进行分组，而且只有我们才能做到这一点可以同时看到所有字段，这是移动设备上无法完成的事情，除非您显示的数据太少而我们无需为设计表单而烦恼。
模拟表单设计的最快方法是使用 InkScape。 在本例中，我们将构建一个用于管理 HR 记录的系统。 这是模拟 desktop 原型：
外部矩形代表 1024 x 768 像素显示器的整个空间。 任何 desktop 浏览器，除非用户处于全屏模式（这种情况很少见），否则我们无法访问那么多像素。 所以我们的
设计为 900 x 600px，应该适合大多数的可用区域 desktop 屏幕。
当可用区域小于900px宽时，我们的2 x 450px列将断开并显示为一个连续的450px列。 这解决了移动兼容性问题，至少在Google要求我们使所有网站都能够放入手表屏幕之前。
您会注意到大多数显示器只是由普通的输入框组成，这可能看起来很无聊，但实际上几乎总是最好的方式。 另请注意使用固定宽度字体。 这有助于保持表单设计的一致性。
我们的列实际上略大于450px，更像是600px，但如果我们确实想要强制列宽大约为450px，我们只需将列大小从6减少到5。 但无论如何，600px列应该以纵向模式放在移动屏幕上，而不需要包装。
我们将使用以下代码测试我们的布局：
我们可以看到一切看起来都很好（因为我们暂时添加了边框来向我们展示）。
Linux屏幕标尺小部件显然不是网页的一部分，但是它向我们展示我们的列不会在较小的显示器上严重破坏。 让我们看看不同的常见屏幕宽度：
3。 创建自定义输入大小和标签位置
如果我们只是将所有内容保留为默认值，而不添加任何自定义CSS，那么当我们添加第一行输入控件时会发生这种情况：
发生这种情况是因为每个输入的标签默认为输入的左侧，因为我们没有为输入控件设置自定义宽度。 我们可以用CSS解决这两个问题。
现在，我们只是将标签元素的显示属性设置为“ block”，将“ First”和“ Last”的字段设置为“ in40w”类，将MI的字段设置为“ in10w”类，一切应该看起来更好。
正如您所看到的，它确实看起来更好，但布局不再正确。 现在盒子堆叠起来了。 所以我们如何解决这个问题就是废除了使用标签元素的想法，因为我们并不真的需要它。 我们只是申请我们的 in40w 和 in10w 类，加上一个新的类叫 inLeftOf.
一旦应用，它修复了我们之前看到的问题，如下所示：
但这并没有为SSN领域留下足够的空间。 这是因为我们的左列比预期的要大，所以40％实际上比我们对这些字段所需的空间更大，所以我们实际上可以将它们减少到 in30w，中间区域比它需要的大，所以我们可以做到这一点 in5w。 这是发生的事情：
所以现在有足够的空间来添加SSN字段，这就完成了我们输入表单的第一行。 在平滑所有这些细节之后，构建左列的其余部分应该非常容易。 我们现在可以摆脱临时边界，并将正确的背景应用于列。 在我们到达表单的特殊区域之前，这是面板的上半部分：
这个阶段发生了一些事情。 第一个是设置列的背景颜色（rgb（235,235,246））的简单部分，虽然你在这里看不到它，但所有输入的文本颜色都设置为#427DB4，字体权重设置为粗体，以减少眼睛疲劳。 文本设置为使用CSS text-transform属性自动转换为大写，以加快数据输入并减少错误。
对齐控件并确保它们在任何显示类型上保持良好对齐的更复杂问题需要更多思考。 您已经看到了用于第一行输入及其标签的技术。 当输入之间不需要任何额外的间距时，此技术将起作用，但如果我们确实需要添加空间，则最好使用其他技术。
另一种技术涉及在我们的主列中创建嵌套的列行，这将有助于保持控件的适当间隔。 列数及其大小根据每组控件的要求而变化。 记住一切都是 responsive，因此当调整列大小时，列内的所有内容都将尝试调整大小以匹配更改。 这对视障用户来说是个好消息，因为他们可以放大显示器上的放大倍数，并且所有内容都会像其他用户一样正确排列。
转到左栏的更复杂部分，模型中概述的原始概念要求一个难以实现的结构。 幸运的是，我意识到如果使用标准复选框，权利面板上的数据可能会翻倍，这很好地解决了布局复杂性问题：
特殊部分周围较轻的面板只是普通的 Bootstrap 井。 要输入宗教数据，必须从一组预定义的官方宗教（包括“其他”）列表中进行选择。 开发右侧列更容易，只需使用与左侧列第一组控件相同的技术，将控件组织在表格中 format，但不使用表格。
为了使这个项目成功，它必须提供完美的 responsive在所有官方显示尺寸上都保持一致。 让我们看看结果如何。 首先是全分辨率版本：
这与原型足够接近，我们可以对此感到满意。 事实上，这甚至是一种改进。 现在让我们看看 responsive 页面不同部分的布局：
Bootstrap 和 HTML5 使表单开发比以往任何时候都更快、更容易，但是许多开发人员通过使表单过于复杂而破坏了这一进展（使用特殊的 HTML5 表单元素只是因为它们可以被使用，而不是因为项目需要它们)，并通过创建完全一维的形式，甚至不尝试利用 responsive 设计。 只需稍加注意和额外的工作，任何数据都可以在任何尺寸的屏幕上看起来更美观。
在最小屏幕尺寸的纵向布局中，您可能会在最小屏幕尺寸上出现一些小故障（在此项目的情况下，第一行中的中间初始字段比理想情况下小一点），但移动用户通常接受这是他们不能妥善保管手机所需的权衡。
做得对，您的数据表格可能如下所示：
而不是，呃，这个：
标题图片由...提供
注释 0回应