帮助用户通过其首选浏览器使用您的表单
为确保您的表单可供尽可能多的人访问,请使用
作业:<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
使用相对单位?
为了确保该尺寸能够响应媒体查询。
为了确保尺寸响应前一个元素。
为了确保尺寸随用户偏好设置而调整。
为了确保尺寸适合深色模式。
如何增大表单控件之间的间距?
使用
margin
CSS 属性。使用
spacer
CSS 属性。使用
boundary
CSS 属性。使用
padding
CSS 属性。