Ihr erstes Formular

Der erste Artikel in unserer Reihe bietet Ihnen Ihre allererste Erfahrung beim Erstellen eines Webformulars, einschließlich des Entwurfs eines einfachen Formulars, der Implementierung mit den richtigen HTML-Formularsteuerungen und anderen HTML-Elementen, dem Hinzufügen einer sehr einfachen Stilgestaltung über CSS und der Beschreibung, wie Daten an einen Server gesendet werden. Wir werden später in diesem Modul auf jedes dieser Themen detaillierter eingehen.

Voraussetzungen: Ein grundlegendes Verständnis von HTML.
Ziel: Vertrautheit mit Webformularen zu gewinnen, wofür sie verwendet werden, wie man über deren Gestaltung nachdenkt, und welche grundlegenden HTML-Elemente Sie für einfache Fälle benötigen.

Was sind Webformulare?

Webformulare sind eine der Hauptschnittstellen zwischen einem Benutzer und einer Webseite oder Anwendung. Formulare ermöglichen es den Benutzern, Daten einzugeben, die in der Regel an einen Webserver zur Verarbeitung und Speicherung gesendet werden (siehe Formulardaten senden später im Modul) oder clientseitig verwendet werden, um die Benutzeroberfläche auf irgendeine Weise sofort zu aktualisieren (z.B. um einen weiteren Eintrag zu einer Liste hinzuzufügen oder eine UI-Funktion ein- oder auszublenden).

Das HTML eines Webformulars besteht aus einer oder mehreren Formularsteuerungen (manchmal auch Widgets genannt), sowie einigen zusätzlichen Elementen, um das gesamte Formular zu strukturieren – sie werden oft als HTML-Formulare bezeichnet. Die Steuerungen können Einzel- oder Mehrzeilen-Textfelder, Dropdown-Boxen, Schaltflächen, Kontrollkästchen oder Optionsfelder sein und werden meist mit dem <input>-Element erstellt, obwohl es auch einige andere Elemente gibt, die man kennenlernen sollte.

Formularsteuerungen können auch so programmiert werden, dass sie bestimmte Formate oder Werte erzwingen (Formularvalidierung) und mit Textbeschriftungen gekoppelt werden, die ihren Zweck sowohl für sehende als auch sehbehinderte Benutzer beschreiben.

Ihr Formular gestalten

Bevor Sie mit dem Programmieren beginnen, ist es immer besser, einen Schritt zurückzutreten und sich Zeit zu nehmen, um über Ihr Formular nachzudenken. Das Entwerfen eines schnellen Entwurfs hilft Ihnen, das richtige Set an Daten zu definieren, die Sie Ihren Benutzer eingeben lassen möchten. Aus einer Benutzererfahrungsperspektive (UX) ist es wichtig zu bedenken, dass Sie, je größer Ihr Formular ist, umso mehr riskieren, Menschen zu frustrieren und Benutzer zu verlieren. Halten Sie es einfach und fokussieren Sie sich: Fragen Sie nur nach den Daten, die Sie unbedingt benötigen.

Das Gestalten von Formularen ist ein wichtiger Schritt beim Erstellen einer Website oder Anwendung. Es sprengt den Rahmen dieses Artikels, die Benutzererfahrung von Formularen zu behandeln, aber wenn Sie sich in dieses Thema vertiefen möchten, sollten Sie die folgenden Artikel lesen:

In diesem Artikel werden wir ein einfaches Kontaktformular erstellen. Machen wir einen groben Entwurf.

Das zu erstellende Formular, grob skizziert

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

Aktives Lernen: Implementieren unseres Formular-HTML

Ok, lassen Sie uns versuchen, das HTML für unser Formular zu erstellen. Wir werden die folgenden HTML-Elemente verwenden: <form>, <label>, <input>, <textarea> und <button>.

Bevor Sie weitermachen, erstellen Sie eine lokale Kopie unserer einfachen HTML-Vorlage – Sie werden Ihr Formular-HTML hier einfügen.

Das <form>-Element

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

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

Dieses Element definiert ein Formular formell. Es ist ein Containerelement wie ein <section>- oder <footer>-Element, jedoch speziell für die Aufnahme von Formularen; es unterstützt auch spezifische Attribute, um das Verhalten des Formulars zu konfigurieren. Alle seine Attribute sind optional, aber es ist üblich, immer mindestens die Attribute action und method festzulegen:

  • Das action-Attribut definiert den Ort (URL), an dem die gesammelten Daten des Formulars beim Absenden gesendet werden sollen.
  • Das method-Attribut definiert, welche HTTP-Methode zum Senden der Daten verwendet werden soll (normalerweise get oder post).

Hinweis: Wir werden später in unserem Artikel Formulardaten senden untersuchen, wie diese Attribute funktionieren.

Fügen Sie für den Moment das obenstehende <form>-Element in Ihr HTML-<body> ein.

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

Unser Kontaktformular ist nicht komplex: Der Dateneingabeteil enthält drei Textfelder, von denen jedes ein entsprechendes <label> hat:

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

html
<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, damit er wie der obige aussieht.

Die <p>-Elemente sind dazu da, unseren Code praktisch zu strukturieren und die Stilgestaltung einfacher zu machen (siehe später im Artikel). Zur Benutzerfreundlichkeit und Barrierefreiheit fügen wir ein explizites Label für jede Formularsteuerung hinzu. Beachten Sie die Verwendung des for-Attributs auf allen <label>-Elementen, das als Wert die id der zugehörigen Formularsteuerung übernimmt – so ordnen Sie eine Formularsteuerung ihrem Label zu.

Dies bietet zahlreiche Vorteile – es ordnet das Label der Formularsteuerung zu, sodass Benutzer von Maus, Trackpad und Touch-Geräten auf das Label klicken können, um die entsprechende Steuerung zu aktivieren, und es bietet auch einen zugänglichen Namen für Screenreader, um ihn den Benutzern vorzulesen. Weitere Details zu Formularbeschriftungen finden Sie in So strukturieren Sie ein Webformular.

Am <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. Mehr dazu erfahren Sie im Artikel Grundlegende native Formularsteuerungen später.

  • In unserem einfachen Beispiel verwenden wir den Wert text für das erste Eingabefeld — der Standardwert für dieses Attribut. Es repräsentiert ein grundlegendes einzeiliges Textfeld, das alle Arten von Texteingaben akzeptiert.
  • Für das zweite Eingabefeld verwenden wir den Wert email, was ein einzeiliges Textfeld definiert, das nur eine korrekt formatierte E-Mail-Adresse akzeptiert. Dies verwandelt ein grundlegendes Textfeld in ein „intelligentes“ Feld, das einige Validierungsprüfungen der vom Benutzer eingegebenen Daten durchführt. Es sorgt auch dafür, dass eine geeignetere Tastaturanordnung zum Eingeben von E-Mail-Adressen (z.B. mit einem @-Symbol standardmäßig) auf Geräten mit dynamischen Tastaturen wie Smartphones angezeigt wird. Sie erfahren mehr zur Formularvalidierung im Artikel Clientseitige Formularvalidierung später.

Zu guter Letzt beachten Sie die Syntax von <input> vs. <textarea></textarea>. Dies ist eine der Eigenheiten von HTML. Das <input>-Tag ist ein void element, d.h. es benötigt kein schließendes Tag. <textarea> ist kein void element, d.h. es sollte mit dem richtigen End-Tag geschlossen werden. Dies hat Auswirkungen auf eine spezifische Funktion von Formularen: die Art, wie der Standardwert definiert wird. Um den Standardwert eines <input>-Elements zu definieren, müssen Sie das value-Attribut verwenden, so:

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

Wenn Sie einen Standardwert für ein <textarea> festlegen möchten, setzen Sie ihn zwischen die öffnenden und schließenden Tags des <textarea>-Elements, so:

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

Das <button>-Element

Das Markup für unser Formular ist fast vollständig; 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 geschieht mittels des <button>-Elements; fügen Sie Folgendes direkt vor dem schließenden </form>-Tag hinzu:

html
<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 einer UX-Sicht wird dies als schlechte Praxis angesehen, daher sollten Sie diese Art von Schaltfläche nur nutzen, wenn Sie wirklich einen guten Grund haben, sie einzubeziehen.
  • Ein Klick auf eine button-Schaltfläche tut nichts! Das klingt albern, ist aber erstaunlich nützlich zum Erstellen benutzerdefinierter Schaltflächen — Sie können ihre gewählte Funktionalität mit JavaScript definieren.

Hinweis: Sie können auch das <input>-Element mit dem entsprechenden type verwenden, um eine Schaltfläche zu erzeugen, z.B. <input type="submit">. Der Hauptvorteil des <button>-Elements ist, dass das <input>-Element nur einfachen Text in seinem Label erlaubt, während das <button>-Element vollständigen HTML-Inhalt erlaubt, was komplexere, kreativere Schaltflächeninhalte ermöglicht.

Grundlegendes Styling von Formularen

Nun, da Sie den HTML-Code Ihres Formulars fertig geschrieben haben, versuchen Sie, es zu speichern und in einem Browser anzusehen. Im Moment werden Sie sehen, dass es ziemlich hässlich aussieht.

Hinweis: Wenn Sie glauben, dass Sie den HTML-Code nicht richtig hingekriegt haben, versuchen Sie, ihn mit unserem fertigen Beispiel zu vergleichen – siehe first-form.html (sehen Sie es auch live).

Formulare sind notorisch schwierig, schön zu stylen. Es sprengt den Rahmen dieses Artikels, Ihnen das Styling von Formularen im Detail beizubringen, daher werden wir Sie im Moment nur dazu bringen, etwas CSS hinzuzufügen, damit es gut aussieht.

Fügen Sie zuerst ein <style>-Element auf Ihrer Seite, innerhalb des HTML-Kopfs hinzu. Es sollte so aussehen:

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

Innerhalb der style-Tags fügen Sie das folgende CSS hinzu:

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

form {
  display: inline-block;
  /* Form outline */
  padding: 1em;
  border: 1px solid #ccc;
  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 #999;
}

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.

Hinweis: Sie können unsere Version auf GitHub unter first-form-styled.html finden (sehen Sie es auch live).

Formulardaten an Ihren Webserver senden

Der letzte und vielleicht der schwierigste Teil besteht darin, Formulardaten auf der Serverseite zu verarbeiten. Das <form>-Element definiert, wo und wie die Daten durch die Attribute action und method gesendet werden sollen.

Wir geben ein name-Attribut für jede Formularsteuerung an. Die Namen sind sowohl auf der Client- als auch auf der Serverseite wichtig; sie geben dem Browser an, welchen Namen er jedem Datenstück zuweisen soll, und auf der Serverseite ermöglichen sie es dem Server, jedes Datenstück per Name zu verarbeiten. 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 spezifisches Datenstück sammeln wird. Werfen wir noch einmal einen Blick auf einige unserer Formularcodes:

html
<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 wird das Formular 3 Datenstücke mit den Namen user_name, user_email und user_message senden. Diese Daten werden mit der HTTP POST-Methode an die URL /my-handling-form-page gesendet.

Auf der Serverseite wird das Skript unter der URL /my-handling-form-page die Daten als Liste von 3 Schlüssel/Wert-Elementen enthalten im HTTP-Request empfangen. Die Art, wie dieses Skript diese Daten verarbeiten wird, liegt bei Ihnen. Jede Serverseitige Sprache (PHP, Python, Ruby, Java, C#, etc.) hat ihren eigenen Mechanismus zur Verarbeitung von Formulardaten. Es sprengt den Rahmen dieses Tutorials, tief in dieses Thema einzutauchen, aber wenn Sie mehr wissen möchten, haben wir einige Beispiele in unserem Artikel Formulardaten senden später bereitgestellt.

Zusammenfassung

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

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