Styling von Webformularen

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

Selbst mit CSS waren die Browseranbieter zunächst zögerlich, Formularelemente stilisierbar zu machen, da die Benutzer sehr an den Look ihrer jeweiligen Browser gewöhnt waren. Aber die Dinge haben sich geändert und Formular-Widgets sind nun größtenteils stilisierbar, mit einigen Ausnahmen.

Leicht zu gestalten

1. <form>
2. <fieldset> und <legend>
3. Eingabe von einzeiligem Text in <input>s (z.B. Typen text, url, email), außer <input type="search">.
4. Mehrzeiliges <textarea>
5. Schaltflächen (sowohl <input> als auch <button>)
6. <label>
7. <output>

Schwieriger zu gestalten

• Kontrollkästchen und Optionsfelder
• <input type="search">

Der Artikel Fortgeschrittenes Formular-Styling zeigt, wie man diese stilisiert.

Mit internen Elementen, die nicht allein mit CSS gestylt werden können

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

Zum Beispiel können der Kalender des Datepickers und die Schaltfläche beim <select>, die eine Optionsliste anzeigt, wenn darauf geklickt wird, nicht allein mit CSS gestylt werden.

Die Artikel Fortgeschrittenes Formular-Styling und Anleitung zum Erstellen benutzerdefinierter Formularelemente beschreiben, wie man diese gestaltet.

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

Wir werden ein Beispiel am Ende dieses Artikels durchgehen — aber zuerst hier einige spezielle Aspekte des Formularstylings, die es wert sind, bekannt zu werden.

CSS Schrift- und Texteigenschaften können leicht mit jedem Widget verwendet werden (und ja, Sie können @font-face mit Formular-Widgets verwenden). Das Browserverhalten ist jedoch oft inkonsistent. Standardmäßig erben einige Widgets nicht font-family und font-size von ihren übergeordneten Elementen. Viele Browser verwenden stattdessen das Standardaussehen des Systems. Um das Erscheinungsbild Ihrer Formulare mit dem Rest Ihres Inhalts konsistent zu machen, können Sie folgende Regeln zu Ihrem Stylesheet hinzufügen:

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

Das inherit-Eigenschaftswert sorgt dafür, dass der Eigenschaftswert dem berechneten Wert der Eigenschaft seines übergeordneten Elements entspricht; er erbt den Wert des übergeordneten Elements.

Die untenstehenden Screenshots zeigen den Unterschied. Links ist die Standarddarstellung eines <input type="text">, <input type="date">, <select>, <textarea>, <input type="submit"> und eines <button> in Chrome auf macOS, mit dem Standard-Schriftstil der Plattform in Verwendung. Rechts sind die gleichen Elemente, mit unserer obigen Stilregel angewendet.

Die Standardeinstellungen unterschieden sich auf verschiedene Weise. Das Vererben sollte ihre Schriftarten auf die Schriftfamilie der übergeordneten Element ändern — in diesem Fall die Standard-Serifenschrift des übergeordneten Containers. Sie alle tun dies, mit einer merkwürdigen Ausnahme — <input type="submit"> erbt nicht vom übergeordneten Absatz in Chrome. Stattdessen wird die font-family: system-ui verwendet. Dies ist ein weiterer Grund, <button>-Elemente ihren äquivalenten Eingabetypen vorzuziehen!

Es gibt viel Diskussion darüber, ob Formulare besser aussehen, wenn sie die Standardeinstellungen des Systems verwenden oder angepasste Stile, die auf Ihren Inhalt abgestimmt sind. Diese Entscheidung liegt bei Ihnen, als Designer Ihrer Website oder Webanwendung.

Alle Texteingabefelder unterstützen vollumfänglich jede Eigenschaft, die mit dem CSS-Boxmodell in Verbindung steht, wie width, height, padding, margin und border. Wie zuvor jedoch verlassen sich die Browser auf die Standardeinstellungen des Systems, wenn sie diese Widgets darstellen. Es liegt an Ihnen, zu definieren, wie Sie sie in Ihren Inhalt einfügen möchten. Wenn Sie das native Aussehen und Gefühl der Widgets beibehalten möchten, werden Sie auf einige Schwierigkeiten stoßen, wenn Sie ihnen eine einheitliche Größe geben möchten.

Das liegt daran, dass jedes Widget seine eigenen Regeln für Rand, Auffüllung und Umrandung hat. Um derselben Größe für mehrere verschiedene Widgets 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 untenstehenden Screenshot zeigt die linke Spalte die Standarddarstellung eines <input type="radio">, <input type="checkbox">, <input type="range">, <input type="text">, <input type="date">, <select>, <textarea>, <input type="submit"> und <button>. Die rechte Spalte hingegen zeigt die gleichen Elemente mit unserer obigen Regel angewendet. Beachten Sie, wie dies uns ermöglicht, sicherzustellen, dass alle Elemente die gleiche Menge an Raum einnehmen, trotz der Standardregeln der Plattform für jede Art von Widget.

Was auf dem Screenshot nicht offensichtlich zu erkennen ist, ist, dass die Radio- und Kontrollkästchen zwar gleich aussehen, aber in den 150px des horizontalen Raums, der durch die width-Eigenschaft bereitgestellt wird, zentriert sind. Andere Browser zentrieren die Widgets möglicherweise nicht, aber sie halten sich an den zugewiesenen Platz.

Das <legend>-Element ist in Ordnung zu gestalten, kann aber etwas knifflig sein, um die Position zu kontrollieren. Standardmäßig wird es immer über der oberen Grenze seines <fieldset>-Elternelements, nahe der oberen linken Ecke, positioniert. Um es woanders zu platzieren, z. B. innerhalb des fieldset irgendwo oder nahe der unteren linken Ecke, müssen Sie sich auf die Positionierung verlassen.

Betrachten Sie das folgende Beispiel:

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

fieldset {
  position: relative;
}

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

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

Das <legend>-Element ist sehr wichtig für die Barrierefreiheit — es wird von unterstützenden Technologien als Teil des Etiketts jedes Formularelements innerhalb des fieldset angesagt — aber die Verwendung einer Technik wie der oben genannten ist in Ordnung. Der Legendeninhalt wird immer noch auf die gleiche Weise angesagt; 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 schick aussehendes "Postkarten"-Kontaktformular erstellen; sehen Sie hier die fertige Version.

Wenn Sie dieses Beispiel mitverfolgen möchten, machen Sie eine lokale Kopie unserer postcard-start.html-Datei und befolgen Sie die unten stehenden Anweisungen.

Das HTML ist nur geringfügig komplexer als das Beispiel, das wir im ersten Artikel dieses Leitfadens 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 beginnen zu kodieren, benötigen wir drei zusätzliche Assets:

1. Der Postkarten-Hintergrund — laden Sie dieses Bild herunter und speichern Sie es im selben Verzeichnis wie Ihre Arbeit-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 handgezeichnete Schriftart: Die "Journal" Schriftart von dafont.com — laden Sie die TTF-Datei in dasselbe Verzeichnis wie oben herunter.

Ihre Schriftarten benötigen noch etwas Verarbeitung, bevor Sie starten:

1. Gehen Sie zum fontsquirrel.com Webfont Generator.
2. Laden Sie mithilfe des Formulars beide Schriftdateien hoch und generieren Sie ein Webfont-Kit. Laden Sie das Kit auf Ihren Computer herunter.
3. Entpacken 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önnten sich in der Zukunft ändern.) Kopieren Sie diese Dateien in ein Verzeichnis namens fonts, im selben Verzeichnis wie zuvor. Wir verwenden zwei verschiedene Dateien für jede Schriftart, um die Browser-Kompatibilität zu maximieren; siehe unseren Web-Schriften Artikel für viel mehr Informationen.

Nun können wir in das CSS für das Beispiel eintauchen. Fügen Sie alle unten gezeigten Codeblöcke nacheinander in das <style>-Element ein.

Gesamtlayout

Zuerst bereiten wir uns vor, indem wir unsere @font-face-Regeln und alle grundlegenden Stile, die für die <body> und <form>-Elemente festgelegt sind. Wenn die fontsquirrel-Ausgabe von dem abweicht, was wir oben beschrieben haben, können Sie die korrekten @font-face-Blöcke in Ihrem heruntergeladenen Webfont-Kit, in der Datei stylesheet.css finden (Sie müssen die unten stehenden @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-Grid und Flexbox verwendet haben, um das Formular zu gestalten. Damit können wir unsere Elemente leicht positionieren, einschließlich des Titels und aller Formularelemente:

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

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

#from,
#reply {
  display: flex;
}

Labels und Steuerelemente

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

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

Die Textfelder erfordern einige allgemeine Regeln. Mit anderen Worten, wir entfernen ihre Ränder und Hintergründe und definieren ihr 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 sie mit einem hellgrauen, transparenten Hintergrund hervor (es ist immer wichtig, einen Fokusstil zu haben, für Benutzerfreundlichkeit und Tastaturzugänglichkeit):

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

Jetzt, da unsere Textfelder vollständig sind, müssen wir die Anzeige der ein- und mehrzeiligen Textfelder anpassen, da sie typischerweise nicht gleich aussehen, wenn die Standardeinstellungen verwendet werden.

Feinabstimmung der Textbereiche

<textarea>-Elemente werden standardmäßig als Inline-Block-Element gerendert. Die beiden wichtigen Dinge hier sind die resize und overflow Eigenschaften. Während unser Design ein festes Größenlayout ist und wir die Eigenschaft resize verwenden könnten, um zu verhindern, dass Benutzer unser mehrzeiliges Textfeld ändern, ist es besser, Benutzer nicht daran zu hindern, ein Textfeld neu zu skalieren, wenn sie es möchten. Die overflow-Eigenschaft wird verwendet, um das Feld im gesamten Browser konsistenter zu rendern. Einige Browser verwenden standardmäßig den Wert auto, während einige standardmäßig den Wert scroll verwenden. 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 des Sende-Buttons

Das <button>-Element ist wirklich praktisch, um es mit CSS zu gestalten; Sie können tun, was immer Sie möchten, sogar unter Verwendung von Pseudoelementen:

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 fortfahren — siehe Testen Sie Ihre Fähigkeiten: Styling-Grundlagen.

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

• Zurück
• Übersicht: Webformular-Bausteine
• Weiter

• Anleitung zum Erstellen benutzerdefinierter Formularelemente
• Versand von Formularen über JavaScript
• Eigenschaftenkompatibilitätstabelle für Formular-Widgets