032.4 Lektion 1

Bevor wir uns in den formularspezifischen Auszeichnungscode stürzen, beginnen wir mit einem einfachen, leeren HTML-Dokument ohne Textinhalt:

Speichern Sie das Codebeispiel als einfache Textdatei mit der Erweiterung .html (wie in form.html) und öffnen Sie es mit Ihrem bevorzugten Browser. Laden Sie nach einer Änderung die Datei im Browser neu, um die Änderungen anzuzeigen.

Die Grundstruktur des Formulars bestimmen das Tag <form> und seine internen Elemente:

Die doppelten Anführungszeichen sind für Einzelwortattribute wie type nicht erforderlich, so dass type=text genauso gut funktioniert wie type="text". Der Entwickler entscheidet, welcher Konvention er folgt.

Speichern Sie den neuen Inhalt und laden Sie die Seite erneut in den Browser. Sie sollten das Ergebnis sehen wie in Figure 1.

Das <form>-Tag selbst hat keine sichtbaren Auswirkungen auf die Seite. Die Elemente innerhalb der <form>…​</form>-Tags definieren die Felder und andere visuelle Hilfen, die der Besucher sieht.

Der Beispielcode enthält sowohl allgemeine HTML-Tags (<h2> und <p>) als auch das formularspezifische <input>-Tag. Während allgemeine Tags überall im Dokument stehen können, sollten formularspezifische Tags nur innerhalb des Elements <form> verwendet werden, d.h. zwischen dem öffnenden <form>- und dem schließenden </form>-Tag.

Wie im Beispiel gezeigt, kann das Absatz-Tag <p> dazu dienen, das Feld für den Besucher zu beschreiben. Es gibt jedoch keine offensichtliche Möglichkeit, wie der Browser die Beschreibung im <p>-Tag mit dem entsprechenden Eingabeelement verbindet. In diesen Fällen ist das Tag <label> besser geeignet (im Folgenden gehen wir davon aus, dass sich alle Codebeispiele innerhalb des HTML-Body befinden):

Das Attribut for im Tag <label> enthält die id des jeweiligen Eingabeelements. Es macht die Seite zugänglicher, da Screenreader den Inhalt des Label-Elements sprechen können, wenn das Eingabeelement im Fokus ist. Außerdem können Besucher auf das Label klicken, um den Fokus auf das entsprechende Eingabefeld zu legen.

Das Attribut id funktioniert für Formularelemente wie für jedes andere Element im Dokument. Es liefert einen Bezeichner für das Element, der im gesamten Dokument eindeutig ist. Das Attribut name hat einen ähnlichen Zweck, aber es identifiziert das Eingabeelement im Kontext des Formulars. Der Browser verwendet das Attribut name, um das Eingabefeld zu identifizieren, wenn er die Formulardaten an den Server sendet — daher sind aussagekräftige und eindeutige name-Attribute innerhalb des Formulars wichtig.

Das Attribut type ist das wichtigste Attribut des Eingabeelements, da es den Datentyp, den das Element akzeptiert, und seine visuelle Darstellung für den Besucher kontrolliert. Ohne das Attribut type zeigt die Eingabe standardmäßig ein Textfeld an. Moderne Browser unterstützen die folgenden Eingabetypen:

Das Aussehen der Eingabetypen password, search, tel, url und email unterscheidet sich nicht vom Standardtyp text. Ihr Zweck ist es, dem Browser Hinweise auf den erwarteten Inhalt des Eingabefeldes zu geben, so dass der Browser oder das auf der Client-Seite laufende Skript benutzerdefinierte Aktionen für einen bestimmten Eingabetyp ausführen kann. Der einzige Unterschied zwischen dem Typ Text und dem Typ Passwort besteht beispielsweise darin, dass der Inhalt des Passwortfelds nicht angezeigt wird, wenn der Besucher ihn tippt. Bei Touchscreen-Geräten, auf denen der Text über eine Bildschirmtastatur eingegeben wird, kann der Browser nur die numerische Tastatur einblenden, wenn eine Eingabe vom Typ tel den Fokus erhält. Eine andere Möglichkeit ist, eine Liste bekannter E-Mail-Adressen vorzuschlagen, wenn eine Eingabe des Typs email den Fokus erhält.

Der Typ number erscheint ebenfalls als einfache Texteingabe, jedoch mit Erhöhungs-/Erniedrigungspfeilen an der Seite. Er bewirkt, dass die numerische Tastatur auf Touchscreen-Geräten angezeigt wird, wenn sie den Fokus hat.

Die anderen Eingabeelemente haben ihr eigenes Aussehen und Verhalten. Der Typ date zum Beispiel erscheint entsprechend den lokalen Einstellungen für das Datumsformat und zeigt einen Kalender, wenn das Feld den Fokus erhält:

Figure 2 zeigt, wie die Desktop-Version von Firefox dieses Feld derzeit darstellt.

Dies ist eine Standardfunktion in allen modernen Browsern, die keine zusätzlichen Optionen oder Programmierung erfordert.

Unabhängig vom Eingabetyp bezeichnet man den Inhalt eines Eingabefeldes als seinen Wert. Alle Feldwerte sind standardmäßig leer, aber das Attribut value dient dazu, einen Standardwert für das Feld vorzugeben. Der Wert für den Datumstyp muss dem Format YYYY-MM-DD entsprechen. Der Standardwert für das folgende Datumsfeld ist der 6. August 2020:

Die spezifischen Eingabetypen helfen dem Besucher beim Ausfüllen der Felder, verhindern aber nicht, dass der Besucher die Beschränkungen umgeht und beliebige Werte in ein beliebiges Feld eingibt. Darum ist es wichtig, die Feldwerte zu validieren, wenn sie beim Server ankommen.

Formularelemente, deren Werte der Besucher eingibt, können spezielle Attribute als Ausfüllhilfe enthalten. Das Attribut placeholder fügt einen Beispielwert in das Eingabeelement ein:

Der Platzhalter erscheint innerhalb des Eingabeelements, wie in Figure 3.

Sobald der Besucher mit der Eingabe in das Feld beginnt, verschwindet der Platzhaltertext. Der Platzhaltertext wird nicht als Feldwert gesendet, wenn der Besucher das Feld leer lässt.

Das Attribut required verlangt vom Besucher eine Eingabe in das entsprechende Feld, bevor er das Formular abschickt:

Das Attribut required ist ein boolesches Attribut und kann daher allein (ohne Gleichheitszeichen) verwendet werden. Es ist wichtig, die Felder zu markieren, die erforderlich sind, da der Besucher sonst nicht erkennt, welche Felder fehlen und die Übermittlung des Formulars verhindern.

Das Attribut autocomplete gibt an, ob der Wert des Eingabeelements vom Browser automatisch vervollständigt werden kann. Ist es auf autocomplete="off" gesetzt, schlägt der Browser keine Werte aus der Vergangenheit vor, um den Eintrag zu vervollständigen. Bei Eingabeelementen für sensible Informationen, wie z.B. Kreditkartennummern, sollten Sie das Attribut autocomplete auf off setzen.

Im Gegensatz zum Textfeld, das nur eine Zeile Text aufnimmt, erlaubt das Element textarea dem Besucher umfangreichere Texteingaben. textarea ist ein separates Element, das jedoch nicht auf dem Eingabeelement basiert:

Das typische Aussehen einer Textarea zeigt Figure 4.

Ein weiterer Unterschied zum Eingabeelement ist, dass das textarea-Element ein schließendes Tag hat (</textarea>), das den Inhalt (d.h. seinen Wert) umschließt. Die Attribute rows und cols schränken die Textmenge nicht ein, sie bestimmen nur das Layout. Die Textarea hat auch einen Griff in der unteren rechten Ecke, über den der Besucher die Größe ändert.

Mehrere Arten von Formularsteuerelementen dienen dazu, dem Besucher eine Liste von Optionen zu präsentieren: das <select>-Element und die Eingabetypen radio und checkbox. Das Element <select> ist ein Dropdown-Steuerelement mit einer Liste vordefinierter Einträge:

Das <option>-Tag stellt einen einzelnen Eintrag im entsprechenden <select>-Steuerelement dar. Die gesamte Liste erscheint, wenn der Besucher auf das Steuerelement tippt oder klickt, wie in Figure 5.

Der erste Eintrag in der Liste ist standardmäßig ausgewählt. Um dieses Verhalten zu ändern, fügen Sie das Attribut selected zu einem anderen Eintrag hinzu, so dass dieser beim Laden der Seite vorausgewählt ist.

Der Eingabetyp radio ähnelt dem Steuerelement <select>, doch statt einer Auswahlliste werden alle Einträge angezeigt, so dass der Besucher einen von ihnen markieren kann. Die Ergebnisse des folgenden Codes zeigt Figure 6.

Beachten Sie, dass alle radio-Eingabetypen in derselben Gruppe dasselbe name-Attribut haben. Jeder von ihnen ist exklusiv, so dass das entsprechende value-Attribut für den gewählten Eintrag dasjenige sein wird, das mit dem gemeinsamen name-Attribut verbunden ist. Das checked Attribut funktioniert wie das selected Attribut des Steuerungselements <select>. Es markiert den entsprechenden Eintrag, wenn die Seite zum ersten Mal geladen wird. Das <label>-Tag ist besonders nützlich für radio-Einträge, da es es dem Besucher ermöglicht, einen Eintrag zu überprüfen, indem er auf den entsprechenden Text zusätzlich zu dem Steuerelement selbst klickt oder tippt. Während radio-Steuerelemente nur für die Auswahl eines einzelnen Eintrags in einer Liste gedacht sind, kann der Besucher mit dem Eingabetyp checkbox mehrere Einträge ankreuzen:

Checkboxen nutzen das Attribut checked, um Einträge standardmäßig auszuwählen. Anstelle der runden Steuerelemente der radio-Eingabe, werden Checkboxen als quadratische Steuerelemente dargestellt, wie in Figure 7.

Wird mehr als ein Eintrag ausgewählt, sendet der Browser sie mit demselben Namen, so dass der Backend-Entwickler speziellen Code schreiben muss, um Formulardaten mit Kontrollkästchen korrekt zu lesen.

Um die Benutzerfreundlichkeit zu verbessern, lassen sich Eingabefelder in einem <fieldset>-Tag zusammenfassen:

Das <legend>-Tag enthält den Text, der am oberen Rand des Rahmens erscheint. Das <fieldset>-Tag umgibt die Steuerelemente (Figure 8).

Das <fieldset>-Tag beeinflusst nicht, wie die Feldwerte an den Server übermittelt werden, aber es bietet dem Frontend-Entwickler eine einfachere Kontrolle der verschachtelten Steuerelemente. Wird beispielsweise das Attribut disabled in einem <fieldset>-Attribut gesetzt, sind alle inneren Elemente für den Besucher nicht mehr verfügbar.

Es gibt Situationen, in denen der Entwickler Informationen in das Formular aufnehmen möchte, die der Besucher nicht manipulieren kann, also einen vom Entwickler bestimmten Wert ohne ein Formularfeld, in dem der Besucher den Wert eingeben oder ändern kann. Das könnte beispielsweise ein Identifikationsmerkmal für dieses bestimmte Formular sein, das der Besucher nicht sehen muss. Ein verstecktes Formularelement wird wie im folgenden Beispiel kodiert:

Der Wert eines verborgenen Eingabefeldes wird dem Dokument in der Regel auf der Serverseite hinzugefügt, wenn das Dokument gerendert wird. Ausgeblendete Eingaben werden wie normale Felder behandelt, wenn der Browser sie an den Server sendet, der sie auch wie normale Eingabefelder liest.

Neben Textdaten, die der Besucher entweder eingibt oder aus einer Liste auswählt, übermitteln HTML-Formulare beliebige Dateien an den Server. Mit dem Eingabetyp file wählt der Besucher eine Datei aus dem lokalen Dateisystem aus und sendet sie direkt von der Webseite aus:

Statt eines Formularfeldes für Eingabe oder Auswahl eines Werts, zeigt der Eingabetyp file eine Schaltfläche “Browse” oder “Durchsuchen”, die einen Dateidialog öffnet. Der Eingabetyp file akzeptiert jeden Dateityp, aber der Backend-Entwickler sollte die zulässigen Dateitypen und ihre maximale Größe einschränken. Die Überprüfung des Dateityps ist auch im Frontend möglich, und zwar über das Attribut accept. Um z.B. nur JPEG- und PNG-Bilder zu akzeptieren, lautet das Attribut accept="image/jpeg, image/png".

Standardmäßig wird das Formular abgeschickt, sobald der Besucher in einem beliebigen Eingabefeld die Eingabetaste drückt. Um den Vorgang intuitiver zu gestalten, sollte es eine Schaltfläche “Senden” oder “Submit” mit dem Eingabetyp submit geben:

Der Text im Attribut value erscheint auf der Schaltfläche wie in Figure 9.

Eine weitere nützliche Schaltfläche in komplexen Formularen ist reset, die das Formular löscht und in seinen ursprünglichen Zustand zurücksetzt:

Wie beim Submit-Button dient der Text im Attribut value der Beschriftung der Schaltfläche. Alternativ nutzen Sie das <button>-Tag, um Schaltflächen zu Formularen oder an anderen Stellen auf der Seite hinzuzufügen. Im Gegensatz zu Schaltflächen mit dem <input>-Tag hat das Button-Element ein schließendes Tag und die Beschriftung der Schaltfläche ist ihr innerer Inhalt:

Innerhalb eines Formulars ist die Standardaktion für das Element button das Absenden des Formulars. Wie bei den Input-Schaltflächen können Sie das Typ-Attribut der Schaltfläche auf reset umstellen.

Der letzte Schritt beim Schreiben eines HTML-Formulars besteht darin, festzulegen, wie und wohin die Daten gesendet werden, was von den Details sowohl des Clients als auch des Servers abhängt.

Auf Serverseite ist der gängigste Ansatz eine Skriptdatei, die die Formulardaten dem Zweck der Anwendung entsprechend analysiert, validiert und verarbeitet. Der Backend-Entwickler schreibt zum Beispiel ein Skript receive_form.php, um die vom Formular gesendeten Daten zu empfangen. Auf Clientseite wird das Skript im Attribut action des Formular-Tags angegeben:

Das Attribut action folgt den gleichen Konventionen wie alle HTTP-Adressen. Befindet sich das Skript auf derselben Hierarchieebene wie die Seite, die das Formular enthält, steht es ohne Pfadangabe. Andernfalls muss der absolute oder der relative Pfad angegeben sein. Das Skript sollte auch die Antwort erzeugen, die als Landing Page dient und vom Browser geladen wird, nachdem der Besucher das Formular abgeschickt hat.

Oder:

Bei der get-Methode werden die Formulardaten direkt in der Anfrage-URL kodiert. Wenn der Besucher das Formular absendet, lädt der Browser die im Attribut action definierte URL mit den angehängten Formularfeldern.

Die get-Methode bietet sich für geringe Datenmengen an, z.B. für einfache Kontaktformulare. Die URL darf jedoch einige tausend Zeichen nicht überschreiten, so dass die Methode post verwendet werden sollte, wenn Formulare große oder nichttextliche Felder wie Bilder enthalten.

Die Methode post veranlasst den Browser, die Formulardaten im Body-Teil der HTTP-Anfrage zu senden. Während sie für binäre Daten, die die Größenbeschränkung einer URL überschreiten, notwendig ist, fügt die`post`-Methode der Verbindung unnötigen Overhead hinzu, wenn sie in einfacheren Textformularen verwendet wird, so dass die get-Methode in solchen Fällen vorzuziehen ist.

Die gewählte Methode hat keinen Einfluss darauf, wie der Besucher mit dem Formular interagiert. Die Methoden`get` und post werden von dem serverseitigen Skript, das das Formular erhält, unterschiedlich verarbeitet.

Bei der Methode post ist es auch möglich, den MIME-Typ des Formularinhalts mit dem Formularattribut enctype zu ändern. Dies wirkt sich darauf aus, wie die Formularfelder und -werte in der HTTP-Kommunikation mit dem Server zusammengefügt werden. Der Standardwert für enctype ist application/x-www-form-urlencoded, was dem Format entspricht, das in der get-Methode verwendet wird. Wenn das Formular Eingabefelder vom Typ file enthält, sollte stattdessen der enctype multipart/form-data verwendet werden.