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;
}

Next lesson: Table skeleton

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies