Summary - Registration form
Build a registration form with form styles.
Registration form intro
In this group you learned every form style: input, label, placeholder, focus, button, checkbox. Now we combine them into a small registration form.
A registration form takes the user's name, email, password, and asks for a terms checkbox. Each field must be readable; the focus ring visible; the submit button inviting. Time to bring the pieces together.
Exercise Style the registration fields
Inside a .register-form input selector, write: padding: 12px 16px;, border: 1px solid #ccc;, border-radius: 6px;, font-size: 1rem;.
Show example solution
open .register-form input; write the four declarations one below the other.
Example solution:
.register-form input {
padding: 12px 16px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 1rem;
}Exercise Style the registration button
Inside a .register-form button selector, write: background: #2563eb;, color: white;, padding: 10px 20px;, border: none;, border-radius: 6px;, cursor: pointer;.
Show example solution
open .register-form button; write the five declarations one below the other.
Example solution:
.register-form button {
background: #2563eb;
color: white;
padding: 10px 20px;
border: none;
border-radius: 6px;
cursor: pointer;
}Test yourself
-
What's the most critical detail in a registration form?
- A very colorful background
- As many fields as possible
- Visible focus and error states
- Each label using a different font
Show answer
Visible focus and error states — Correct! Focus and error states guide the user and improve accessibility.
-
Match form styles
- input
- data field
- label
- field caption
- button:hover
- on mouse over
- appearance: none
- resets defaults
- :focus-visible
- keyboard focus
-
Padding for the registration input
.register-form input { padding: ____; border: 1px solid #ccc; font-size: 1rem; }Show answer
.register-form input { padding: 12px 16px; border: 1px solid #ccc; font-size: 1rem; }