设置表单样式

帮助用户通过其首选浏览器使用您的表单

为确保您的表单可供尽可能多的人访问，请使用 作业：<input>、<textarea>、<select>和<button>。这是可用表单的基线。

默认浏览器样式看起来并不理想！我们来修改一下。

确保表单控件对所有人来说都清晰易读

大多数浏览器中表单控件的默认字体大小太小。 为确保表单控件可读，请使用 CSS 更改字体大小：

增加了 font-size 和 line-height，以提高可读性。

.form-element {
  font-size: 1.3rem;
  line-height: 1.2;
}

帮助用户在表单中导航

接下来，更改表单的布局，增加表单元素的间距， 以帮助用户了解哪些元素属于同一类。

margin CSS 属性可增加元素之间的间距， padding 属性可增加元素内容周围的空间。

对于常规布局，请使用 Flexbox 或网格。 详细了解 CSS 布局方法。

确保表单控件看起来像表单控件

为您的表单控件使用易于理解的样式，方便用户填写表单。 例如，为 <input> 元素设置实线边框的样式。

input,
textarea {
  border: 1px solid;
}

帮助用户提交表单

不妨考虑为您的 <button> 使用 background，使其与您的网站样式保持一致。 以及替换或移除默认的border样式。

帮助用户了解当前状态

浏览器会为 :focus 应用默认样式。 您可以替换 :focus 的样式，使颜色与您的品牌相匹配。

button:focus {
    outline: 4px solid green;
}

检查您的理解情况

测试您对表单样式设置知识的掌握情况

为什么应该为 font-size 使用相对单位？

为了确保尺寸随用户偏好设置而调整。
🎉
为了确保尺寸响应前一个元素。
再试一次！
为了确保尺寸适合深色模式。
再试一次！
为了确保该尺寸能够响应媒体查询。
再试一次！

如何增大表单控件之间的间距？

使用 padding CSS 属性。
再试一次！
使用 spacer CSS 属性。
再试一次！
使用 margin CSS 属性。
🎉
使用 boundary CSS 属性。
再试一次！

资源