In diesem Blogartikel erkläre ich, wie Sie Formulare in HTML erstellen können.
Formulare sind ein wichtiger Bestandteil von Webseiten, da sie es Nutzern ermöglichen, Informationen einzugeben und zu senden. Wir werden die Grundlagen von Formularen, die verschiedenen Eingabefelder und wie man barrierefreie Formulare erstellt, durchgehen.
Grundlagen der Formulare
Ein Formular wird in HTML mit dem <form>-Tag erstellt. Dieses Tag umschließt alle Eingabeelemente, die der Nutzer ausfüllen soll. Ein einfaches Formular sieht so aus:
<form action="/submit" method="post">
<!-- Eingabeelemente kommen hier -->
</form>
Erklärung
- action: Gibt die URL an, an die die Formulardaten gesendet werden.
- method: Gibt die HTTP-Methode an, die zum Senden der Daten verwendet wird (z.B. post oder get).
Eingabefelder
Es gibt verschiedene Arten von Eingabefeldern, die Sie in ein Formular einfügen können:
Eingabefelder (<input>)
Diese werden für kurze Texteingaben wie Namen oder E-Mail-Adressen verwendet.
<input type="text" name="name" placeholder="Ihr Name"> <input type="email" name="email" placeholder="Ihre E-Mail">
Wann sollten Eingabefelder eingesetzt werden?
Damit Sie wissen, wann Sie Eingabefelder einsetzen sollten hier einige Beispiele:
1. Kurze Texteingaben
Verwenden Sie Eingabefelder vom Typ text, wenn der Nutzer kurze Textinformationen eingeben soll, wie z.B. Namen oder Benutzernamen.
<label for="name" accesskey="n">
<u>N</u>ame:
</label>
<input type="text" id="name" name="name" maxlength="50" required>
Erklärung:
- <label for=“name“>Name:</label>: Dies ist das Label für das Eingabefeld. Es beschreibt, was der Benutzer in das Eingabefeld eingeben soll.
- <input type=“text“ id=“name“ name=“name“ maxlength=“50″>: Dies ist das Eingabefeld für den Namen. Das maxlength-Attribut begrenzt die Eingabe auf 50 Zeichen.
- Das for-Attribut im <label>-Tag gibt die id des zugehörigen Eingabefeldes an. In diesem Fall ist der Wert name.
- Das id-Attribut im <input>-Tag hat den Wert name. Diese id muss mit dem Wert des for-Attributs im <label>-Tag übereinstimmen.
- aria-label: Auf dem <label>-Tag hinzugefügt, um den Namen des Feldes für Screenreader zu klären.
- role=“label“: Für das <label>-Tag angegeben, um klarzustellen, dass es sich um ein Label handelt. Dies ist normalerweise nicht notwendig, da <label> bereits als Label erkannt wird, aber hier wird es zur zusätzlichen Klarheit hinzugefügt.
- role=“textbox“: Für das <input>-Tag angegeben, um anzugeben, dass es sich um ein Textfeld handelt.
- Das accesskey-Attribut wird verwendet, um Tastenkürzel für bestimmte Elemente auf einer Webseite festzulegen.
Benutzerfreundlichkeit
Wenn ein Benutzer auf das Label „Name:“ klickt, wird das zugehörige Eingabefeld automatisch fokussiert. Das bedeutet, der Cursor wird in das Eingabefeld gesetzt, sodass der Benutzer sofort mit der Eingabe beginnen kann. Das macht das Ausfüllen von Formularen einfacher und schneller.
Barrierefreiheit
Screenreader, die von blinden und sehbehinderten Menschen verwendet werden, sind darauf angewiesen, dass Webseiten klar strukturiert sind, um Inhalte korrekt und verständlich vorlesen zu können. Eine wichtige Funktion dabei ist die Verbindung zwischen Labels und Eingabefeldern in Formularen. Diese Verbindung hilft dem Screenreader zu erkennen, welche Beschreibung zu welchem Eingabefeld gehört.
Wie funktioniert die Verbindung?
- Das <label>-Tag: Ein Label beschreibt, was in ein Eingabefeld eingetragen werden soll. Zum Beispiel könnte ein Label „Name“ oder „E-Mail“ lauten.
- Das for-Attribut im <label>-Tag: Das for-Attribut im Label verknüpft das Label mit einem spezifischen Eingabefeld. Der Wert des for-Attributs muss mit dem Wert des id-Attributs des Eingabefelds übereinstimmen.
- Das id-Attribut im <input>-Tag: Das id-Attribut gibt dem Eingabefeld eine eindeutige Kennung. Diese Kennung wird im for-Attribut des Labels verwendet, um die Verbindung herzustellen.
Wenn der Anwender im Betriebssystem Windows die Tasten Alt + N drückt, bekommt das Eingabefeld Name den Eingabefokus.
Das Attribut required
Das required-Attribut in HTML wird verwendet, um sicherzustellen, dass ein Benutzer ein Eingabefeld ausfüllt, bevor er ein Formular absendet. Wenn ein Eingabefeld das required-Attribut hat, kann das Formular nicht abgeschickt werden, bis dieses Feld ausgefüllt ist. Dies hilft, sicherzustellen, dass wichtige Informationen nicht vergessen werden.
<form>
<label for="name" accesskey="n" role="label">
<u>N</u>ame:
</label>
<input type="text" id="name" name="name" maxlength="50" required aria-labelledby="name" role="textbox"> <!-- Eingabefeld mit dem 'required'-Attribut -->
<br>
<button type="submit" role="button">Absenden</button> <!-- Schaltfläche zum Absenden des Formulars -->
</form>
Erklärung:
- <input type=“text“ id=“name“ name=“name“ maxlength=“50″ required>: Dieses Eingabefeld für den Namen ist als erforderlich markiert. Der Benutzer muss seinen Namen eingeben, bevor das Formular abgeschickt werden kann.
- <input type=“email“ id=“email“ name=“email“ required>: Dieses Eingabefeld für die E-Mail-Adresse ist ebenfalls als erforderlich markiert. Der Benutzer muss eine E-Mail-Adresse eingeben, bevor das Formular abgeschickt werden kann.
- <button type=“submit“>Absenden</button>: Die Schaltfläche zum Absenden des Formulars. Wenn die erforderlichen Felder nicht ausgefüllt sind, wird das Formular nicht abgesendet, und der Benutzer wird darauf hingewiesen, die fehlenden Felder auszufüllen.
Das required-Attribut ist ein nützliches Werkzeug, um sicherzustellen, dass Benutzer alle notwendigen Informationen eingeben, bevor sie ein Formular abschicken. Dies verbessert die Datenqualität und verhindert unvollständige Einsendungen.
- role=“label“: Für das <label>-Tag angegeben, um klarzustellen, dass es sich um ein Label handelt. Dies ist normalerweise nicht notwendig, da <label> bereits als Label erkannt wird, aber hier wird es zur zusätzlichen Klarheit hinzugefügt.
- role=“textbox“: Für das <input>-Tag angegeben, um anzugeben, dass es sich um ein Textfeld handelt.
2. E-Mail-Adressen
Verwenden Sie Eingabefelder vom Typ email, um sicherzustellen, dass der Nutzer eine gültige E-Mail-Adresse eingibt. Diese Felder bieten automatische Validierung.
<label for="email">E-Mail:</label> <input type="email" id="email" name="email">
3. Passwörter
Verwenden Sie Eingabefelder vom Typ password, um sicherzustellen, dass eingegebene Passwörter nicht im Klartext sichtbar sind.
<label for="password">Passwort:</label> <input type="password" id="password" name="password">
4. Zahlen
Verwenden Sie Eingabefelder vom Typ number, wenn der Nutzer numerische Werte eingeben soll. Diese Felder können oft auf bestimmte Bereiche oder Schrittweiten begrenzt werden.
<label for="age">Alter:</label>
<input type="number" id="age" name="age" min="0" max="120">
5. Telefonnummern
Verwenden Sie Eingabefelder vom Typ tel, um sicherzustellen, dass der Nutzer eine Telefonnummer eingibt. Diese Felder bieten oft eine spezielle Tastatur auf mobilen Geräten.
<label for="phone">Telefonnummer:</label> <input type="tel" id="phone" name="phone">
6. Längere Texteingaben
Verwenden Sie Textbereiche (<textarea>), wenn der Nutzer längere Texte eingeben soll, wie Kommentare, Nachrichten oder Beschreibungen.
Textbereiche (<textarea>): Diese sind für längere Texteingaben gedacht, wie Kommentare oder Nachrichten.
<textarea name="message" rows="4" cols="50" placeholder="Ihre Nachricht"></textarea>
Auswahlen und Optionen
Dropdown-Menüs (<select>, <option>): Diese ermöglichen es dem Nutzer, eine Option aus einer Liste auszuwählen. Verwenden Sie Dropdown-Menüs (<select> und <option>), wenn der Nutzer eine Auswahl aus mehreren vordefinierten Optionen treffen soll.
<label for="options">Optionen:</label>
<select id="options" name="options">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
Kontrollkästchen und Optionsfelder
Verwenden Sie Kontrollkästchen (<input type=“checkbox“>) und Optionsfelder (<input type=“radio“>), wenn der Nutzer eine oder mehrere Optionen aus einer Gruppe auswählen soll.
<label for="newsletter">Newsletter abonnieren:</label> <input type="checkbox" id="newsletter" name="newsletter"> <input type="radio" id="gender-male" name="gender" value="male"> <label for="gender-male">Männlich</label> <input type="radio" id="gender-female" name="gender" value="female"> <label for="gender-female">Weiblich</label>
Schaltflächen in HTML-Formularen
Was ist eine Schaltfläche?
Eine Schaltfläche (im Englischen „Button“ genannt) ist ein interaktives Element auf einer Webseite, das Nutzer anklicken können, um Aktionen auszulösen. In Formularen wird eine Schaltfläche hauptsächlich verwendet, um die eingegebenen Daten an den Server zu senden.
Warum wird eine Schaltfläche benötigt?
Eine Schaltfläche ist erforderlich, damit der Nutzer die eingegebenen Informationen abschicken kann. Ohne eine Schaltfläche würde das Formular nicht gesendet werden, und die Daten könnten nicht verarbeitet oder gespeichert werden.
Beispiel:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formular mit Schaltfläche</title>
</head>
<body>
<h1>Einfaches HTML-Formular</h1>
<form action="https://example.com/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">E-Mail:</label>
<input type="email" id="email" name="email" required><br><br>
<!-- Schaltfläche zum Absenden des Formulars -->
<button type="submit">Absenden</button>
</form>
</body>
</html>
Erklärung:
- <form>: Das Haupt-Tag, das das Formular umschließt. Es enthält Attribute wie action, die die URL angibt, an die die Daten gesendet werden sollen, und method, die die HTTP-Methode angibt (in diesem Fall post).
- <label> und <input>: Diese Tags werden verwendet, um Eingabefelder für den Namen und die E-Mail-Adresse des Nutzers zu erstellen.
- <button type=“submit“>Absenden</button>: Dies ist die Schaltfläche zum Absenden des Formulars. Das Attribut type=“submit“ weist den Browser an, die im Formular eingegebenen Daten zu senden, wenn die Schaltfläche angeklickt wird.
Wenn der Nutzer das Formular ausfüllt und auf die Schaltfläche „Absenden“ klickt, werden die Daten an die im action-Attribut angegebene URL gesendet, wo sie weiterverarbeitet werden können.
Schlussbemerkung
Formulare sind ein unverzichtbarer Bestandteil jeder Website, da sie den Nutzern ermöglichen, Informationen auf einfache und strukturierte Weise zu übermitteln. In diesem Artikel haben wir die grundlegenden Elemente und Funktionen von Formularen in HTML kennengelernt. Von den verschiedenen Eingabetypen über das Erstellen barrierefreier Formulare bis hin zu den Möglichkeiten der Datenübermittlung – jedes Detail trägt dazu bei, dass Formulare sowohl benutzerfreundlich als auch effektiv sind.
Es ist wichtig, Formulare so zu gestalten, dass sie nicht nur funktional, sondern auch zugänglich sind. Durch die Verwendung der richtigen HTML-Elemente und -Attribute können wir sicherstellen, dass unsere Formulare von allen Nutzern problemlos verwendet werden können – unabhängig von ihren individuellen Bedürfnissen oder technischen Voraussetzungen.
Wenn Sie Fragen zu obige Themen haben, schreiben Sie mir eine Mail an info@marlem-software.de oder rufen Sie mich an unter 07072/1278463 .
Ein Gedanke zu „HTML lernen leicht gemacht: Formulare“