CSS-formulärgenerator

Grundformulär

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

Fyra vanliga stilar

Den flytande etiketten är snyggast, men kräver extra markup eller JavaScript för att upptäcka tomt tillstånd. Konturerad är den mest universella lösningen.

Tillgänglighetsgranskningslista

• Synlig etikett för varje inmatningsfält. Använd aldrig en platshållare (placeholder) som enda etikett – den försvinner vid fokus och klarar inte kontrastkraven.
• <label for> eller <label> med omslutning. Båda är giltiga; omslutningen är något enklare.
• Fokusindikator: Använd aldrig outline: none utan en ersättning. Det behövs för tangentbordsanvändare.
• Felmeddelanden: länka dem via aria-describedby i inmatningen. Använd inte endast färg för att markera fel – inkludera ett textmeddelande eller en ikon.
• Obligatoriska fält: använd attributet required. Lägg till en visuell markör (asterisk) i etiketten för seende användare.
• Inmatningstyper: använd type="email", type="tel", type="url" eller type="number". Mobil tangentbord anpassar sig automatiskt.
• autocomplete-attribut: autocomplete="email", autocomplete="current-password" osv. Minskar behovet av att skriva mycket för användarna.

Nativa valideringstillstånd

CSS har pseudoklasser för formulars giltighet:

• :required / :optional
• :valid / :invalid
• :in-range / :out-of-range (för numeriska inmatningar med minsta och största värde)
• :placeholder-shown (tom, platshållaren synlig)
• :user-invalid (ogiltigt och användaren har interagerat – rätt för felstilar)

Pseudoklassen :user-invalid är det renaste sättet att visa fel först efter att användaren har gjort något, vilket undviker röda kantlinjer före interaktionen. Stödet infördes i samtliga stora webbläsare runt år 2023.

Inaktiverat tillstånd

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

Inaktiverade inmatningsfält kan varken fokuseras eller skickas in. Om du vill att de ska kunna fokuseras för skärmläsare använder du i stället readonly – formuläret skickar värdet, men användaren kan inte redigera det.