15: Forms, Inputs & Pseudo-Classes

The form skeleton

<form>
  <label for="email">Email</label>
  <input id="email" type="email" required>

  <label for="pwd">Password</label>
  <input id="pwd" type="password" minlength="8" required>

  <textarea rows="3"></textarea>
  <button type="submit">Sign in</button>
</form>

Input types: free validation and keyboards

<input type="email" required>           <!-- validates @ -->
<input type="number" min="1" max="10">
<input type="checkbox" required>         <!-- must check -->
<select><option>Cat</option></select>

Pseudo-classes and pseudo-elements

input:hover { border-color: #0b57d0; }
input:focus { outline: 2px solid #0b57d0; outline-offset: 2px; }
input:checked { accent-color: #0b57d0; }
li:nth-child(2) { background: #fff7cc; }
.tag::before { content: "#"; color: #888; }
label:has(input:checked) { background: #eef6ff; }

Focus, cursor, and polish

button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.6; }
input:focus-visible { outline: 2px solid #0b57d0; outline-offset: 2px; }

Live demo: usable form, keyboard only

Tab through this form. All focus states are visible, labels are clickable, and validation is native.