精心设计的表单可帮助用户提高转化率。一个小小的修复便可带来很大的不同！
下面是一个简单的付款表单示例，展示了所有的最佳做法：
下面是一个简单的地址表单示例，展示了所有的最佳做法：
例如，以下 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。
多列布局
对于某些类型的布局，您可以使用多列布局 (Multicol)，它可以通过 column-width 属性创建自适应数量的列。在下面的演示中，您可以看到，如果有其他 200px 列还有空间，系统就会添加相应的列。