上海网站设计：寻求更智能的Web表单

在线表单是网站开发中最棘手的领域之一，尤其是有很多可能出错的东西。 人们如何访问在线内容的不断变化的性质也对人们期望能够通过电话开发的技术产生了影响，这些技术通常只能用于计算机。 这是一项经历了很少发展的技术。

网络表单的设计应该是一个独立的职业。 网站设计师应该聘请全职专业网页表单设计师的服务来帮助他们完成任务。 但这并不足够经济，所以大部分时间网站设计师也负责网站上使用的任何表格的设计。

但设计表格是一种高度专业化的技能。 它需要了解人们如何与信息交互并了解收集和呈现信息的最佳方式。 一般的网页设计主要以有吸引力但实用的方式呈现信息和图像为中心，表单设计要求我们将注意力集中在信息的本质上，然后决定在页面上构建信息的最佳方式，以便它可以像意。 在这种情况下，美学是一个不太重要的考虑因素，但仍然不应该被遗忘。

在本文中，我们将介绍Web表单设计的艺术，并了解我们是否可以找到一种方法，使我们的Web表单在外观和运行方式方面更加智能。

Web表单构建工具

浏览器开发人员和W3C将我们的Web表单放在一起的标准工具并不完全理想，在将CSS应用到它们之前，它们实际上相当可怕。 这就是他们的样子：

还有一个叫做的标准输入控件 选择，但你应该避免使用它，除非节省空间是一个严重的问题。 有更好的方法来处理select控件执行的任务，我们稍后会讨论。 在可能的情况下也应该避免Textarea控制，因为它们是如此有问题和古老的。

除了这些标准输入项之外，还为HTML5创建了一些特殊的新输入项。 除非正在准备文档以供内部使用且浏览器环境已知，否则只应使用在Firefox和Chrome中均可使用的组件。 如果组件也可以在其他浏览器中运行，那就太好了，但它不应该 只要 在其他浏览器中工作。 以下是Firefox中出现的HTML5组件：

现在，显然非常重要的是要注意您的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

现在我们已经准备好思考如何以更智能的方式构建表单。 要做到这一点，我们需要超越默认值。 我们需要了解表单控件的桌面绑定根，以及移动兼容性的需求。 我们需要关心可用性和验证（如果表单将用于数据收集）。

最后一点是好的，因为虽然表单控件用于收集输入，但它们也用于显示存储的数据。 普通网络用户（并且应该）更有兴趣从您那里获取信息，而不是向您提供信息。

数据收集很容易。 人们会填写你面前的任何东西，即使它是一团糟。 但是在数据显示方面，它们更加挑剔。 因此，我们将更多地关注使用表单来显示数据而不是收集它，因为显示需要更多的关注和更“智能”。上海网站设计

1。 我们需要表格吗？

在我们构建表单之前，我们应该检查一下我们确实需要一个表单。 如果数据可以充分和不合理地表示为表格，那么表格通常会更有效和实用。

如果符合以下条

• 我们正在收集用户的意见

• 我们有很多数据要显示

• 数据需要明确分段

• 用户可能正在从移动设备访问数据

如果上述任何一项不成立，则无需使用表格，表格就足够了。 我们在移动兼容性方面面临的挑战是表格和表格都不适合移动显示。 事实上，智能手机设计师为用户提供了纵向使用浏览器的选择，并且大多数用户更喜欢以这种方式使用手机，这导致了网站设计人员必须应对的大多数移动兼容性问题。

无论如何，表格比桌子更适合移动显示。 因此，如果你真的必须确保所有数据都可以在移动显示屏上轻松查看，那么表格是比表格更好的选择......有时候！

2。 设计桌面布局

的确，一般来说你应该首先设计一个移动布局，但是当涉及到表单时，这不是最好的方式，因为我们需要知道如何对数据进行分组，而且只有我们才能做到这一点可以同时看到所有字段，这是移动设备上无法完成的事情，除非您显示的数据太少而我们无需为设计表单而烦恼。

模拟表单设计的最快方法是使用InkScape。 在此示例中，我们将构建一个用于管理HR记录的系统。 这是桌面原型的模拟：

外部矩形表示1024 x 768 px显示的整个空间。 在任何桌面浏览器上，除非用户处于全屏模式（这种情况很少），否则我们无法访问那么多像素。 所以我们的

设计是900 x 600px，它应该适合大多数桌面屏幕的可用区域。

当可用区域小于900px宽时，我们的2 x 450px列将断开并显示为一个连续的450px列。 这解决了移动兼容性问题，至少在Google要求我们使所有网站都能够放入手表屏幕之前。

您会注意到大多数显示器只是由普通的输入框组成，这可能看起来很无聊，但实际上几乎总是最好的方式。 另请注意使用固定宽度字体。 这有助于保持表单设计的一致性。

我们的列实际上略大于450px，更像是600px，但如果我们确实想要强制列宽大约为450px，我们只需将列大小从6减少到5。 但无论如何，600px列应该以纵向模式放在移动屏幕上，而不需要包装。

我们将使用以下代码测试我们的布局：

上海网站设计