表单样式

帮助用户使用他们喜欢的浏览器使用您的表单

为了确保您的表单尽可能地易于访问，请使用为此目的构建的元素：<input>、<textarea>、<select> 和 <button>。这是可用表单的基线。

默认浏览器样式看起来不太好！让我们更改它。

确保所有人都可读取表单控件

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

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

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

帮助用户浏览您的表单

下一步，更改表单的布局，并增加表单元素的间距，以帮助用户理解哪些元素属于一起。

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

对于常规布局，请使用 Flexbox 或 Grid。了解有关 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 属性。
再试一次！

资源