设置表单样式

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

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

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

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

增加了 font-sizeline-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 属性。
使用 boundary CSS 属性。
使用 margin CSS 属性。
使用 spacer CSS 属性。

资源