Inhaltsverzeichnis
- Einführung
- Komponenten eines Formulars
- Barrierefreie Formulare mit HTML
- Fazit
Einführung
Formulare sind ein wesentlicher Bestandteil beim Aufbau einer Website. Sie werden verwendet, um Daten von Benutzern zu sammeln, wenn sie ihre Daten übermitteln. Formulare sind wichtig für die Interaktion von Benutzern, die ihr Anmeldeformular absenden, sich im Formular anmelden, den Newsletter abonnieren oder eine Nachricht senden, um Feedback zu erhalten. Das Erstellen barrierefreier Formulare ist für alle wichtig, insbesondere für die Screenreader, damit das Ausfüllen des Formulars problemlos möglich ist.
Komponenten eines Formulars
Ein Formular besteht aus verschiedenen Komponenten wie
-
Formular: Dies ist der Container, der alle anderen Formularelemente wie Eingabe-Tag, Senden-Schaltfläche, Textbereich, Kontrollkästchen und Optionsfeld akzeptiert
<form></form>
Nach dem Login kopieren
-
Eingabe: Dies ist das HTML-Element, das die Benutzerdetails akzeptiert. Das Eingabe-Tag wird abhängig vom Zweck der Eingabe bereitgestellt. Text, Nummer, Passwort, E-Mail unter anderem
<form>
<input type="text" />
<input type="email" />
<input type="password" />
<input type="radio" />
<input type="checkbox" />
<input type="file" />
<input type="range" />
<input type="color" />
<input type="date"/>
</form>
Nach dem Login kopieren
-
Label: Dieses Tag gibt einen Überblick über die Details zum Ausfüllen einer Eingabe. Es wird mit dem Eingabe-Tag verknüpft.
<form>
<label for="email">Email</label>
<input type="email">
Nach dem Login kopieren
-
textarea: this is an multi-line input tag that accept 524,288 characters by default except the maxlength attribute is set up to a value. It is used to accept reviews, messages and comments from the users
<form>
<label for="message">Message:</label>
<textarea>
Nach dem Login kopieren
-
select: this element is for creating a dropdown in which the users are able to select one option by default or more options when the attribute multiple is being used.
<form>
<select>
Nach dem Login kopieren
-
checkbox: this element allow users to select one or more options.
<form>
<label for="subscribe"></label>
<input type="checkbox">
Nach dem Login kopieren
-
button: this tag will the users the opportunity to submit their details upon completion. These details are submitted to server.
<form>
<button type="submit">Submit</button>
</form>
Nach dem Login kopieren
Barrierefreie Formulare mit HTML
- Sematische Tags hinzufügen
Mit den richtigen sematischen Tags wie
