Ihr erstes Formular

Was sind Webformulare?

Webformulare gehören zu den wichtigsten Möglichkeiten, mit denen Nutzer mit einer Website oder Anwendung interagieren. Über Formulare können sie Daten eingeben. Diese werden in der Regel zur Verarbeitung und Speicherung an einen Webserver gesendet (siehe Formulardaten senden weiter unten im Modul). Sie können aber auch clientseitig verwendet werden, um die Benutzeroberfläche unmittelbar zu aktualisieren – etwa indem ein weiterer Eintrag zu einer Liste hinzugefügt oder eine Funktion der Benutzeroberfläche ein- oder ausgeblendet wird.

Der HTML-Code eines Webformulars besteht aus einem oder mehreren Formularsteuerelementen (manchmal auch Widgets genannt) sowie zusätzlichen Elementen, die das Formular strukturieren. Solche Formulare werden häufig auch als HTML-Formulare bezeichnet. Zu den Steuerelementen gehören ein- oder mehrzeilige Textfelder, Dropdown-Listen, Schaltflächen, Kontrollkästchen und Optionsfelder. Sie werden größtenteils mit dem Element <input> erstellt; daneben gibt es weitere Elemente, die Sie kennenlernen werden.

Formularsteuerelemente können so eingerichtet werden, dass nur bestimmte Eingabeformate oder Werte zulässig sind (Formularvalidierung). Außerdem können sie mit Textbeschriftungen verknüpft werden, die ihren Zweck sowohl sehenden als auch sehbehinderten Nutzern vermitteln.

Ihr Formular entwerfen

Bevor Sie mit dem Programmieren beginnen, sollten Sie sich Zeit nehmen und Ihr Formular planen. Eine schnelle Skizze hilft Ihnen festzulegen, welche Daten Sie von den Nutzern benötigen. Aus Sicht der Benutzererfahrung (UX) gilt: Je umfangreicher Ihr Formular ist, desto größer ist das Risiko, dass Nutzer frustriert sind und den Vorgang abbrechen. Halten Sie das Formular einfach und konzentrieren Sie sich auf die Daten, die Sie unbedingt benötigen.

Der Entwurf von Formularen ist ein wichtiger Schritt bei der Entwicklung einer Website oder Anwendung. Eine ausführliche Behandlung der Benutzererfahrung bei Formularen würde den Rahmen dieses Artikels sprengen. Wenn Sie sich näher damit befassen möchten, lesen Sie die folgenden Artikel:

• Smashing Magazine bietet einige gute Artikel zur Benutzererfahrung bei Formularen, darunter den älteren, aber weiterhin relevanten Artikel Extensive Guide To Web Form Usability.
• UXMatters bietet ebenfalls fundierte Ratschläge – von grundlegenden bewährten Vorgehensweisen bis zu komplexeren Themen wie mehrseitigen Formularen.

In diesem Artikel erstellen wir ein einfaches Kontaktformular. Beginnen wir mit einer groben Skizze.

Unser Formular enthält drei Textfelder und eine Schaltfläche. Wir fragen nach dem Namen, der E-Mail-Adresse und der Nachricht, die der Nutzer senden möchte. Ein Klick auf die Schaltfläche sendet die Daten an einen Webserver.

Den HTML-Code für unser Formular erstellen

Sehen wir uns an, wie wir den HTML-Code für unser Formular erstellen. Dazu verwenden wir die folgenden HTML-Elemente: <form>, <label>, <input>, <textarea> und <button>.

Erstellen Sie zunächst eine lokale Kopie unserer einfachen HTML-Vorlage. In diese Datei fügen Sie den HTML-Code für Ihr Formular ein.

Das Element <form>

Jedes Formular beginnt mit einem Element <form>, beispielsweise so:

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

Dieses Element definiert das Formular. Es ist ein Containerelement wie <section> oder <footer>, dient jedoch speziell dazu, ein Formular aufzunehmen. Außerdem unterstützt es Attribute, mit denen sich das Verhalten des Formulars konfigurieren lässt. Alle Attribute sind optional; üblicherweise werden aber mindestens die Attribute action und method gesetzt:

• Das Attribut action legt fest, an welche Adresse (URL) die erfassten Formulardaten beim Absenden gesendet werden.
• Das Attribut method legt fest, mit welcher HTTP-Methode die Daten gesendet werden (üblicherweise get oder post).

Fügen Sie zunächst das oben gezeigte Element <form> in den <body> Ihres HTML-Dokuments ein.

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

Unser Kontaktformular ist einfach aufgebaut: Der Eingabebereich enthält drei Textfelder mit jeweils einem zugehörigen <label>:

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

Für diese Formularsteuerelemente benötigen wir ungefähr den folgenden HTML-Code:

<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>

Passen Sie Ihren Formularcode entsprechend an.

Die Elemente <p> strukturieren den Code und erleichtern die Gestaltung (siehe weiter unten im Artikel). Für eine gute Bedienbarkeit und Barrierefreiheit versehen wir jedes Formularsteuerelement mit einer ausdrücklichen Beschriftung. Beachten Sie das Attribut for an allen <label>-Elementen. Sein Wert ist die id des zugehörigen Formularsteuerelements. Auf diese Weise verknüpfen Sie ein Steuerelement mit seiner Beschriftung.

Das hat wichtige Vorteile: Nutzer mit Maus, Trackpad oder Touchgerät können auf die Beschriftung klicken oder tippen, um das zugehörige Steuerelement zu aktivieren. Außerdem erhält das Steuerelement dadurch einen zugänglichen Namen, den Screenreader vorlesen können. Weitere Einzelheiten zu Formularbeschriftungen finden Sie unter Anleitung zur Strukturierung eines Webformulars.

Bei einem <input>-Element ist das Attribut type besonders wichtig. Es bestimmt, wie das Element <input> dargestellt wird und sich verhält. Mehr darüber erfahren Sie später im Artikel Grundlegende native Formularsteuerelemente.

• Im ersten Eingabefeld unseres einfachen Beispiels verwenden wir den Wert text. Das ist der Standardwert dieses Attributs. Er steht für ein einfaches einzeiliges Textfeld, das beliebige Texteingaben akzeptiert.
• Für das zweite Eingabefeld verwenden wir den Wert email. Er definiert ein einzeiliges Textfeld, das nur korrekt formatierte E-Mail-Adressen akzeptiert. Dadurch wird aus einem einfachen Textfeld ein gewissermaßen „intelligentes“ Feld, das die eingegebenen Daten überprüft. Auf Geräten mit dynamischer Tastatur, etwa Smartphones, erscheint außerdem eine für E-Mail-Adressen geeignete Tastaturbelegung, beispielsweise mit einem direkt verfügbaren @-Zeichen. Mehr über die Formularvalidierung erfahren Sie später im Artikel Clientseitige Formularvalidierung.

Beachten Sie schließlich die unterschiedliche Syntax von <input> und <textarea></textarea>. Das ist eine der Besonderheiten von HTML. Das <input>-Tag gehört zu einem leeren Element und benötigt daher kein schließendes Tag. <textarea> ist dagegen kein leeres Element und muss mit einem passenden schließenden Tag abgeschlossen werden. Dieser Unterschied wirkt sich darauf aus, wie Sie einen Standardwert festlegen. Bei einem <input>-Element verwenden Sie dafür das Attribut value:

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

Bei einem <textarea>-Element schreiben Sie den Standardwert dagegen zwischen das öffnende und das schließende Tag:

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

Das Element <button>

Der HTML-Code für unser Formular ist fast fertig. Es fehlt nur noch eine Schaltfläche, mit der Nutzer ihre Daten nach dem Ausfüllen des Formulars senden können. Dafür verwenden wir das Element <button>. Fügen Sie Folgendes direkt vor dem schließenden Tag </form> ein:

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

Das Element <button> unterstützt ebenfalls ein Attribut type. Es kann einen von drei Werten annehmen: submit, reset oder button.

• Ein Klick auf eine submit-Schaltfläche (der Standardwert) sendet die Formulardaten an die Webseite, die im Attribut action des <form>-Elements angegeben ist.
• Ein Klick auf eine reset-Schaltfläche setzt sofort alle Formularsteuerelemente auf ihre Standardwerte zurück. Aus UX-Sicht gilt das als schlechte Praxis. Vermeiden Sie solche Schaltflächen daher, sofern Sie keinen guten Grund dafür haben.
• Ein Klick auf eine button-Schaltfläche bewirkt zunächst nichts! Das klingt wenig hilfreich, ist aber für benutzerdefinierte Schaltflächen sehr nützlich: Deren Funktion können Sie mit JavaScript festlegen.

Das Formular einfach gestalten

Nachdem Sie den HTML-Code für Ihr Formular geschrieben haben, speichern Sie die Datei und öffnen Sie sie in einem Browser. Im Moment sieht das Formular wahrscheinlich noch nicht besonders ansprechend aus.

Formulare ansprechend zu gestalten, ist bekanntermaßen nicht ganz einfach. Eine ausführliche Einführung in die Formulargestaltung würde den Rahmen dieses Artikels sprengen. Vorerst fügen wir nur etwas CSS hinzu, damit das Formular ordentlich aussieht.

Fügen Sie zunächst innerhalb des HTML-head Ihrer Seite ein Element <style> ein. Es sollte so aussehen:

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

Fügen Sie zwischen den style-Tags das folgende CSS ein:

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 Sie die Datei und laden Sie die Seite neu. Ihr Formular sollte jetzt deutlich ansprechender aussehen.

Formulardaten an Ihren Webserver senden

Der letzte und vielleicht schwierigste Teil besteht darin, die Formulardaten auf dem Server zu verarbeiten. Die Attribute action und method des <form>-Elements legen fest, wohin und wie die Daten gesendet werden.

Jedes Formularsteuerelement erhält ein Attribut name. Diese Namen sind sowohl auf Client- als auch auf Serverseite wichtig: Sie geben dem Browser vor, unter welchem Namen er die jeweiligen Daten sendet, und ermöglichen dem Server, die Daten anhand dieser Namen zu verarbeiten. Formulardaten werden als Name-Wert-Paare an den Server gesendet.

Um die Daten eines Formulars zu benennen, verwenden Sie das Attribut name an jedem Formularsteuerelement, das Daten erfasst. Sehen wir uns einen Teil unseres Formularcodes noch einmal an:

<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 drei Dateneinträge mit den Namen user_name, user_email und user_message. Die Daten werden mit der Methode HTTP POST an die URL /my-handling-form-page gesendet.

Auf dem Server empfängt das Skript unter der URL /my-handling-form-page diese Daten als drei Schlüssel-Wert-Paare in der HTTP-Anfrage. Wie das Skript die Daten verarbeitet, hängt von Ihrer Implementierung ab. Jede serverseitige Sprache (PHP, Python, Ruby, Java, C# usw.) hat dafür eigene Mechanismen. Eine ausführliche Behandlung würde den Rahmen dieses Tutorials sprengen. Wenn Sie mehr erfahren möchten, finden Sie später im Artikel Formulardaten senden einige Beispiele.

Zusammenfassung

Herzlichen Glückwunsch – Sie haben Ihr erstes Webformular erstellt. So sieht es 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>

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
});

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 allerdings erst der Anfang. Formulare bieten weit mehr Möglichkeiten, als wir hier kennengelernt haben. Die weiteren Artikel dieses Moduls helfen Ihnen, auch diese Möglichkeiten zu beherrschen.

• Übersicht: Webformulare
• Weiter