Gestaltung von Webformularen

Herausforderungen bei der Gestaltung von Formular-Widgets

Geschichte

Im Jahr 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 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ügbarer CSS-Unterstützung waren Browseranbieter zunächst zögerlich, Formularelemente stilisierbar zu machen, da die Benutzer an die Aussehen ihrer jeweiligen Browser gewöhnt waren. Doch die Dinge haben sich geändert, und Formularelemente sind jetzt größtenteils stilisierbar, mit einigen Ausnahmen.

Arten von Widgets

Einfach zu gestalten

1. <form>
2. <fieldset> und <legend>
3. Einzeilige Text-<input>s (z.B. Typ Text, URL, E-Mail), außer <input type="search">.
4. Mehrzeilige <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 Erweiterte Formulargestaltung zeigt, wie man diese gestaltet.

Interne Bestandteile können nicht allein mit CSS gestaltet werden

• <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, einschließlich <select>, <option>, <optgroup> und <datalist>.

  Hinweis: Einige Browser unterstützen jetzt anpassbare Select-Elemente, eine Sammlung von HTML- und CSS-Funktionen, die zusammen die vollständige Anpassung von <select>-Elementen und ihren Inhalten ermöglichen, genau wie bei regulären DOM-Elementen.

• <progress> und <meter>

Beispielsweise können der Kalender des Datumsauswahlers und die Schaltfläche auf <select>, die beim Klicken eine Optionsliste anzeigt, nicht nur mit CSS gestylt werden.

Die Artikel Erweiterte Formulargestaltung und Anleitung zum Erstellen benutzerdefinierter Formularelemente beschreiben, wie man diese gestaltet.

Gestaltung einfacher Formular-Widgets

Die in der vorherigen Sektion genannten "einfach zu gestaltenden" Widgets können mit Techniken aus den Artikeln Ihr erstes Formular und CSS-Grundlagen gestaltet werden. Es gibt auch spezielle Selektoren — UI-Pseudo-Klassen —, die eine Gestaltung 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 der Formulargestaltung, die es zu beachten gilt.

Schriftarten und Text

CSS-Schrift- und Textfunktionen können problemlos mit jedem Widget verwendet werden (und ja, Sie können @font-face mit Formular-Widgets verwenden). Das Verhalten der Browser ist jedoch oft inkonsistent. Standardmäßig erben einige Widgets nicht font-family und font-size von ihren übergeordneten Elementen. Viele Browser verwenden stattdessen das standardmäßige Erscheinungsbild des Systems. Um das Erscheinungsbild Ihrer Formulare mit dem Rest Ihres Inhalts einheitlich zu gestalten, können Sie die folgenden Regeln in Ihr Stylesheet aufnehmen:

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

Der inherit-Eigenschaftswert bewirkt, dass der Eigenschaftswert dem berechneten Wert der Eigenschaft des übergeordneten Elements entspricht; er übernimmt 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 zu sehen, wobei der Standardschriftstil der Plattform verwendet wird. Rechts sind die gleichen Elemente mit unserer obigen Stilregel angewendet.

Die Standards unterschieden sich in mehreren Aspekten. Das Erben sollte deren Schriftarten auf die des übergeordneten Schriftartsets ändern — in diesem Fall das standardmäßige Serif-Schriftartset des übergeordneten Containers. Alle tun dies, außer eine merkwürdige Ausnahme — <input type="submit"> erbt nicht vom übergeordneten Absatz in Chrome. Vielmehr verwendet es die font-family: system-ui. Dies ist ein weiterer Grund, <button>-Elemente gegenüber ihren entsprechenden Input-Typen zu verwenden!

Es gibt viel Diskussion darüber, ob Formulare mit den standardmäßigen Systemstilen oder mit angepassten Stilen, die auf Ihren Inhalt abgestimmt sind, besser aussehen. Diese Entscheidung liegt bei Ihnen, als Designer Ihrer Website oder Webanwendung.

Box-Sizing

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 jedoch die Browser auf die standardmäßigen Systemstile beim Anzeigen dieser Widgets. Es liegt an Ihnen zu definieren, wie Sie diese in Ihre Inhalte integrieren möchten. Wenn Sie das native Aussehen und Gefühl der Widgets beibehalten möchten, stoßen Sie auf einige Schwierigkeiten, wenn Sie ihnen eine einheitliche Größe geben möchten.

Dies liegt daran, dass jedes Widget seine eigenen Regeln für Rahmen, Abstände und Ränder hat. Um verschiedenen Widgets die gleiche Größe zu geben, können Sie die box-sizing-Eigenschaft in Verbindung 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 eines <button>. Die rechte Spalte hingegen zeigt die gleichen Elemente mit unserer oben angewandten Regel. Beachten Sie, wie dies uns ermöglicht sicherzustellen, dass alle Elemente den gleichen Raum einnehmen, trotz der standardmäßigen Plattformregeln für jedes Widget.

Was im Screenshot möglicherweise nicht ersichtlich ist, ist, dass die Radio- und Kontrollkästchensteuerungen immer noch gleich aussehen, aber in den 150px des durch die width-Eigenschaft bereitgestellten horizontalen Raums zentriert sind. Andere Browser zentrieren die Widgets möglicherweise nicht, aber sie halten sich an den zugewiesenen Raum.

Platzierung der Legende

Das <legend>-Element ist okay zu gestalten, aber es kann etwas knifflig sein, seine Platzierung zu kontrollieren. Standardmäßig ist es immer über der oberen Grenze seines <fieldset>-Elternteils positioniert, nahe der oberen linken Ecke. Um es anderswo zu positionieren, zum Beispiel irgendwo im Feldset oder nahe 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 zur Klarheit entfernt):

fieldset {
  position: relative;
}

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

Das <fieldset> muss ebenfalls positioniert werden, sodass 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 Barrierefreiheit — es wird von unterstützenden Technologien als Teil der Beschriftung jedes Formularelements innerhalb des Feldsatzes gesprochen — aber eine Technik wie die oben gezeigte ist in Ordnung. Der Inhalt der Legende wird auf die gleiche Weise gesprochen; es ist nur die visuelle Position, die sich geändert hat.

Ein spezifisches Stilbeispiel

Schauen wir uns ein konkretes Beispiel an, wie ein HTML-Formular gestaltet werden kann. Wir werden ein schick aussehendes "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 untenstehenden Anweisungen.

Das HTML

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

Organisieren Ihrer Assets

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

1. Den Hintergrund der Postkarte — laden Sie dieses Bild herunter und speichern Sie es im gleichen Verzeichnis wie Ihre Arbeits-HTML-Datei.
2. Eine Schreibmaschinen-Schriftart: Die "Mom's Typewriter" Schrift von dafont.com — laden Sie die TTF-Datei in das gleiche Verzeichnis wie oben.
3. Eine handgezeichnete Schriftart: Die "Journal" Schrift von dafont.com — laden Sie die TTF-Datei in das gleiche Verzeichnis wie oben.

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

1. Gehen Sie zum fontsquirrel.com Webfont Generator.
2. Laden Sie mit dem Formular beide Schriftdateien hoch und generieren Sie ein Webfont-Kit. Laden Sie das Kit auf Ihren Computer herunter.
3. Entpacken Sie das bereitgestellte Zip-File.
4. In den entpackten Inhalten finden Sie einige Schriftdateien (zum Zeitpunkt des Schreibens zwei .woff-Dateien und zwei .woff2-Dateien; dies könnte sich in Zukunft ändern). 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 Web-Schriften Artikel für viel mehr Informationen.

Das CSS

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

Gesamtlayout

Zuerst bereiten wir uns vor, indem wir unsere @font-face-Regeln und alle grundlegenden Stile festlegen, die auf die Elemente <body> und <form> angewendet werden. Wenn das fontsquirrel-Output anders als oben beschrieben war, 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: #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;
  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 layouten. Damit können wir unsere Elemente, einschließlich der Überschrift und aller Formularelemente, einfach positionieren:

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

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

#from,
#reply {
  display: flex;
}

Beschriftungen und Steuerelemente

Jetzt können wir mit der Arbeit an den Formularelementen selbst beginnen. Zuerst stellen wir sicher, dass den <label>s die richtige Schriftart zugewiesen wird:

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

Die Textfelder erfordern einige gemeinsame Regeln. Mit anderen Worten, wir entfernen ihre Rahmen und Hintergründe, und definieren ihre 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, den Fokus zu stylen, für Benutzerfreundlichkeit und Tastaturzugänglichkeit):

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

Da unsere Textfelder nun vollständig sind, müssen wir das Erscheinungsbild der ein- und mehrzeiligen Textfelder anpassen, damit sie übereinstimmen, da sie typischerweise nicht gleich aussehen, wenn die Standardeinstellungen verwendet werden.

Anpassung der Textbereiche

<textarea>-Elemente werden standardmäßig als Inline-Block-Element gerendert. Die zwei wichtigen Dinge hier sind die resize- und die overflow-Eigenschaft. Während unser Design ein festes Design ist und wir die resize-Eigenschaft verwenden könnten, um zu verhindern, dass Benutzer unser mehrzeiliges Textfeld ändern, ist es am besten, Benutzer nicht daran zu hindern, die Größe eines textbereichs anzupassen, wenn sie dies wünschen. Die overflow-Eigenschaft wird verwendet, um das Feld konsistenter über Browser hinweg darzustellen. Einige Browser verwenden standardmäßig den Wert auto, während einige 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;
}

Gestaltung der Absenden-Schaltfläche

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

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 jetzt so aussehen:

Zusammenfassung

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

• Zurück
• Übersicht: Webformulare
• Weiter