Formulare mit CSS gestalten

HTML definiert die Struktur eines Formulars. CSS ist zuständig für Layout, Abstände, Farben und Benutzererlebnis.

1. Grundprinzip

Formularelemente sind normale HTML-Elemente und können mit CSS genauso gestaltet werden wie div oder p.

Ohne CSS wirken Formulare technisch und unübersichtlich. Mit CSS werden sie benutzerfreundlich und visuell klar.

Ein sauberes Layout entsteht durch Gruppierung und Abstände.

<form class="login-form">
  <div class="field">
    <label>Benutzername</label>
    <input type="text">
  </div>
</form>

.field {
  margin-bottom: 1rem;
}

input-Felder lassen sich über Rahmen, Farben und Größen anpassen.

input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

Breite 100 % sorgt für saubere Ausrichtung im Formular.

Pseudoklassen zeigen Interaktionen des Benutzers an.

input:focus {
  border-color: #2b7cff;
  outline: none;
}

Buttons sollten klar als Aktion erkennbar sein.

button {
  background: #2b7cff;
  color: white;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #1f5fd1;
}

Formulare werden häufig mittig dargestellt.

.login-form {
  max-width: 400px;
  margin: 2rem auto;
}

Pflichtfelder sollten visuell hervorgehoben werden.

input:required {
  border-left: 4px solid #ff9800;
}

HTML5 meldet ungültige Eingaben automatisch.

input:invalid {
  border-color: red;
}

Clientseitige Validierung ersetzt keine Serverprüfung.