Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Herausforderung: Formular mit Eingabefeldern und Beschriftungen Erstellen | HTML-Formulare und Benutzereingaben
Ultimatives HTML

bookHerausforderung: Formular mit Eingabefeldern und Beschriftungen Erstellen

Ziel

Verbesserung der Benutzererfahrung der Website durch die Erstellung eines interaktiven Formulars, das Eingabefelder für Name, E-Mail und Passwort mit zugehörigen Beschriftungen erfordert.

Aufgabe

Ein benutzerfreundliches Formular in die Website integrieren, um die Nutzerbindung und Interaktion zu erhöhen. Die Aufgabe umfasst:

  • Für das Namensfeld: Ein Texteingabefeld erstellen, das die Namen der Nutzer erfasst. Die passenden Attribute für eine reibungslose Nutzung verwenden.
    1. Den passenden type für das Texteingabefeld festlegen;
    2. Das placeholder auf John setzen;
    3. Das Eingabefeld standardmäßig fokussieren.
  • Für das E-Mail-Feld: Ein E-Mail-Eingabefeld erstellen, das die E-Mail-Adressen der Nutzer erfasst. Die passenden Attribute zur Sicherstellung der Datenkorrektheit verwenden.
    1. Den korrekten type für das E-Mail-Eingabefeld festlegen;
    2. Das placeholder auf example@gmail.com setzen;
    3. Das Feld als erforderlich markieren.
  • Für das Passwortfeld: Ein sicheres Passwort-Eingabefeld erstellen, das die Nutzerdaten schützt. Die passenden Attribute zur Verbesserung des Datenschutzes verwenden.
    1. Den korrekten type für das Passwortfeld festlegen;
    2. Das Feld als erforderlich markieren.
index.html

index.html

index.css

index.css

copy
  1. autofocus: fokussiert das Eingabefeld automatisch, wenn die Seite geladen wird.
  2. required: kennzeichnet das Eingabefeld als Pflichtfeld und verhindert das Absenden des Formulars, wenn es leer bleibt.
  3. placeholder: zeigt einen Hinweis oder Beispieltext im Eingabefeld an.
  4. for und id: verknüpft ein Label mit einem Eingabefeld zur Verbesserung der Barrierefreiheit.
  5. type: gibt den erwarteten Datentyp im Eingabefeld an (z. B. Text, E-Mail, Passwort).
index.html

index.html

index.css

index.css

copy
War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 6

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

bookHerausforderung: Formular mit Eingabefeldern und Beschriftungen Erstellen

Ziel

Verbesserung der Benutzererfahrung der Website durch die Erstellung eines interaktiven Formulars, das Eingabefelder für Name, E-Mail und Passwort mit zugehörigen Beschriftungen erfordert.

Aufgabe

Ein benutzerfreundliches Formular in die Website integrieren, um die Nutzerbindung und Interaktion zu erhöhen. Die Aufgabe umfasst:

  • Für das Namensfeld: Ein Texteingabefeld erstellen, das die Namen der Nutzer erfasst. Die passenden Attribute für eine reibungslose Nutzung verwenden.
    1. Den passenden type für das Texteingabefeld festlegen;
    2. Das placeholder auf John setzen;
    3. Das Eingabefeld standardmäßig fokussieren.
  • Für das E-Mail-Feld: Ein E-Mail-Eingabefeld erstellen, das die E-Mail-Adressen der Nutzer erfasst. Die passenden Attribute zur Sicherstellung der Datenkorrektheit verwenden.
    1. Den korrekten type für das E-Mail-Eingabefeld festlegen;
    2. Das placeholder auf example@gmail.com setzen;
    3. Das Feld als erforderlich markieren.
  • Für das Passwortfeld: Ein sicheres Passwort-Eingabefeld erstellen, das die Nutzerdaten schützt. Die passenden Attribute zur Verbesserung des Datenschutzes verwenden.
    1. Den korrekten type für das Passwortfeld festlegen;
    2. Das Feld als erforderlich markieren.
index.html

index.html

index.css

index.css

copy
  1. autofocus: fokussiert das Eingabefeld automatisch, wenn die Seite geladen wird.
  2. required: kennzeichnet das Eingabefeld als Pflichtfeld und verhindert das Absenden des Formulars, wenn es leer bleibt.
  3. placeholder: zeigt einen Hinweis oder Beispieltext im Eingabefeld an.
  4. for und id: verknüpft ein Label mit einem Eingabefeld zur Verbesserung der Barrierefreiheit.
  5. type: gibt den erwarteten Datentyp im Eingabefeld an (z. B. Text, E-Mail, Passwort).
index.html

index.html

index.css

index.css

copy
War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 6
some-alt