Generator formularzy CSS

Bazowy formularz

<form class="form">
  <label class="field">
    <span class="field-label">Email</span>
    <input type="email" required>
    <span class="field-error">Please enter a valid email.</span>
  </label>

  <label class="field">
    <span class="field-label">Password</span>
    <input type="password" minlength="8" required>
  </label>

  <button type="submit" class="button">Sign up</button>
</form>

.field {
  display: block;
  margin-bottom: 1.25rem;
}
.field-label {
  display: block;
  font-weight: 500;
  margin-bottom: .25rem;
}
.field input {
  width: 100%;
  padding: .5rem .75rem;
  font: inherit;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  transition: border-color 120ms, box-shadow 120ms;
}
.field input:focus-visible {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.field input:invalid:not(:placeholder-shown) {
  border-color: #dc2626;
}
.field-error { display: none; color: #dc2626; font-size: .875rem; margin-top: .25rem; }
.field input:invalid:not(:placeholder-shown) ~ .field-error { display: block; }

Cztery częste style

Pływająca etykieta jest najładniejsza, ale wymaga dodatkowego markupu lub JavaScriptu do wykrycia stanu pustego. Wariant z obramowaniem jest najbardziej uniwersalny.

Lista kontrolna dostępności

• Widoczna etykieta dla każdego inputu. Nigdy nie używaj placeholdera jako jedynej etykiety, znika przy focusie i nie spełnia kontrastu.
• <label for> albo opakowujący <label>. Oba są poprawne; opakowywanie jest nieco łatwiejsze.
• Wskaźnik focusu. Nigdy outline: none bez zamiennika. Użytkownicy klawiatury go potrzebują.
• Komunikaty błędów: powiąż je przez aria-describedby na inpucie. Nie używaj samego koloru do oznaczania błędów, dołącz komunikat tekstowy lub ikonę.
• Pola wymagane: użyj atrybutu required. Dodaj wizualny znacznik (gwiazdka) w etykiecie dla osób widzących.
• Typy inputów: używaj type="email", type="tel", type="url", type="number". Klawiatury mobilne się dostosowują.
• Atrybuty autocomplete: autocomplete="email", autocomplete="current-password" itd. Oszczędza użytkownikom mnóstwo pisania.

Natywne stany walidacji

CSS ma pseudoklasy dla poprawności formularza:

• :required / :optional
• :valid / :invalid
• :in-range / :out-of-range (dla inputów liczbowych z min/max)
• :placeholder-shown (pusty, placeholder widoczny)
• :user-invalid (nieprawidłowy i użytkownik wszedł w interakcję, właściwy do stylów błędu)

Pseudoklasa :user-invalid to najczystszy sposób pokazania błędów dopiero po tym, jak użytkownik coś zrobił, unikając czerwonych obramowań przed interakcją. Wsparcie pojawiło się we wszystkich głównych przeglądarkach około 2023 roku.

Stan wyłączony

.field input:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

Wyłączone inputy nie są fokusowalne ani nie da się ich wysłać. Jeśli chcesz, by były fokusowalne dla czytników ekranu, użyj zamiast tego readonly, formularz wysyła wartość, ale użytkownik nie może jej edytować.