Ihr erstes Formular

Was sind Webformulare?

Webformulare sind einer der Hauptanlaufpunkte für die Interaktion zwischen einem Benutzer und einer Website oder Anwendung. Formulare ermöglichen es Benutzern, Daten einzugeben, die in der Regel an einen Webserver zur Verarbeitung und Speicherung gesendet werden (siehe Senden von Formulardaten später im Modul) oder auf der Client-Seite verwendet werden, um die Benutzeroberfläche sofort in irgendeiner Weise zu aktualisieren (zum Beispiel, um ein weiteres Element zu einer Liste hinzuzufügen oder eine UI-Funktion ein- oder auszublenden).

HTML eines Webformulars besteht aus einem oder mehreren Formular-Steuerelementen (manchmal auch Widgets genannt) sowie einigen zusätzlichen Elementen, um das gesamte Formular zu strukturieren — sie werden oft als HTML-Formulare bezeichnet. Die Steuerelemente können einzeilige oder mehrzeilige Textfelder, Dropdown-Boxen, Schaltflächen, Kontrollkästchen oder Radio-Buttons sein und werden hauptsächlich mit dem <input>-Tag erstellt, obwohl es auch einige andere Elemente zu lernen gibt.

Formular-Steuerelemente können programmiert werden, um bestimmte Formate oder Werte zu erzwingen (Formularvalidierung) und sind mit Textetiketten gekoppelt, die ihren Zweck sowohl sehenden als auch sehbehinderten Benutzern beschreiben.

Entwerfen Ihres Formulars

Bevor Sie mit dem Codieren beginnen, ist es immer besser, einen Schritt zurückzutreten und sich die Zeit zu nehmen, über Ihr Formular nachzudenken. Das Entwerfen eines schnellen Entwurfs hilft Ihnen, den richtigen Satz von Daten zu definieren, den Sie von Ihrem Benutzer anfordern möchten. Aus Sicht der Benutzererfahrung (UX) ist es wichtig zu bedenken, dass je größer Ihr Formular ist, desto mehr riskieren Sie, Menschen zu frustrieren und Benutzer zu verlieren. Halten Sie es einfach und bleiben Sie fokussiert: Fragen Sie nur nach den Daten, die Sie unbedingt benötigen.

Das Entwerfen von Formularen ist ein wichtiger Schritt beim Aufbau einer Website oder Anwendung. Es liegt außerhalb des Umfangs dieses Artikels, die Benutzererfahrung von Formularen abzudecken, aber wenn Sie sich in dieses Thema vertiefen möchten, sollten Sie die folgenden Artikel lesen:

• Smashing Magazine hat einige gute Artikel über Formular-UX, darunter einen älteren, aber immer noch relevanten Umfangreichen Leitfaden zur Benutzerfreundlichkeit von Webformularen.
• UXMatters ist ebenfalls eine sehr durchdachte Ressource mit guten Ratschlägen von grundlegenden Best Practices bis hin zu komplexen Anliegen wie mehrseitigen Formularen.

In diesem Artikel erstellen wir ein einfaches Kontaktformular. Lassen Sie uns eine grobe Skizze anfertigen.

Unser Formular wird drei Textfelder und eine Schaltfläche enthalten. Wir fragen den Benutzer nach seinem Namen, seiner E-Mail-Adresse und der Nachricht, die er senden möchte. Durch Anklicken der Schaltfläche werden seine Daten an einen Webserver gesendet.

Aktives Lernen: Umsetzung unseres Formular-HTMLs

Ok, probieren wir die Erstellung des HTMLs für unser Formular aus. Wir werden die folgenden HTML-Elemente verwenden: <form>, <label>, <input>, <textarea>, und <button>.

Bevor Sie weitermachen, machen Sie eine lokale Kopie unserer einfachen HTML-Vorlage — Sie werden Ihr Formular-HTML hier eingeben.

Das <form>-Element

Alle Formulare beginnen mit einem <form>-Element, wie diesem:

<form action="/my-handling-form-page" method="post">…</form>

Dieses Element definiert formal ein Formular. Es ist ein Container-Element wie ein <section>- oder <footer>-Element, aber speziell zum Enthalten von Formularen; es unterstützt auch einige spezifische Attribute, um das Verhalten des Formulars zu konfigurieren. Alle seine Attribute sind optional, aber es ist Standardpraxis, immer mindestens die Attribute action und method festzulegen:

• Das action-Attribut definiert den Ort (URL), an den die gesammelten Daten des Formulars bei der Übermittlung gesendet werden sollen.
• Das method-Attribut definiert, mit welcher HTTP-Methode die Daten gesendet werden sollen (üblicherweise get oder post).

Fügen Sie nun das oben stehende <form>-Element in Ihr HTML-<body> ein.

Die <label>, <input> und <textarea>-Elemente

Unser Kontaktformular ist nicht komplex: Der Dateneingabeteil enthält drei Textfelder, jedes mit einem entsprechenden <label>:

• Das Eingabefeld für den Namen ist ein Einzeiliges Textfeld.
• Das Eingabefeld für die E-Mail ist ein Eingabe vom Typ E-Mail: ein einzeiliges Textfeld, das nur E-Mail-Adressen akzeptiert.
• Das Eingabefeld für die Nachricht ist ein <textarea>; ein mehrzeiliges Textfeld.

In Bezug auf HTML-Code benötigen wir etwas wie das Folgende, um diese Formular-Widgets zu implementieren:

<form action="/my-handling-form-page" method="post">
  <p>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" />
  </p>
  <p>
    <label for="mail">Email:</label>
    <input type="email" id="mail" name="user_email" />
  </p>
  <p>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </p>
</form>

Aktualisieren Sie Ihren Formularcode, sodass er wie der obenstehende aussieht.

Die <p>-Elemente sind dazu da, unseren Code bequem zu strukturieren und das Styling zu erleichtern (siehe später im Artikel). Für Benutzerfreundlichkeit und Zugänglichkeit fügen wir ein explizites Label für jedes Formular-Steuerelement hinzu. Beachten Sie die Verwendung des for-Attributs auf allen <label>-Elementen, das als Wert die id des zugehörigen Formular-Steuerelements nimmt — so ordnen Sie ein Formular-Steuerelement seinem Label zu.

Dies hat einen großen Vorteil — es verknüpft das Label mit dem Formular-Steuerelement, sodass Benutzer von Maus, Trackpad und Touch-Geräten auf das Label klicken können, um das entsprechende Steuerelement zu aktivieren, und es bietet auch einen zugänglichen Namen für Bildschirmleseprogramme, um ihren Benutzern vorzulesen. Weitere Details zu Formularlabels finden Sie in der Anleitung zur Strukturierung eines Webformulars.

Beim <input>-Element ist das wichtigste Attribut das type-Attribut. Dieses Attribut ist äußerst wichtig, da es das Erscheinungsbild und Verhalten des <input>-Elements definiert. Dazu erfahren Sie mehr im späteren Artikel Grundlegende native Formular-Steuerelemente.

• In unserem einfachen Beispiel verwenden wir den Wert text für die erste Eingabe — den Standardwert für dieses Attribut. Er stellt ein grundlegendes einzeiliges Textfeld dar, das jede Art von Texteingabe akzeptiert.
• Für die zweite Eingabe verwenden wir den Wert email, der ein einzeiliges Textfeld definiert, das nur eine gut formatierte E-Mail-Adresse akzeptiert. Dies verwandelt ein einfaches Textfeld in ein Art "intelligentes" Feld, das einige Validierungsprüfungen der vom Benutzer eingegebenen Daten durchführt. Auf Geräten mit dynamischen Tastaturen, wie Smartphones, erscheint auch eine passendere Tastaturanordnung zum Eingeben von E-Mail-Adressen (z. B. mit einem @-Zeichen standardmäßig). Mehr über Formularvalidierung erfahren Sie im späteren Artikel Clientseitige Formularvalidierung.

Last but not least, beachten Sie die Syntax von <input> vs. <textarea></textarea>. Dies ist eine der Eigenheiten von HTML. Das <input>-Tag ist ein Void-Element, was bedeutet, dass es keinen Schlusstag benötigt. <textarea> ist kein Void-Element, was bedeutet, dass es mit dem richtigen Endtag geschlossen werden sollte. Dies hat Auswirkungen auf eine spezifische Funktion von Formularen: die Art und Weise, wie Sie den Standardwert definieren. Um den Standardwert eines <input>-Elements zu definieren, müssen Sie das value-Attribut wie folgt verwenden:

<input type="text" value="by default this element is filled with this text" />

Wenn Sie dagegen einen Standardwert für ein <textarea> definieren möchten, setzen Sie ihn zwischen die Öffnungs- und Schlusstag des <textarea>-Elements, wie folgt:

<textarea>
by default this element is filled with this text
</textarea>

Das <button>-Element

Das Markup für unser Formular ist fast fertig; wir müssen nur noch eine Schaltfläche hinzufügen, mit der der Benutzer seine Daten senden oder "übermitteln" kann, sobald er das Formular ausgefüllt hat. Dies wird durch die Verwendung des <button>-Elements gemacht; fügen Sie das Folgende kurz vor dem schließenden </form>-Tag hinzu:

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

Das <button>-Element akzeptiert auch ein type-Attribut — dieses akzeptiert einen von drei Werten: submit, reset oder button.

• Ein Klick auf eine submit-Schaltfläche (der Standardwert) sendet die Formulardaten an die Webseite, die durch das action-Attribut des <form>-Elements definiert ist.
• Ein Klick auf eine reset-Schaltfläche setzt alle Formular-Widgets sofort auf ihren Standardwert zurück. Aus UX-Sicht wird dies allgemein als schlechte Praxis angesehen, daher sollten Sie diese Art von Schaltfläche vermeiden, es sei denn, Sie haben wirklich einen guten Grund, eine hinzuzufügen.
• Ein Klick auf eine button-Schaltfläche tut nichts! Das klingt albern, aber es ist unglaublich nützlich, um benutzerdefinierte Schaltflächen zu erstellen — Sie können ihre gewählte Funktionalität mit JavaScript definieren.

Grundlegendes Formularstyling

Nachdem Sie den HTML-Code Ihres Formulars abgeschlossen haben, versuchen Sie, es zu speichern und in einem Browser zu betrachten. Im Moment werden Sie sehen, dass es ziemlich hässlich aussieht.

Formulare sind notorisch schwer schön zu stylen. Es liegt außerhalb des Umfangs dieses Artikels, Ihnen detailliertes Formularstyling beizubringen, daher werden wir Sie im Moment nur dazu bringen, etwas CSS hinzuzufügen, damit es besser aussieht.

Zunächst fügen Sie ein <style>-Element zu Ihrer Seite hinzu, innerhalb des HTML-Kopfes. Es sollte so aussehen:

<style>
  /* CSS goes here */
</style>

Fügen Sie innerhalb der style-Tags das folgende CSS hinzu:

body {
  /* Center the form on the page */
  text-align: center;
}

form {
  display: inline-block;
  /* Form outline */
  padding: 1em;
  border: 1px solid #cccccc;
  border-radius: 1em;
}

p + p {
  margin-top: 1em;
}

label {
  /* Uniform size & alignment */
  display: inline-block;
  min-width: 90px;
  text-align: right;
}

input,
textarea {
  /* To make sure that all text fields have the same font settings
     By default, text areas have a monospace font */
  font: 1em sans-serif;
  /* Uniform text field size */
  width: 300px;
  box-sizing: border-box;
  /* Match form field borders */
  border: 1px solid #999999;
}

input:focus,
textarea:focus {
  /* Set the outline width and style */
  outline-style: solid;
  /* To give a little highlight on active elements */
  outline-color: black;
}

textarea {
  /* Align multiline text fields with their labels */
  vertical-align: top;
  /* Provide space to type some text */
  height: 5em;
}

.button {
  /* Align buttons with the text fields */
  padding-left: 90px; /* same size as the label elements */
}

button {
  /* This extra margin represent roughly the same space as the space
     between the labels and their text fields */
  margin-left: 0.5em;
}

Speichern und neu laden, und Sie werden sehen, dass Ihr Formular viel weniger hässlich aussehen sollte.

Senden von Formulardaten an Ihren Webserver

Der letzte Teil und vielleicht der kniffligste ist die Handhabung von Formulardaten auf der Serverseite. Das <form>-Element definiert, wohin und wie die Daten gesendet werden, dank der action- und method-Attribute.

Wir stellen ein name-Attribut für jedes Formular-Steuerelement bereit. Die Namen sind sowohl client- als auch serverseitig wichtig; sie teilen dem Browser mit, welchen Namen er jedem Datenstück geben soll, und serverseitig lassen sie den Server jedes Datenstück nach Namen behandeln. Die Formulardaten werden als Name/Wert-Paare an den Server gesendet.

Um die Daten in einem Formular zu benennen, müssen Sie das name-Attribut für jedes Formular-Widget verwenden, das ein bestimmtes Datenstück sammelt. Werfen wir erneut einen Blick auf einige unserer Formularcodes:

<form action="/my-handling-form-page" method="post">
  <p>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" />
  </p>
  <p>
    <label for="mail">Email:</label>
    <input type="email" id="mail" name="user_email" />
  </p>
  <p>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </p>

  …
</form>

In unserem Beispiel sendet das Formular 3 Datenstücke mit den Namen user_name, user_email und user_message. Diese Daten werden mit der HTTP POST-Methode an die URL /my-handling-form-page gesendet.

Serverseitig empfängt das Skript an der URL /my-handling-form-page die Daten als Liste von 3 Schlüssel/Wert-Paaren, die in der HTTP-Anfrage enthalten sind. Wie dieses Skript die Daten verarbeitet, bleibt Ihnen überlassen. Jede serverseitige Sprache (PHP, Python, Ruby, Java, C#, etc.) hat ihren eigenen Mechanismus zur Verarbeitung von Formulardaten. Es liegt außerhalb des Umfangs dieses Tutorials, tief in dieses Thema einzutauchen, aber wenn Sie mehr wissen möchten, haben wir einige Beispiele in unserem Artikel Senden von Formulardaten später bereitgestellt.

Zusammenfassung

Herzlichen Glückwunsch, Sie haben Ihr erstes Webformular erstellt. Es sieht live so aus:

<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" />
  </div>

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

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

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

form {
  /* Just to center the form on the page */
  margin: 0 auto;
  width: 400px;

  /* To see the limits of the form */
  padding: 1em;
  border: 1px solid #cccccc;
  border-radius: 1em;
}

div + div {
  margin-top: 1em;
}

label {
  /* To make sure that all label have the same size and are properly align */
  display: inline-block;
  width: 90px;
  text-align: right;
}

input,
textarea {
  /* To make sure that all text field have the same font settings
     By default, textarea are set with a monospace font */
  font: 1em sans-serif;

  /* To give the same size to all text field */
  width: 300px;

  -moz-box-sizing: border-box;
  box-sizing: border-box;

  /* To harmonize the look & feel of text field border */
  border: 1px solid #999999;
}

input:focus,
textarea:focus {
  /* To give a little highlight on active elements */
  border-color: black;
}

textarea {
  /* To properly align multiline text field with their label */
  vertical-align: top;

  /* To give enough room to type some text */
  height: 5em;

  /* To allow users to resize any textarea vertically
     It works only on Chrome, Firefox and Safari */
  resize: vertical;
}

.button {
  /* To position the buttons to the same position of the text fields */
  padding-left: 90px; /* same size as the label elements */
}

button {
  /* This extra margin represent the same space as the space between
     the labels and their text fields */
  margin-left: 0.5em;
}

Das ist jedoch nur der Anfang — jetzt ist es an der Zeit, einen genaueren Blick darauf zu werfen. Formulare haben weit mehr Möglichkeiten als das, was wir hier gesehen haben, und die anderen Artikel in diesem Modul werden Ihnen helfen, den Rest zu meistern.

• Übersicht: Webformulare
• Weiter