HTML: Login erstellen – So gehts

In HTML einen Login zu erstellen, kann eine nützliche Möglichkeit sein, um den Zugriff auf bestimmte Inhalte oder Funktionen auf einer Website einzuschränken. Durch einen Login können Benutzer ihre Identität bestätigen und persönliche Informationen schützen.

Schritt 1: Das HTML-Formular erstellen
Um einen Login zu erstellen, benötigen wir zunächst ein HTML-Formular. Dieses Formular besteht aus den Eingabefeldern für den Benutzernamen und das Passwort sowie einem Button zum Absenden der Daten.

<form>
  <label for="username">Benutzername:</label>
  <input type="text" id="username" name="username" required>

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

  <input type="submit" value="Anmelden">
</form>

Schritt 2: Einen JavaScript-Code für die Überprüfung der Eingaben hinzufügen (optional)
Um sicherzustellen, dass die Eingaben des Benutzers überprüft werden, können wir einen einfachen JavaScript-Code hinzufügen. Dieser Code überprüft, ob die Felder für den Benutzernamen und das Passwort ausgefüllt sind.

<script>
  function validateForm() {
    const username = document.getElementById("username").value;
    const password = document.getElementById("password").value;

    if (username === "" || password === "") {
      alert("Bitte füllen Sie alle Felder aus!");
      return false;
    }
    return true;
  }
</script>

Schritt 3: Das Formular mit dem JavaScript-Code verknüpfen
Damit der JavaScript-Code ausgeführt wird, wenn der Benutzer das Formular absendet, müssen wir dem form-Element das Ereignis onsubmit hinzufügen und auf die validateForm() Funktion verweisen.

<form onsubmit="return validateForm()">
<label for="username">Benutzername:</label>
  <input type="text" id="username" name="username" required>

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

  <input type="submit" value="Anmelden">
</form>

Schritt 4: Die Eingaben überprüfen und weiterleiten
Zum Überprüfen der Eingaben würden wir normalerweise eine serverseitige Programmiersprache wie PHP oder JavaScript verwenden. Da dies jedoch ein einfaches Beispiel ist, können wir die Überprüfung und Weiterleitung auf eine andere Seite einfach mit JavaScript simulieren.

<script>
  function validateForm() {
    const username = document.getElementById("username").value;
    const password = document.getElementById("password").value;

    if (username === "" || password === "") {
      alert("Bitte füllen Sie alle Felder aus!");
      return false;
    } else if (username !== "admin" || password !== "admin123") {
      alert("Ungültiger Benutzername oder Passwort!");
      return false;
    } else {
      alert("Erfolgreich angemeldet!");
      window.location.href = "dashboard.html";
      return false;
    }
  }
</script>

In diesem Beispiel wird der Benutzername „admin“ und das Passwort „admin123„ angenommen. Wenn die Eingaben korrekt sind, wird eine Erfolgsmeldung angezeigt und der Benutzer zur Seite „dashboard.html“ weitergeleitet.

Ergebnis

Fazit:

Die Erstellung eines Logins in HTML ist eine grundlegende Funktion für viele Websites. Durch das Verwenden eines HTML-Formulars, kombiniert mit JavaScript, können wir die Eingaben des Benutzers überprüfen und basierend darauf Aktionen ausführen. Beachte jedoch, dass in der Realität ein sicherer Login wesentlich mehr Funktionalität und Sicherheitsvorkehrungen erfordert.

Hat dir der Beitrag gefallen?

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite