Gestaltung von Webformularen

Herausforderungen beim Stylen von Formular-Widgets

Historie

1995 führte die HTML 2-Spezifikation 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; in der Zwischenzeit verließen sich die Browser darauf, dass das zugrunde liegende Betriebssystem die Formularelemente darstellte.

Selbst mit verfügbarer CSS-Unterstützung waren Browseranbieter zunächst zögerlich, Formularelemente gestaltbar zu machen, da die Nutzer an das Aussehen ihrer jeweiligen Browser gewöhnt waren. Aber die Zeiten haben sich geändert, und Formularelemente sind jetzt größtenteils gestaltbar, mit ein paar Ausnahmen.

Arten von Widgets

Einfach zu gestalten

1. <form>
2. <fieldset> und <legend>
3. Einzeilige Text-<input>s (z.B. type text, url, email), mit Ausnahme von <input type="search">.
4. Mehrzeilige <textarea>
5. Buttons (sowohl <input> als auch <button>)
6. <label>
7. <output>

Schwerer zu gestalten

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

Der Artikel Erweitertes Formular-Styling zeigt, wie man diese gestaltet.

Mit internen Komponenten, die nicht nur in CSS gestaltbar sind

• <input type="color">
• Datumsbezogene Steuerelemente wie <input type="datetime-local">
• <input type="range">
• <input type="file">

  Hinweis: Der Button, der den Dateiauswahldialog öffnet, kann mit ::file-selector-button gestaltet werden. Der danebenstehende Text, der die ausgewählte Datei benennt, nicht.

• Elemente, die an der Erstellung von Dropdown-Widgets beteiligt sind, einschließlich <select>, <option>, <optgroup> und <datalist>.

  Hinweis: Einige Browser unterstützen jetzt Anpassbare Select-Elemente, eine Reihe von HTML- und CSS-Funktionen, die es ermöglichen, <select>-Elemente und deren Inhalte vollständig zu individualisieren, genau wie normale DOM-Elemente.

• <progress> und <meter>

Zum Beispiel können der Kalender des Datumswählers und der Button auf <select>, der eine Optionsliste beim Klicken anzeigt, nicht nur mit CSS gestaltet werden.

Die Artikel Erweitertes Formular-Styling und Wie man benutzerdefinierte Formularelemente erstellt beschreiben, wie man diese gestaltet.

Gestaltung einfacher Formular-Widgets

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

Am Ende dieses Artikels werden wir ein Beispiel durchgehen — aber zuerst sind hier einige spezielle Aspekte des Form-Stylings, die es wert sind, beachtet zu werden.

Schriftarten und Text

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

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

Der Wert inherit bewirkt, dass der Eigenschaftswert dem berechneten Wert der Eigenschaft des Elternelements entspricht; er erbt den Wert des Elternteils.

Die folgenden Screenshots zeigen den Unterschied. Links 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. Rechts sind dieselben Elemente, mit unserem obigen Stilregel angewendet.

Die Standards unterschieden sich in mehreren Aspekten. Das Erben sollte ihre Schriftarten auf die der Schriftfamilie des Elternteils ändern — in diesem Fall die Standard-Schriftart Serif des übergeordneten Containers. Sie tun dies alle, mit einer merkwürdigen 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 viel Diskussion darüber, ob Formulare besser aussehen, wenn sie das Standarddesign des Systems verwenden oder ein angepasstes Design, das Ihrem Inhalt entspricht. Diese Entscheidung liegt bei Ihnen, als Designer Ihrer Webseite oder Webanwendung.

Box-Modell

Alle Textfelder unterstützen vollkommen jede Eigenschaft, die sich auf das CSS-Boxmodell bezieht, wie width, height, padding, margin und border. Wie zuvor verlassen sich jedoch Browser auf die Standardstile des Systems bei der Darstellung dieser Widgets. Es liegt an Ihnen zu definieren, wie Sie wünschen, dass sie sich in Ihren Inhalt einfügen. Wenn Sie das native Aussehen und Verhalten der Widgets beibehalten möchten, werden Sie auf einige Schwierigkeiten stoßen, wenn Sie ihnen eine einheitliche Größe geben wollen.

Dies liegt daran, dass jedes Widget seine eigenen Regeln für Rahmen, Abstände und Ränder hat. Um mehreren verschiedenen Widgets die gleiche Größe zu geben, können Sie die Eigenschaft box-sizing 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 folgenden 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>. Auf der anderen Seite zeigt die rechte Spalte dieselben Elemente mit unseren obigen Regeln angewendet. Beachten Sie, wie dies sicherstellt, dass alle Elemente den gleichen Raum einnehmen, trotz der Standardregeln der Plattform für jede Art von Widget.

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

Legendenplatzierung

Das <legend>-Element ist in Ordnung zu gestalten, aber es kann schwierig sein, seine Platzierung zu steuern. Standardmäßig ist es immer über der oberen Grenze des übergeordneten <fieldset> positioniert, in der Nähe der oberen linken Ecke. Um es woanders zu positionieren, beispielsweise irgendwo im Feldset oder in der Nähe der unteren linken Ecke, müssen Sie sich auf die Positionierung verlassen.

Nehmen Sie folgendes Beispiel:

<form>
  <fieldset>
    <legend>Choose all the vegetables you like to eat</legend>
    <ul>
      <li>
        <label for="carrots">Carrots</label>
        <input
          type="checkbox"
          checked
          id="carrots"
          name="carrots"
          value="carrots" />
      </li>
      <li>
        <label for="peas">Peas</label>
        <input type="checkbox" id="peas" name="peas" value="peas" />
      </li>
      <li>
        <label for="cabbage">Cabbage</label>
        <input type="checkbox" id="cabbage" name="cabbage" value="cabbage" />
      </li>
      <li>
        <label for="cauliflower">Cauliflower</label>
        <input
          type="checkbox"
          id="cauliflower"
          name="cauliflower"
          value="cauliflower" />
      </li>
      <li>
        <label for="broccoli">Broccoli</label>
        <input type="checkbox" id="broccoli" name="broccoli" value="broccoli" />
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>What is your favorite meal?</legend>
    <ul>
      <li>
        <label for="soup">Soup</label>
        <input type="radio" checked id="soup" name="meal" value="soup" />
      </li>
      <li>
        <label for="curry">Curry</label>
        <input type="radio" id="curry" name="meal" value="curry" />
      </li>
      <li>
        <label for="pizza">Pizza</label>
        <input type="radio" id="pizza" name="meal" value="pizza" />
      </li>
      <li>
        <label for="tacos">Tacos</label>
        <input type="radio" id="tacos" name="meal" value="tacos" />
      </li>
      <li>
        <label for="bolognese">Bolognese</label>
        <input type="radio" id="bolognese" name="meal" value="bolognese" />
      </li>
    </ul>
  </fieldset>
</form>

form {
  width: 500px;
  margin: 0 auto;
}

fieldset {
  position: relative;
  margin-bottom: 20px;
}

legend {
  position: absolute;
  color: white;
  background-color: black;
  padding: 3px;
  bottom: 0;
  right: 0;
}

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

fieldset {
  position: relative;
}

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

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

Das <legend>-Element ist sehr wichtig für die Barrierefreiheit — es wird von unterstützenden Technologien als Teil des Labels jedes Formularelements innerhalb des Feldsets vorgelesen — aber die Verwendung einer Technik wie der oben genannten ist in Ordnung. Die Inhalte der Legende werden weiterhin auf die gleiche Weise vorgelesen; es hat sich nur die visuelle Position geändert.

Ein spezielles Styling-Beispiel

Schauen wir uns ein konkretes Beispiel an, wie man ein HTML-Formular gestaltet. Wir werden ein schicken "Postkarten"-Kontaktformular erstellen; siehe hier für die fertige Version.

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

Das HTML

Das HTML ist nur geringfügig 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.

Organisieren Ihrer Assets

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

1. Der Hintergrund der Postkarte — laden Sie dieses Bild herunter und speichern Sie es im selben Verzeichnis wie Ihre Arbeits-HTML-Datei.
2. Eine Schreibmaschinen-Schriftart: Die "Veteran Typewriter"-Schriftart von dafont.com — laden Sie die ZIP-Datei herunter, entpacken Sie sie und kopieren Sie die TTF-Datei in dasselbe Verzeichnis wie zuvor.
3. Eine handgezeichnete Schriftart: Die "Journal"-Schriftart von dafont.com — laden Sie die ZIP-Datei herunter, entpacken Sie sie und kopieren Sie die TTF-Datei in dasselbe Verzeichnis wie zuvor.

Ihre Schriftarten benötigen noch etwas Verarbeitung, bevor Sie loslegen können:

1. Gehen Sie zum Transfonter Webfont-Generator.
2. Drücken Sie die Schaltfläche "Schriften hinzufügen" und laden Sie beide TTF-Dateien hoch.
3. Sobald sie hochgeladen sind, drücken Sie die Schaltfläche "Konvertieren", um ein Webfont-Kit zu generieren.
4. Laden Sie das Kit auf Ihren Computer mit dem "Download"-Link herunter.
5. Entpacken Sie die bereitgestellte ZIP-Datei.
6. Innerhalb der entpackten Inhalte finden Sie einige Schriftdateien (zum Zeitpunkt des Schreibens zwei .woff-Dateien und zwei .woff2-Dateien; sie könnten in Zukunft variieren.) 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 Browserkompatibilität zu maximieren; siehe unseren Web-Schriften-Artikel für weitaus mehr Informationen.

Das CSS

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

Allgemeines Layout

Zuerst bereiten wir uns vor, indem wir unsere @font-face-Regeln definieren und alle grundlegenden Stile, die auf die <body>- und <form>-Elemente gesetzt sind.

Finden Sie die @font-face-Blöcke in ihrem heruntergeladenen Webfont-Kit in der Datei stylesheet.css und ersetzen Sie die untenstehenden @font-face-Blöcke durch sie. Aktualisieren Sie die Pfade zu den Schriftdateien und stellen Sie sicher, dass die font-family-Namen von Journal und Veteran Typewriter auf handwriting und typewriter gesetzt sind. Ihr Transfonter-Ergebnis kann leicht von unserem abweichen, aber das ist in Ordnung, solange Sie die angeforderten Änderungen vornehmen.

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

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

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

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

  /* we create our grid */
  display: 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-Techniken verwendet haben, um das Formular zu gestalten. Auf diese Weise können wir unsere Elemente, einschließlich des Titels und aller Formularelemente, leicht positionieren:

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

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

#from,
#reply {
  display: flex;
}

Labels und Steuerelemente

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

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

Die Textfelder benötigen einige gemeinsame Regeln. Mit anderen Worten, wir entfernen deren Rahmen 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, einen Fokusstil zu haben, aus Usability- und Tastaturzugänglichkeitsgründen):

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

Jetzt, da unsere Textfelder fertig sind, müssen wir die Darstellung der einzeiligen und mehrzeiligen Textfelder so anpassen, dass sie übereinstimmen, da sie normalerweise mit den Standardwerten nicht gleich aussehen.

Anpassen der Textbereiche

<textarea>-Elemente werden standardmäßig als Inline-Block-Elemente gerendert. Die beiden wichtigen Dinge hierbei sind die Eigenschaften resize und overflow. Während unser Design ein Festgrößendesign ist und wir die resize-Eigenschaft verwenden könnten, um Benutzer daran zu hindern, unser mehrzeiliges Textfeld zu vergrößern, ist es besser, Benutzern das Anpassen der Größe eines Textbereichs zu ermöglichen, wenn sie dies wünschen. Die overflow-Eigenschaft wird verwendet, um das Feld konsistenter über Browser hinweg zu rendern. Manche Browser verwenden standardmäßig den Wert auto, während andere scroll verwenden. In unserem Fall ist es besser sicherzustellen, dass jeder auto verwendet:

textarea {
  display: block;

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

  border-right: 1px solid;

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

Gestaltung des Absende-Buttons

Das <button>-Element ist mit CSS sehr leicht zu gestalten; Sie können tun, was auch immer Sie wollen, sogar unter Verwendung von Pseudoelementen:

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

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

button:hover,
button:focus {
  background: black;
  color: white;
}

Das Endergebnis

Und voilà! Ihr Formular sollte nun in etwa so aussehen:

Zusammenfassung

Wie Sie sehen können, solange wir Formulare mit nur Textfeldern und Buttons erstellen wollen, ist es einfach, sie 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: Webformulare
• Weiter