Styling von Webformularen

Im Jahr 1995 führte die HTML 2 Spezifikation Formularelemente (auch "Formular-Widgets" oder "Formularelemente" genannt) ein. Aber CSS wurde erst Ende 1996 veröffentlicht und erst Jahre später von den meisten Browsern unterstützt; daher verließen sich die Browser in der Zwischenzeit auf das zugrunde liegende Betriebssystem, um Formularelemente darzustellen.

Selbst mit verfügbaren CSS waren Browser-Anbieter zunächst nicht bereit, Formularelemente stilisierbar zu machen, da Benutzer an das Aussehen ihrer jeweiligen Browser gewöhnt waren. Aber die Dinge haben sich geändert, und Formular-Widgets sind jetzt größtenteils stilisierbar, mit einigen Ausnahmen.

Leicht zu stylen

1. <form>
2. <fieldset> und <legend>
3. Einzeilige Text-<input>s (z.B. Typ text, url, email), außer für <input type="search">.
4. Mehrzeilige <textarea>
5. Schaltflächen (sowohl <input> als auch <button>)
6. <label>
7. <output>

Schwerer zu stylen

• Kontrollkästchen ("Checkboxes") und Radiobuttons
• <input type="search">

Der Artikel Erweitertes Formular-Styling zeigt, wie diese gestylt werden.

Haben interne Teile, die nicht allein mit CSS gestylt werden können

• <input type="color">
• Datumsbezogene Steuerungen wie <input type="datetime-local">
• <input type="range">
• <input type="file">
• Elemente, die an der Erstellung von Dropdown-Widgets beteiligt sind, darunter <select>, <option>, <optgroup> und <datalist>.
• <progress> und <meter>

Beispielsweise können der Datumsauswahlkalender und die Schaltfläche auf <select>, die eine Optionsliste anzeigt, wenn sie angeklickt wird, nicht allein mit CSS gestylt werden.

Die Artikel Erweitertes Formular-Styling und Anleitung zum Erstellen benutzerdefinierter Formularelemente beschreiben, wie diese gestylt werden.

Die im vorherigen Abschnitt als "leicht zu stylen" bezeichneten Widgets können mit Techniken aus den Artikeln Ihr erstes Formular und CSS-Grundlagen gestylt werden. Es gibt auch spezielle Selektoren — UI-Pseudoklassen —, die das Styling basierend auf dem aktuellen Zustand der Benutzeroberfläche ermöglichen.

Wir werden am Ende dieses Artikels ein Beispiel durchgehen — doch zuerst sind hier einige besondere Aspekte der Formularstilierung, die es wert sind, bekannt zu sein.

CSS-Schriftarten und Textmerkmale können leicht mit jedem Widget verwendet werden (und ja, Sie können @font-face mit Formularelementen verwenden). Browser-Verhalten ist jedoch oft inkonsistent. Standardmäßig erben einige Widgets nicht font-family und font-size von ihren Eltern. Viele Browser verwenden stattdessen das Standardsystem-Aussehen. Um das Erscheinungsbild Ihrer Formulare konsistent mit dem Rest Ihres Inhalts zu gestalten, können Sie die folgenden Regeln zu Ihrem Stylesheet hinzufügen:

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
}

Der inherit-Eigenschaftswert bewirkt, dass der Eigenschaftswert dem berechneten Wert der Eigenschaft des Elternelements entspricht; der Wert des Elternteils wird geerbt.

Die untenstehenden Screenshots zeigen den Unterschied. Links ist das Standard-Rendering eines <input type="text">, <input type="date">, <select>, <textarea>, <input type="submit"> und eines <button> in Chrome auf macOS zu sehen, wobei die standardmäßige Schriftart des Plattformdesigns verwendet wird. Rechts sind die gleichen Elemente zu sehen, auf die unsere obige Stilregel angewendet wurde.

Die Standardwerte unterschieden sich auf verschiedene Weise. Das Erben sollte ihre Schriften auf die Schriftfamilie des Elternteils ändern — in diesem Fall die Standard-Serif-Schrift des Elterncontainers. Sie tun dies alle, mit einer seltsamen Ausnahme — <input type="submit"> erbt nicht vom Elternabsatz in Chrome. Stattdessen nutzt es die font-family: system-ui. Dies ist ein weiterer Grund, <button>-Elemente gegenüber ihren äquivalenten Eingabetypen zu verwenden!

Es gibt viele Debatten darüber, ob Formulare besser mit den standardmäßigen Systemstilen oder mit benutzerdefinierten Stilen aussehen, die auf Ihre Inhalte abgestimmt sind. Diese Entscheidung liegt bei Ihnen als Designer Ihrer Website oder Webanwendung.

Alle Textfelder unterstützen vollständig jede Eigenschaft, die sich auf das CSS-Boxmodell bezieht, wie width, height, padding, margin und border. Wie zuvor verlassen sich Browser jedoch auf die Standardstile des Systems, wenn sie diese Widgets anzeigen. Es liegt an Ihnen, zu definieren, wie Sie diese in Ihren Inhalten einfügen möchten. Wenn Sie das native Aussehen und Gefühl der Widgets beibehalten möchten, haben Sie etwas Schwierigkeiten, wenn Sie ihnen eine konsistente Größe geben möchten.

Dies liegt daran, dass jedes Widget seine eigenen Regeln für Rand, Polsterung und Rand hat. Um mehreren verschiedenen Widgets die gleiche Größe zu geben, können Sie die box-sizing-Eigenschaft zusammen mit einigen konsistenten Werten für andere Eigenschaften verwenden:

input,
textarea,
select,
button {
  width: 150px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

Im Screenshot unten zeigt die linke Spalte das Standard-Rendering eines <input type="radio">, <input type="checkbox">, <input type="range">, <input type="text">, <input type="date">, <select>, <textarea>, <input type="submit"> und eines <button>. Die rechte Spalte hingegen zeigt die gleichen Elemente mit angewandter obiger Regel. Beachten Sie, wie dies uns ermöglicht, sicherzustellen, dass alle Elemente den gleichen Raum einnehmen, trotz der Standardregeln der Plattform für jede Art von Widget.

Was auf dem Screenshot möglicherweise nicht sichtbar ist, ist dass die Radio- und Kontrollkästchen-Steuerungen immer noch gleich aussehen, aber sie sind in den 150px horizontalen Raum zentriert, der durch die width-Eigenschaft bereitgestellt wird. Andere Browser zentrieren die Widgets möglicherweise nicht, halten sich jedoch an den zugeteilten Raum.

Das <legend>-Element ist in Ordnung zu stylen, aber es kann ein wenig knifflig sein, die Platzierung davon zu kontrollieren. Standardmäßig ist es immer über dem oberen Rand seines <fieldset>-Elternteils positioniert, nahe der oberen linken Ecke. Um es woanders zu positionieren, zum Beispiel irgendwo innerhalb des fieldsets, oder nahe der unteren linken Ecke, müssen Sie sich auf die Positionierung verlassen.

Nehmen Sie folgendes Beispiel:

Um die Legende auf diese Weise zu positionieren, haben wir das folgende CSS verwendet (andere Deklarationen wurden zur Kürze entfernt):

fieldset {
  position: relative;
}

legend {
  position: absolute;
  bottom: 0;
  right: 0;
}

Das <fieldset> muss auch positioniert werden, damit das <legend> relativ zu ihm positioniert wird (ansonsten würde das <legend> relativ zum <body> positioniert werden).

Das <legend>-Element ist sehr wichtig für die Zugänglichkeit — es wird von unterstützenden Technologien als Teil des Labels für jedes Formularelement innerhalb des Fieldsets vorgelesen — aber die Verwendung einer Technik wie der obigen ist in Ordnung. Die Inhalte der Legende werden immer noch auf die gleiche Weise vorgelesen; es ist nur die visuelle Position, die sich geändert hat.

Schauen wir uns ein konkretes Beispiel an, wie man ein HTML-Formular stylt. Wir werden ein schickes "Postkarten"-Kontaktformular erstellen; sehen Sie hier die fertige Version.

Wenn Sie diesem Beispiel folgen möchten, machen Sie eine lokale Kopie unserer postcard-start.html-Datei und folgen Sie den unten stehenden Anweisungen.

Das HTML ist nur etwas umfangreicher als das Beispiel, das wir in Ihr erstes Formular verwendet haben; es hat nur ein paar zusätzliche IDs und eine Überschrift.

<form>
  <h1>to: Mozilla</h1>

  <div id="from">
    <label for="name">from:</label>
    <input type="text" id="name" name="user_name" />
  </div>

  <div id="reply">
    <label for="mail">reply:</label>
    <input type="email" id="mail" name="user_email" />
  </div>

  <div id="message">
    <label for="msg">Your message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>

  <div class="button">
    <button type="submit">Send your message</button>
  </div>
</form>

Fügen Sie den obigen Code in den Body Ihres HTML ein.

Hier beginnt der Spaß! Bevor wir mit dem Codieren anfangen, benötigen wir drei zusätzliche Ressourcen:

1. Der Postkarten-Hintergrund — laden Sie dieses Bild herunter und speichern Sie es im gleichen Verzeichnis wie Ihre arbeitende HTML-Datei.
2. Eine Schreibmaschinen-Schriftart: Die "Mom's Typewriter"-Schriftart von dafont.com — laden Sie die TTF-Datei in dasselbe Verzeichnis wie oben herunter.
3. Eine handgeschriebene Schriftart: Die "Journal"-Schriftart von dafont.com — laden Sie die TTF-Datei in dasselbe Verzeichnis wie oben herunter.

Ihre Schriftarten benötigen etwas mehr Verarbeitung, bevor Sie beginnen:

1. Gehen Sie zum fontsquirrel.com Webfont-Generator.
2. Laden Sie mit dem Formular beide Schriftartdateien hoch und erstellen Sie ein Webfont-Kit. Laden Sie das Kit auf Ihren Computer herunter.
3. Entzippen Sie die bereitgestellte Zip-Datei.
4. In den entpackten Inhalten finden Sie einige Schriftdateien (zum Zeitpunkt des Schreibens zwei .woff-Dateien und zwei .woff2-Dateien; sie können zukünftig variieren.) Kopieren Sie diese Dateien in ein Verzeichnis namens fonts im gleichen Verzeichnis wie zuvor. Wir verwenden zwei verschiedene Dateien für jede Schriftart, um die Browser-Kompatibilität zu maximieren; siehe unseren Webfonts-Artikel für viele weitere Informationen.

Nun können wir uns in das CSS für das Beispiel vertiefen. Fügen Sie alle unten gezeigten Codeblöcke in das <style>-Element ein, einen nach dem anderen.

Gesamt-Layout

Zuerst bereiten wir uns vor, indem wir unsere @font-face-Regeln definieren und alle grundlegenden Stile festlegen, die auf die <body>- und <form>-Elemente angewendet werden. Wenn die fontsquirrel-Ausgabe anders war, als wir oben beschrieben haben, können Sie die richtigen @font-face-Blöcke in Ihrem heruntergeladenen Webfont-Kit in der Datei stylesheet.css finden (Sie müssen die untenstehenden @font-face-Blöcke mit ihnen ersetzen und die Pfade zu den Schriftdateien aktualisieren):

@font-face {
  font-family: "handwriting";
  src:
    url("fonts/journal-webfont.woff2") format("woff2"),
    url("fonts/journal-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "typewriter";
  src:
    url("fonts/momot___-webfont.woff2") format("woff2"),
    url("fonts/momot___-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

body {
  font: 1.3rem sans-serif;
  padding: 0.5em;
  margin: 0;
  background: #222;
}

form {
  position: relative;
  width: 740px;
  height: 498px;
  margin: 0 auto;
  padding: 1em;
  box-sizing: border-box;
  background: #fff url(background.jpg);

  /* we create our grid */
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 10em 1em 1em 1em;
}

Beachten Sie, dass wir einige CSS-Grids und Flexbox verwendet haben, um das Formular zu layouten. Damit können wir unsere Elemente, einschließlich des Titels und aller Formularelemente, problemlos positionieren:

h1 {
  font:
    1em "typewriter",
    monospace;
  align-self: end;
}

#message {
  grid-row: 1 / 5;
}

#from,
#reply {
  display: flex;
}

Labels und Steuerungen

Nun können wir beginnen, an den Formularelementen selbst zu arbeiten. Zuerst stellen wir sicher, dass die <label>s die richtige Schriftart erhalten:

label {
  font:
    0.8em "typewriter",
    sans-serif;
}

Die Textfelder erfordern einige gemeinsame Regeln. In anderen Worten, wir entfernen deren Ränder und Hintergründe und definieren deren padding und margin neu:

input,
textarea {
  font:
    1.4em/1.5em "handwriting",
    cursive,
    sans-serif;
  border: none;
  padding: 0 10px;
  margin: 0;
  width: 80%;
  background: none;
}

Wenn eines dieser Felder den Fokus erhält, heben wir es mit einem hellgrauen, transparenten Hintergrund hervor (es ist immer wichtig, Fokusstile zu haben, für Benutzerfreundlichkeit und Tastaturzugänglichkeit):

input:focus,
textarea:focus {
  background: rgb(0 0 0 / 10%);
  border-radius: 5px;
}

Nachdem unsere Textfelder fertig sind, müssen wir die Anzeige der einzeiligen und mehrzeiligen Textfelder anpassen, um übereinzustimmen, da sie typischerweise nicht gleich aussehen würden.

Anpassen der Textbereiche

<textarea>-Elemente werden standardmäßig als Inline-Block-Elemente gerendert. Die zwei wichtigen Dinge hier sind die resize- und overflow-Eigenschaften. Während unser Design ein festes Design ist und wir die resize-Eigenschaft verwenden könnten, um zu verhindern, dass Benutzer unseren mehrzeiligen Textbereich ändern, ist es am besten, Benutzer nicht daran zu hindern, die Größe eines Textbereichs zu ändern, wenn sie dies wünschen. Die overflow-Eigenschaft wird verwendet, um das Feld über Browser hinweg konsistenter zu rendern. Einige Browser haben als Standardwert auto, während einige den Wert scroll haben. In unserem Fall ist es besser, sicherzustellen, dass alle auto verwenden:

textarea {
  display: block;

  padding: 10px;
  margin: 10px 0 0 -10px;
  width: 100%;
  height: 90%;

  border-right: 1px solid;

  /* resize  : none; */
  overflow: auto;
}

Styling der Absenden-Schaltfläche

Das <button>-Element ist wirklich praktisch, um es mit CSS zu gestalten; Sie können damit alles machen, sogar Pseudoelemente verwenden:

button {
  padding: 5px;
  font: bold 0.6em sans-serif;
  border: 2px solid #333;
  border-radius: 5px;
  background: none;
  cursor: pointer;
  transform: rotate(-1.5deg);
}

button:after {
  content: " >>>";
}

button:hover,
button:focus {
  background: #000;
  color: #fff;
}

Und voilà! Ihr Formular sollte jetzt so aussehen:

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich an die wichtigsten Informationen erinnern? Sie können einige weitere Tests finden, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie weitermachen — siehe Testen Sie Ihre Fähigkeiten: Styling-Grundlagen.

Wie Sie sehen können, ist es einfach, Formulare mit Textfeldern und Schaltflächen nur mit CSS zu stylen. Im nächsten Artikel werden wir sehen, wie man mit Formularelementen umgeht, die in die Kategorien "schlecht" und "hässlich" fallen.

• Zurück
• Übersicht: Webformulare
• Weiter

• Anleitung zum Erstellen benutzerdefinierter Formularelemente
• Formulare über JavaScript senden