wie man ein Anmeldeformular mit HTML, CSS und JS erstellt. Das Anmeldeformular sollte um folgende Informationen bitten: 
- Vorname
- Nachname
- E-Mail-Adresse
- Telefonnummer
- Passwort
- Passwortbestätigung
Verwende Formularvalidierung, um falsche Informationen zu vermeiden
Hier ist ein Beispiel, wie du ein Anmeldeformular mit HTML, CSS und JavaScript und Formularvalidierung erstellen kannst:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer><script />
    <title>Anmelden</title>
</head>
<body>
    <form id="anmeldeformular">
        <div class="formular-gruppe">
          <label for="vorname">Vorname:</label>
          <input type="text" id="vorname" name="vorname" required>
        </div>
        <div class="formular-gruppe">
          <label for="nachname">Nachname:</label>
          <input type="text" id="nachname" name="nachname" required>
        </div>
        <div class="formular-gruppe">
          <label for="email">E-Mail:</label>
          <input type="email" id="email" name="email" required>
        </div>
        <div class="formular-gruppe">
          <label for="telefon">Telefonnummer:</label>
          <input type="tel" id="telefon" name="telefon" required>
        </div>
        <div class="formular-gruppe">
          <label for="passwort">Passwort:</label>
          <input type="password" id="passwort" name="passwort" required>
        </div>
        <div class="formular-gruppe">
          <label for="passwort-bestätigung">Passwort bestätigen:</label>
          <input type="password" id="passwort-bestätigung" name="passwort-bestätigung" required>
        </div>
        <button type="submit">Anmelden</button>
      </form>
</body>
</html>
```

```css
.formular-gruppe {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

label {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"] {
  padding: 0.5rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  border: 1px solid gray;
}

button[type="submit"] {
  padding: 0.5rem 1rem;
  background-color: lightblue;
  color: white;
  border-radius: 0.25rem;
  border: none;
  cursor: pointer;
}
```

```js
const formular = document.querySelector("#anmeldeformular");
const passwortEingabe = document.querySelector("#passwort");
const passwortBestätigungEingabe = document.querySelector("#passwort-bestätigung");

formular.addEventListener("submit", (ereignis) => {
    ereignis.preventDefault();

    const eingaben = ["vorname", "nachname", "email", "telefon", "passwort", "passwort-bestätigung"];
    const telefonRegex = new RegExp("[0-9][0-9| ]+");
    const werte = [];

    for (const eingabe of eingaben) {
        const wert = formular.elements[eingabe].value;

        if (!wert) {
            return eingabeFehler(eingabe);
        } else {
            formular.elements[eingabe].style.border = undefined;
        }

        werte.push(wert);
    }

    const emailWert = werte[eingaben.indexOf("email")];
    const telefonWert = werte[eingaben.indexOf("telefon")];
    const passwortWert = werte[eingaben.indexOf("passwort")];
    const passwortBestätigungWert = werte[eingaben.indexOf("passwort-bestätigung")];

    if (!emailWert.includes("@")) { return eingabeFehler("email") }


    if (!telefonRegex.test(telefonWert)) {return eingabeFehler("telefon")}

    if (passwortWert !== passwortBestätigungWert) {
        eingabeFehler("passwort");
        return eingabeFehler("passwort-bestätigung");
    }


});

function eingabeFehler(eingabeName) {
    formular.elements[eingabeName].style.border = "1px solid red";
}
```