Help users use your form with their preferred browser
To ensure that your form is accessible to as many people as possible, use the elements built for the
<button>. This is the baseline for a usable form.
The default browser styles don't look great! Let's change that.
Ensure form controls are readable for everyone
The default font size for form controls in most browsers is too small.
To ensure your form controls are readable, change the font size with CSS:
line-height to improve readability.
Help users navigate through your form
As a next step, change the layout of your form, and increase the spacing of form elements,
to help users understand which elements belong together.
margin CSS property increases space between elements,
padding property increases space around the element's content.
For the general layout, use Flexbox or Grid.
Learn more about CSS layout methods.
Ensure form controls look like form controls
Make it easy for people to fill out your form by using well-understood styles for your form controls.
For example, style
<input> elements with a solid border.
border: 1px solid;
Help users submit your form
Consider using a
background for your
<button> to match your site style,
and override or remove the default
Help users understand the current state
Browsers apply a default style for
You can override the styles for
:focus to match the color to your brand.
outline: 4px solid green;
Test your knowledge of styling forms
Why should you use relative units for
To ensure the size responds to user preference.
To ensure the size responds to the previous element.
To ensure the size responds to dark mode.
To ensure the size responds to media queries.
How can you increase spacing between form controls?
padding CSS property.
spacer CSS property.
margin CSS property.
boundary CSS property.