如何更好在Web上的设计表单模式？

网站页面表单设计是一种用于在行和列中显示大量数据的设计模式，目前尚未失宠，所以让我们看看如何在Web上创建更合适的表单。

页面表单的设计模式，使其有效地对分类对象进行比较分析，这也是被用于此目的。

网站页面显示不可避免地以表格格式显示数据，HTML以语义和结构上适当的方式呈现表格数据。但是，HTML表格上的默认样式并不是你见过的最美观的页面，根据所需的视觉设计，需要CSS前端设计美化这些表格。

如果数据集数量并不是那么庞大，并且不需要分页或排序这样的功能，那么我们可以优先考虑使用无JavaScript选项，没有加载JavaScript的页面代码可以使该页面整个屏幕尺寸范围内都能很好地工作，而不需要增加大型库的重量，网站速度也会大幅提升。

但是很不幸的是，如果前端编程没有JavaScript的帮助，可访问性方面的一些DOM操作，就会失去它本来需要的灵魂，只有一些静态画面，没有动感效果，再或者前端就没有能力在不刷新直接获取服务端的内容（ajax技术）。

我们将从低成本的方案开始，如果数据适合只有几列和多行的表，合适集中梳理。你可能遇到的问题可能是在更宽的屏幕上占用太多空间，因此可能需要“限制”表格的最大宽度一段max-width，以便在更小屏幕或手机的屏幕上根据需要缩小。

如果你数据行数不是很多，则此类模式最有效，适合各种屏幕的设计需求。

表单设计行数过多就会溢出屏幕，所以我们只能允许用户滚动查看更多数据。有人可能会说这不是一个完全响应的解决方案，但从技术上讲，容器正在响应视口的宽度。

于是这种用于滚动阴影的技术它取决于在包含元素上使用多个渐变（线性和径向）作为背景图像，并使用background-attachment: local相对于其内容来定位背景。

这种技术的优点在于，对于不支持滚动阴影的浏览器，仍然可以按正常方式滚动表格。它根本不会破坏布局。

另一个滚动选项是将表头从行配置翻转到列配置，同时将水平滚动应用到<tbody>元素的内容上，此技术利用Flexbox行为将表的行转换为列。

通过应用display: flex表，它使<thead>和<tbody>下级标签代码弯曲，这是默认奠定了彼此相邻的相同弯折线。

我们还将<tbody>元素设置为一个flex容器，从而使其中的所有<tr>元素也可以在一个弹性线中展开。最后，每个表格单元格必须将其显示设置为block而不是默认值table-cell。

这种技术的优点是标题始终在视图中，就像固定的标题效果一样，因此用户在滚动数据列时不会丢失上下文。需要注意的一点是，这种技术会导致视觉和源顺序的差异，这会使事情略微不直观。

如前所述，涉及通过修改display值来变形表的布局选项有时会对可访问性产生负面影响，这需要一些小的DOM操作来纠正。

此外，还有一些用户体验的提示，包括像分页功能，排序，过滤，等等（确实需要一些JavaScript启用功能）。

如果正在使用相对简单的数据集，也许你想为其中一些功能编写自己的函数。

据我们所知，响应式数据表技术早在2011就被流行运行在前端表单当中，我们也称为“ 响应数据表 ”。

这种技术的要点是利用媒体查询将表元素及其子元素的显示属性切换到block窄视口。

在窄屏幕上，表格标题在视觉上隐藏，但仍存在于辅助功能树中。通过将数据属性应用于表格单元格，我们可以通过CSS显示数据的标签，同时保持HTML中标签的内容。有关标记和样式的外观。

原始方法在显示标签文本的伪元素上应用宽度，但这意味着需要知道标签开始时所需的空间量。上面的示例使用稍微不同的方法，其中标签和数据分别位于其包含块的相对侧。

我们可以通过flex格式化上下文中的自动边距来实现这样的效果。如果我们将每个<td>元素的display属性设置为flex，因为伪元素生成框就好像它们是它们的原始元素的直接子元素一样，它们变成了flex的子元素<td>。之后，设置margin-right: auto伪元素以将单元格的内容推送到单元格的远端边缘。执行窄视口布局的另一种方法是使用Grid和display: contents。请注意，display: contents支持浏览器目前在可访问性方面存在问题，并且在修复这些错误之前，不应在使用此方法。

每个<tr>元素都设置为display: grid，并且每个<td>元素都设置为display: contents。只有网格容器的直接子节点才能参与网格格式化上下文; 在这种情况下，它是<td>元素。当display: contents应用于<td>它时，它被其内容“替换”，在这种情况下，伪元素<span>内部<td>变为网格子代。喜欢这种方法的方法是能够用来max-content确定伪元素列的大小，确保列始终是最长标签的宽度，而不必为此手动分配宽度值。

以下示例显示了一个基本的分页实现：

从布局的角度来看，Flexbox非常便于将分页元素定位到各种视口大小。不同的项目设计会有不同的要求，但Flexbox的多功能性应该可以相应地满足这些差异。

在这种情况下，分页以页面为中心，位于表格上方。向后和向前导航的控件放在较宽屏幕上的页面指示器的两侧，但所有四个都显示在窄屏幕上的页面指示器上方。

以下示例显示基本排序实现，以满足文本和数字：

如何对某个列进行排序以及按什么顺序进行排序将会很有用？我们可以通过添加CSS类来实现这一点，然后可以根据需要设置样式，在这种情况下，指示符符号是在单击目标标题时切换的伪元素。

以下示例是一个基本过滤功能，它遍历每个表格单元格的所有文本内容，并应用CSS类来隐藏与搜索输入字段不匹配的所有行。

搜索功能使用上JavaScript技术，方便我们完成过滤功能。

以上是我们在设计网页表单是常用到的设计方案，或许并不是适合每个方案的需求，但是我们一直在寻找在Web上创建更合适的表单。

​