Form styling — inputs, labels, focus, validation

Make forms look professional: full-width inputs, clear labels, focus rings, error states.

style.css v3.1

style.css — the CSS rules

.form-group {
  margin-bottom: 1.2rem;
}

.form-group label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.4rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

.form-group input:focus {
  border-color: #a0c000;
  box-shadow: 0 0 0 3px rgba(160,192,0,0.2);
}

.form-group input:invalid:not(:placeholder-shown) {
  border-color: #f85149;
}

.form-group .hint {
  font-size: 0.8rem;
  color: #666;
  margin-top: 0.3rem;
}

.btn-submit {
  background: #a0c000;
  color: white;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-submit:hover {
  background: #8aab00;
}

.btn-submit:active {
  transform: scale(0.98);
}

index.html — the HTML structure (what the CSS targets)

<form style="max-width: 400px; margin: 2rem auto;">
  <div class="form-group">
    <label for="name">Model Name</label>
    <input type="text" id="name" placeholder="My RandomForest" required>
    <div class="hint">Give your model a descriptive name.</div>
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" placeholder="you@example.com" required>
  </div>
  <div class="form-group">
    <label for="age">Max Depth</label>
    <input type="number" id="age" value="10" min="1" max="50">
  </div>
  <button type="submit" class="btn-submit">Train Model</button>
</form>

Live preview updates as you type

🧠 How it works

display: block on labels — puts label above input (not next to it). width: 100% on inputs — full width of the form-group. font-family: inherit — inputs don't inherit body font by default; this fixes it. outline: none + :focus styles — replace the ugly browser default focus ring with a branded one. box-shadow: 0 0 0 3px rgba(...) — the 'glow' around a focused input. Called a 'focus ring'. :invalid:not(:placeholder-shown) — shows red border ONLY after the user types something invalid. Without :not(:placeholder-shown), the input would be red from the start (before typing). :active { transform: scale(0.98) } — button 'presses down' when clicked. Micro-interaction.

✏️ Try these changes

Change border: 2px solid #ddd to 1px solid #ccc
→ thinner, lighter border
Change the focus box-shadow spread from 3px to 5px
→ thicker focus ring
Change :invalid border-color from #f85149 to #ffa657
→ invalid inputs get orange border (warning instead of error)
Change .btn-submit background to #f85149
→ submit button becomes red (danger button)
Add 'disabled' attribute to the submit button and style .btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }
→ button looks disabled

← Previous lab

Responsive card grid — auto-fit

Next lab →

Data table — striped rows, hover, sortable header