Herausforderung: Eingabe und Label

Ziel

Verbessern Sie die Benutzererfahrung der Website, indem Sie ein interaktives Formular erstellen, das Eingaben für Name, E-Mail und Passwort erfordert, komplett mit zugehörigen Labels.

Aufgabe

Integrieren Sie ein benutzerfreundliches Formular in Ihre Website, um die Benutzerbindung und Interaktion zu verbessern. Ihre Aufgabe ist es:

• Für das Namensfeld: Erstellen Sie ein Texteingabefeld, das die Namen der Benutzer erfasst. Verwenden Sie die richtigen Attribute, um ein nahtloses Erlebnis zu gewährleisten.
  1. Definieren Sie den geeigneten type für das Texteingabefeld;
  2. Setzen Sie den placeholder auf John;
  3. Stellen Sie sicher, dass das Eingabefeld standardmäßig fokussiert ist.
• Für das E-Mail-Feld: Richten Sie ein E-Mail-Eingabefeld ein, das die E-Mail-Adressen der Benutzer erfasst. Stellen Sie die Datenkorrektheit sicher, indem Sie die geeigneten Attribute verwenden.
  1. Definieren Sie den richtigen type für das E-Mail-Eingabefeld;
  2. Setzen Sie den placeholder auf example@gmail.com;
  3. Markieren Sie das Feld als erforderlich.
• Für das Passwortfeld: Erstellen Sie ein sicheres Passwort-Eingabefeld, das die Benutzerdaten schützt. Verwenden Sie die geeigneten Attribute, um den Datenschutz zu verbessern.
  1. Definieren Sie den richtigen type für das Passwort-Eingabefeld;
  2. Machen Sie das Feld erforderlich.

1. autofocus: fokussiert automatisch das Eingabefeld, wenn die Seite geladen wird.
2. required: markiert das Eingabefeld als obligatorisch und verhindert das Absenden des Formulars, wenn es leer gelassen wird.
3. placeholder: bietet einen Hinweis oder Beispieltext für das Eingabefeld.
4. for und id: verknüpft ein Label mit einem Eingabefeld zur Verbesserung der Zugänglichkeit.
5. type: gibt den erwarteten Datentyp im Eingabefeld an (z.B. text, email, password).