HTML-Formulare

Einführung

HTML-Formulare sind ein fundamentaler Bestandteil des Webs und ermöglichen es Benutzern, mit Websites zu interagieren, indem sie Informationen eingeben. Dies kann von einem einfachen Suchfeld bis hin zu einer komplexen Registrierungsseite reichen. In diesem Lab lernen Sie die Grundlagen der Erstellung eines HTML-Formulars, einschließlich des Hinzufügens von Textfeldern, Labels und Submit-Buttons. Wir werden Schritt für Schritt ein einfaches Kontaktformular erstellen.

Die Laborumgebung hat bereits einen Webserver für Sie gestartet. Sie können Ihren HTML-Code in der Datei index.html schreiben und die Live-Vorschau sehen, indem Sie auf den Tab Web 8080 in der oberen linken Ecke klicken.

Form-Tag mit action-Attribut erstellen

In diesem Schritt beginnen wir mit der Erstellung des Containers für unsere Formularelemente. Der <form>-Tag wird verwendet, um ein HTML-Formular für die Benutzereingabe zu erstellen. Alle Formularelemente, wie Textfelder, Buttons und Checkboxen, müssen innerhalb eines <form>-Tags platziert werden.

Das action-Attribut gibt an, wohin die Formulardaten gesendet werden sollen, wenn das Formular abgeschickt wird. Für dieses Lab lassen wir es leer, da wir uns auf die HTML-Struktur und nicht auf die Backend-Verarbeitung konzentrieren.

Bitte öffnen Sie die Datei index.html im Dateiexplorer auf der linken Seite und fügen Sie den folgenden Code hinzu.

<form action=""></form>

Nachdem Sie den Code hinzugefügt haben, können Sie zum Tab Web 8080 wechseln, um die Seite in der Vorschau anzuzeigen. Sie werden noch nichts sehen, da das Formular derzeit leer ist.

Input-Tag mit type text für Textfeld hinzufügen

In diesem Schritt fügen wir ein Feld hinzu, in das Benutzer Text eingeben können. Der <input>-Tag ist eines der am häufigsten verwendeten Formularelemente. Er kann auf viele Arten angezeigt werden, abhängig vom type-Attribut.

Um ein einzeiliges Texteingabefeld zu erstellen, verwenden wir type="text". Dies ist perfekt für Dinge wie Benutzernamen, Namen oder E-Mail-Adressen.

Fügen wir nun ein Texteingabefeld innerhalb der <form>-Tags in Ihre index.html-Datei ein.

<form action="">
  <input type="text" />
</form>

Speichern Sie die Datei und wechseln Sie zum Tab Web 8080. Sie sollten nun ein kleines Textfeld auf der Seite sehen, in das Sie tippen können.

Input-Tag mit type submit für Button einfügen

In diesem Schritt fügen wir einen Button hinzu, mit dem Benutzer das Formular abschicken können. Wir können einen Submit-Button erneut mit dem <input>-Tag erstellen, diesmal jedoch mit type="submit".

Wenn ein Benutzer auf diesen Button klickt, werden die Daten des Formulars an den Server gesendet, der im action-Attribut des <form>-Tags angegeben ist. Sie können den Text, der auf dem Button angezeigt wird, mit dem value-Attribut festlegen.

Fügen wir unserer Formular in index.html einen Submit-Button hinzu.

<form action="">
  <input type="text" />
  <br /><br />
  <input type="submit" value="Submit" />
</form>

Wir haben auch <br><br>-Tags hinzugefügt, um etwas vertikalen Abstand zwischen dem Textfeld und dem Button für ein besseres Layout zu schaffen. Speichern Sie die Datei und überprüfen Sie den Tab Web 8080, um den neuen "Submit"-Button zu sehen.

Label-Tag mit for-Attribut zur Beschriftung verwenden

In diesem Schritt fügen wir unserem Textfeld eine Beschriftung hinzu. Der <label>-Tag definiert eine Beschriftung für viele Formularelemente. Er verbessert die Benutzerfreundlichkeit und Zugänglichkeit, da das Klicken auf die Beschriftung das entsprechende Eingabefeld fokussiert.

Um ein <label> mit einem <input> zu verbinden, muss das for-Attribut des <label> mit dem id-Attribut des <input> übereinstimmen.

Fügen wir unserem Texteingabefeld eine id und ein entsprechendes <label> in index.html hinzu.

<form action="">
  <label for="username">Name:</label><br />
  <input type="text" id="username" name="username" />
  <br /><br />
  <input type="submit" value="Submit" />
</form>

Wir haben ein label für "Name:" hinzugefügt und es über id="username" und for="username" mit dem Eingabefeld verknüpft. Wir haben dem Eingabefeld auch ein name-Attribut hinzugefügt, was wichtig ist, um die Daten bei der Formularübermittlung zu identifizieren.

Speichern Sie die Datei und sehen Sie sich die Änderungen im Tab Web 8080 an. Wenn Sie nun auf den Text "Name:" klicken, bewegt sich der Cursor automatisch in das Textfeld.

Textarea-Tag für mehrzeilige Eingaben hinzufügen

In diesem Schritt fügen wir einen größeren Textbereich hinzu, in den Benutzer eine Nachricht schreiben können. Während <input type="text"> für eine einzelne Textzeile gedacht ist, wird der <textarea>-Tag für mehrzeilige Eingaben verwendet.

Sie können die Größe eines <textarea> mit den Attributen rows und cols steuern, die die sichtbare Anzahl von Zeilen bzw. Zeichen pro Zeile angeben.

Fügen wir unserer Formular ein <textarea> für eine Nachricht hinzu, komplett mit eigenem <label>. Aktualisieren Sie Ihre index.html-Datei mit dem unten stehenden endgültigen Code.

<form action="">
  <label for="username">Name:</label><br />
  <input type="text" id="username" name="username" />
  <br /><br />
  <label for="message">Message:</label><br />
  <textarea id="message" name="message" rows="4" cols="30"></textarea>
  <br /><br />
  <input type="submit" value="Submit" />
</form>

Nun hat unser Formular ein Namensfeld und einen Nachrichtenbereich. Speichern Sie die Datei und betrachten Sie das fertige Formular im Tab Web 8080. Sie haben nun ein funktionales, gut strukturiertes HTML-Formular.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben erfolgreich ein grundlegendes HTML-Formular erstellt. In diesem Lab haben Sie gelernt, wie Sie:

• Den <form>-Tag als Container für Formularelemente verwenden.
• Ein einzeiliges Textfeld mit <input type="text"> erstellen.
• Einen Submit-Button mit <input type="submit"> erstellen.
• Barrierefreiheit und Benutzerfreundlichkeit verbessern, indem Sie ein <label> mit einem Eingabefeld über die Attribute for und id verknüpfen.
• Einen mehrzeiligen Textbereich mit dem <textarea>-Tag hinzufügen.

Dies sind die grundlegenden Bausteine für die Erstellung interaktiver Formulare im Web. Sie können nun weitere Eingabetypen und Formularattribute erkunden, um komplexere und leistungsfähigere Formulare zu erstellen.