## 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 enthält.

## Aufgabe
Fügen Sie Ihrer Seite ein einfaches, benutzerfreundliches Formular hinzu. Beachten Sie dabei folgende Anforderungen:
1. Namensfeld
   - Verwendung eines Texteingabefelds.
   - Platzhalter auf `John` setzen.
   - Das Eingabefeld soll standardmäßig fokussiert sein (autofocus).
2. E-Mail-Feld
   - Verwendung eines E-Mail-Eingabefelds.
   - Platzhalter auf `example@gmail.com` setzen.
   - Feld als erforderlich markieren.
3. Passwortfeld
   - Verwendung eines Passwort-Eingabefelds.
   - Dieses Feld als erforderlich markieren.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDwhLS0gQ2hhbmdlIHRoZSBjb2RlIGJlbG93IC0tPgogICAgPGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgICAgIDxsYWJlbCBmb3I9Im5hbWUiPk5hbWU6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9Il9fXyIgaWQ9Im5hbWUiIG5hbWU9Im5hbWUiIHBsYWNlaG9sZGVyPSJfX18iIF9fXyAvPgoKICAgICAgPGxhYmVsIGZvcj0iX19fIj5FbWFpbDo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0iX19fIiBpZD0iZW1haWwiIG5hbWU9ImVtYWlsIiBwbGFjZWhvbGRlcj0iX19fIiBfX18gLz4KCiAgICAgIDxsYWJlbCBfX189Il9fXyI+UGFzc3dvcmQ6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9Il9fXyIgX19fPSJfX18iIG5hbWU9InBhc3N3b3JkIiBfX18gLz4KCiAgICAgIDxidXR0b24gdHlwZT0ic3VibWl0Ij5TdWJtaXQ8L2J1dHRvbj4KICAgIDwvZm9ybT4KICA8L2JvZHk+CjwvaHRtbD4=

KiB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQoKYm9keSB7CiAgZm9udC1mYW1pbHk6ICJDb21pYyBTYW5zIE1TIiwgY3Vyc2l2ZSwgc2Fucy1zZXJpZjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmNlMzhhOwogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKCiAgbWFyZ2luOiAwOwogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KCmZvcm0gewogIG1hcmdpbi10b3A6IDMwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjsKICBwYWRkaW5nOiAzMHB4OwogIGJvcmRlci1yYWRpdXM6IDE1cHg7CiAgYm94LXNoYWRvdzogMCAxMHB4IDIwcHggcmdiYSgwLCAwLCAwLCAwLjEpOwogIHdpZHRoOiAzNTBweDsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCmgxIHsKICBjb2xvcjogI2U3MWQzNjsKICBtYXJnaW4tYm90dG9tOiAyMHB4OwogIGZvbnQtc2l6ZTogMjhweDsKfQoKbGFiZWwgewogIGRpc3BsYXk6IGJsb2NrOwogIGZvbnQtd2VpZ2h0OiBib2xkOwogIGNvbG9yOiAjZjljNzRmOwogIG1hcmdpbi1ib3R0b206IDEwcHg7CiAgZm9udC1zaXplOiAxOHB4OwogIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7Cn0KCmlucHV0W3R5cGU9InRleHQiXSwKaW5wdXRbdHlwZT0iZW1haWwiXSwKaW5wdXRbdHlwZT0icGFzc3dvcmQiXSB7CiAgd2lkdGg6IDEwMCU7CiAgcGFkZGluZzogMTJweDsKICBtYXJnaW4tYm90dG9tOiAxNXB4OwogIGJvcmRlcjogMnB4IHNvbGlkICNmOWM3NGY7CiAgYm9yZGVyLXJhZGl1czogNXB4OwogIGZvbnQtc2l6ZTogMTRweDsKICBjb2xvcjogIzQ0NDsKICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgMC4zcyBlYXNlLWluLW91dDsKfQoKaW5wdXRbdHlwZT0idGV4dCJdOmZvY3VzLAppbnB1dFt0eXBlPSJlbWFpbCJdOmZvY3VzLAppbnB1dFt0eXBlPSJwYXNzd29yZCJdOmZvY3VzIHsKICBib3JkZXItY29sb3I6ICNmZjZiNmI7Cn0KCmlucHV0OjpwbGFjZWhvbGRlciB7CiAgY29sb3I6ICM4ODg7CiAgZm9udC1zdHlsZTogaXRhbGljOwp9CgpidXR0b24gewogIGJhY2tncm91bmQtY29sb3I6ICNlNzFkMzY7CiAgY29sb3I6ICNmZmY7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDVweDsKICBwYWRkaW5nOiAxMnB4IDI0cHg7CiAgY3Vyc29yOiBwb2ludGVyOwogIGZvbnQtc2l6ZTogMTZweDsKICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZS1pbi1vdXQ7Cn0KCmJ1dHRvbjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmNmI2YjsKfQ==

1. `autofocus`: fokussiert das Eingabefeld automatisch beim Laden der Seite;
2. `required`: kennzeichnet das Eingabefeld als Pflichtfeld und verhindert das Absenden des Formulars, wenn es leer bleibt;
3. `placeholder`: bietet einen Hinweis oder Beispieltext für das Eingabefeld;
4. `for` und `id`: verknüpfen ein Label mit einem Eingabefeld für bessere Zugänglichkeit;
5. `type`: gibt den erwarteten Datentyp im Eingabefeld an, wie Text, E-Mail oder Passwort.


Hinweis

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <form onsubmit="return false">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" placeholder="John" autofocus />

      <label for="email">Email:</label>
      <input
        type="email"
        id="email"
        name="email"
        placeholder="example@gmail.com"
        required
      />

      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required />

      <button type="submit">Submit</button>
    </form>
  </body>
</html>
```

Lösung

Erlernen Sie die Grundlagen von HTML (HyperText Markup Language), dem Fundament der Webentwicklung. Dieser einsteigerfreundliche Kurs behandelt Tags, Attribute, Elemente und die Strukturierung von Webseiten. Erwerben Sie praktische Fähigkeiten im Erstellen von Überschriften, Absätzen, Listen, Bildern, Links, Formularen und Tabellen. Entdecken Sie Best Practices, Optimierung und Webzugänglichkeit. Beginnen Sie Ihre Webentwicklungsreise mit HTML.

Erkunden Sie die Vielseitigkeit von HTML-Formularen. Lernen Sie, intuitive und benutzerfreundliche Formulare durch Anwendung zentraler Konzepte und Techniken zu gestalten. Entdecken Sie, wie Formulare die Benutzerinteraktion und Datenübermittlung auf Websites ermöglichen.

Challenge: Formular mit Eingabefeldern und Beschriftungen Erstellen

Ziel

Aufgabe