故障

设计良好的表单有助于用户，并提高转化率。一个小小的修复就能带来很大的改变！

如果您希望通过教程学习这些最佳实践，请查看以下两个 Codelab：“付款表单最佳实践”Codelab 和“地址表单最佳实践”Codelab。

以下是一个支付表单示例，展示了所有最佳实践：

以下是一个简单的地址表单示例，展示了所有最佳实践：

例如，以下 HTML 指定了出生年份的输入范围为 1900 年至 2020 年。使用 type="number" 会将输入值限制为仅限数字，且必须在 min 和 max 指定的范围内。如果您尝试输入超出范围的数字，系统会将输入设置为无效状态。

以下示例使用 pattern="[\d ]{10,30}" 来确保付款卡号有效，同时允许空格：

新型浏览器还会对类型为 email 或 url 的输入进行基本验证。

CSS 网格布局

借助 CSS 网格布局，您可以轻松创建灵活的网格。如果我们考虑之前的浮动示例，可以使用网格布局和 fr 单位（表示容器中可用空间的一部分）来创建列，而不是使用百分比。

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

网格还可用于创建规则网格布局，并可容纳尽可能多的项。随着屏幕尺寸的缩小，可用轨道的数量也会减少。 在演示中，我们会在每行中放入尽可能多的卡片，且每个卡片的大小不得低于 200px。

详细了解 CSS 网格布局

多列布局

对于某些类型的布局，您可以使用多列布局 (Multicol)，该布局可以使用 column-width 属性创建响应式列数。在演示中，您可以看到，如果有空间容纳另一个 200px 列，系统就会添加列。