帮助用户通过首选浏览器使用您的表单
为确保您的表单可供尽可能多的人访问,请使用为作业构建的元素:<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 属性。再试一次!