0t1 steckt noch in den Kinderschuhen.

Anmelde- und Registrierungsformular Tutorial

In diesem Tutorial lernst du, wie du mithilfe von HTML und CSS ein Login Formular inklusive Registrierungsformular für deine Website erstellen und gestalten kannst.

Einleitung

Unser Tutorial gliedert sich in vier Teile auf.

Zuerst die Anmeldeseite dann die Registrierungsseite und noch eine Fehlerseite in HTML.

Am Schluss erstellen wir noch ein Stylesheet in CSS. Los geht’s!

1.1 Erste Schritte in HTML - Die Anmeldeseite

Im Ersten Schritt erstellen wir eine HTML-Datei.

Diese beginnt mit dem !DOCTYPE> . Dieser legt fest, dass es sich um ein HTML Dokument handelt.

Als nächstes legen wir mit html lang="en"> die Sprache fest, in unserem Fall ist das Englisch.

1.2 <head>

Nun folgt unser <head> Teil:

Zu aller erst fügt man  den Unicode Zeichensatz UTF-8 mit <meta charset="UTF-8"> ein.

 Mit <meta name="viewport" content="width=device-width, initial-scale=1.0"> legen wir fest, dass sich die Website an die Screengröße des benutzen Gerätes anpasst.

Wir erstellen gleich am Anfang unser CSS-Stylesheet und verlinken es mithilfe von <link rel="stylesheet" href="stylesheet.css">

 Als letztes geben wir dem Dokument den Titel „Anmeldung“. Dieser wird später im Browser Tab zu sehen sein.

 Der Abschnitt wird mit dem Tag </head> geschlossen.

<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="stylesheet.css">                                
    <title> Anmeldung </title>
</head>

1.3 <body>

Nun erstellen wir das Formular für die Anmeldung.

Im ersten Schritt erstellen wir den <body> mit  <div>.

    <form action="action_page.php" method="post"> und

        <div class="container">. Der div-Container gruppiert unsere inneren HTML-Elemente.

Dann erstellen wir einen neuen, diesmal div Imagecontainer, und fügen unsere Bildquelle ein.

body>
    <div>
    <form action="action_page.php" method="post">

<div class="imgcontainer">
        <img src="profilbild.png" alt="profil" class="profil">
      </div>

Dann legen wir einen weiteren div Container an.

Als nächstes legen wir mit <label for="uname"><b>Username</b></label> fest, was über unserem Eingabe Feld stehen soll, in unserem Fall ist das „username“.

Mit <input type="text" placeholder="username" name="uname" required>  erstellen wir das Eingabefeld für den Username und erstellen einen Platzhalter.

<div class="container">
<label for="uname"><b>Username</b></label>
          <input type="text" placeholder="username" name="uname" required>

Um das ganze übersichtlicher zu gestalten setzen wir mit Hilfe von <br> </br> einen Absatz.

Das nächste Eingabefeld für das Passwort wird auf selbe Art und Weise erstellt:

<br> </br>                                              

          <label for="psw"><b>Passwort</b></label>
          <input type="password" placeholder="passwort" name="psw" required>

1.4 Checkbox

Im nächsten Schritt erstellen wir unsere Checkbox.

Mit <label style legen wir die Schriftgröße fest.

Wir erstellen die Checkbox und legen fest, was neben unserer Box steht.

Dann schließen wir unseren div Container.

<br> <br/>

          <label style="font-size:small">
            <input type="checkbox" checked="checked" name="remember"> Angemeldet bleiben      
          </label>

1.5 Anmelde-Button

Um unseren Anmeldebutton zu zentrieren verpacken wir ihn mit dem Code <div.

Mit button type benennen wir unseren Button, in unserem Fall mit "ANMELDUNG".

Dann schließen wir unseren <div> Container.

<br> </br>
            
          <div style="text-align: center">                                       
            <button type="submit">ANMELDEN</button>
          </div>

Mit folgendem Code, erstellen wir zwei Image Container.

Einer für den Schriftzug "anmelden über", und einen für die darunter liegenden Social Media Logos.

<br> </br>

          <div class="imgcontainer">
            <span> anmelden über </span>
          </div>

          <div class="imgcontainer">
              <img src="social media.png" alt="icons" class="social">
          </div>  

        </div>

1.6 Seiten verlinken

Im letzten Schritt verlinken wir noch die Fehler- und Registrierenseite.

Wir öffnen einen neuen div Container und legen Hintergrundfarbe und Größe fest.

Wir verlinken außerdem, die Fehler Seite und geben den Buttons die Namen "Zurück" und "Registrieren".

Wir schließen alle offenen Befehle.

Nun ist unser Anmeldeformular fertig.

<div class="container" style="background-color:#f1f1f1; height: 30px;">
            <a href="fehler.html"><button type="button" class="cancel">Zurück</button></a>                       
            <span class="new"> Neu bei uns? Hier <a href="registrieren.html">Registrieren</a></span>             
        </div>
      </form>
    </div>


</body>
</html>

2.1 Die Registrierungsseite

2.2 <head>

Der head wird wie oben beschrieben erstellt.

Wir stellen wieder eine Verbindung zum CSS-Stylesheet her.

Der Titel lautet diesmal "Registrierung".

Anschließend wir der head wieder geschlossen

<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">
    <title> Registration </title>
</head>

2.3 <body>

Den ersten Befehl den wir eingeben ermöglicht die Funktionalität der Seite.

Mit <method="post"> werden die Daten der Formulare URL-encodiert.

Ein <div class="container"> wird eingebaut, um den bisherigen Elemente von den nächsten abzutrennen.

Der Befehl <label for="name"> ist für sichtbare Beschriftung in den Formularen.

<input text="text"> ist für einzeilige Formularfelder, also für kurze Informationen wie Telefonnummern oder Benutzernamen.

<body>
    <div>
    <form action="action_page.php" method="post">
        <div class="container">
          <label for="name><b>Name</b></label>
          <input type="text" placeholder="name" name="name"

Anschließend brauchen wir Textboxen mit Beschriftung für die E-Mail und für das Passwort.

<label for="email><b>E-Mail</b></label>
<input type="text" placeholder="email" name="email" required>

<br> </br>

<label for="psw"><b>Passwort</b></label>
<input type="password" placeholder="passwort" name"psw" required>

2.4 Registier-Button

Als nächstes erstellen wir den Button mit dem man die Registration beendet.

Dafür benutzen wir den Befehl:<button type="submit">Registrieren</button>.

Danach werden alle offenen div-Elemente geschlossen.

<div style="text-align: center">
    <button type="submit">REGISTRIEREN </button>
  </div>
</div>

2.5 Seiten verlinken

Natürlich brauchen wir auch einen Link der uns zur Anmeldeseite weiterleitet.

<div class="container" style="background-color:#f1f1f1; height: 30px;">
<a href="fehler.html"><button type="button" class="cancel">Zurück</button></a>
  <span class="new"> Du hast schon ein Konto? Hier <a href="anmeldung.html">Anmelden</a></span>

Alle offenen Befehle können geschlossen werden.

Die Registrationsseite ist nun fertig :)

3.1 Die Fehlerseite

Wir beginnen auch unsere Fehlerseite wieder mit <!DOCTYPE html> und <html lang="en">

<!DOCTYPE html>
<html lang="en">

3.2 <head>

Unser head gestaltet sich wie oben.

Wir stellen wieder eine Verlinkung zum CSS Stylesheet her.

Der Titel lautet diesmal "fehler"

Wir schließen den head.

<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="stylesheet.css">                              
    <title> Fehler </title>
</head>

3.3 <body>

Nun erstellen wir den body.

Die headline legen wir mit <h1 style="text-align: center">fest.

Wir schließen die headline mit </h1> und es folgt ein Absatz mit <br> </br>.

<body>

<h1 style="text-align: center">
    Diese Seite ist noch in Bearbeitung. 
</h1>

<br> </br>

Mit dem Code <a href="anmeldung.html"><button type="button" class="cancel">Zurück</button></a>  ermöglichen wir, dass wenn man auf der Anmeldeseite den "Zurück“ Button klickt, man auf die Fehlerseite weitergeleitet wird.

<div class="fehler">
 <a href="anmeldung.html"><button type="button" class="cancel">Zurück</button></a>  
</div>

</body>
</html>

4.1 CSS - Stylesheet

Nun wechseln wir zu unserem CSS Stylesheet.

Zuerst erstellen wir den Rahmen.

Mit border-radius: 8px; können wir die Ecken abrunden.

Nun legen wir die Breite des Formulars mit width: 30%; fest. Dies ist wichtig, damit später das Zentrieren funktioniert.

Mit  margin: auto;  erreichen wir eine zentrierte Darstellung.

form {
  border: 2px solid #f1f1f1;                 
  border-radius: 8px;   	                   
  width: 30%;                                
  margin: auto;                                
}

4.2 Schriftarten und Inputs im <body>

Im Body legen wir mit  font-family: montserrat; und font-size: medium;  die Schriftart fest.

Als nächstes gestalten wir die Inputs also die Eingabefelder:

body { 
    font-family: montserrat;                    
    font-size: medium;                          
}

input[type=text], input[type=password] {

wir legen folgende Maße dafür fest:

width: 100%;
  padding: 10px 12px;
  margin: 10px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  font-family: montserrat;
}

4.3 Buttons

Wir legen folgende Maße für die Buttons fest:

button {
  background-color: #4f73e1;
  color: white;
  padding: 14px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: auto;
  font-family: montserrat;
  font-size: medium;

}

Damit der Button beim darüber hovern heller wird, geben wir folgendes ein:

button:hover {
  opacity: 0.8;                                 
}

Wir legen die Maße für den "Zurück" Button fest:

.cancel {
  width: auto;
  padding: 10px 15px;
  background-color: #696a6b;
  font-family: montserrat;
  font-size: small;
}

Sorgen dafür, dass sich der Zurück-Button mittig befindet.

.fehler {
 text-align: center;
}

Und fügen padding also den Innenabstand zum Container hinzu:

.container {
  padding: 15px;
}

Danach positionieren und gestalten wir den "Registrieren" Button:

span.new {
  float: right;
  padding-top: 10px;
  font-size: small;
}

Legen fest, dass das Profilbild zentriert dargestellt wird und legen die Maße für Profilbild sowie die Social Media Icons fest

.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

img.profil {
  width:25%;
  border-radius: 25%;
}

img.social {
  width: 40%;
}

Nun ist dein Anmeldeformular inklusive Registrierungsseite und Fehlerseite fertig.

Nun kannst du selbst entscheiden, ob du noch weitere Gestaltungsmöglichkeiten verwenden möchtest 😊.

Hier gibt es die Codes zum download:

Anmeldeformular Registrierungsformular Fehler Seite CSS Stylesheet

Quellen

How To Create a Login Form (w3schools.com) (24.11.22)

https://freefrontend.com/css-login-forms/ (24.11.22)

https://csshint.com/css-input-text/ (30.11.22)


© 0t1

Cookies

0t1 mag keine Kekse (und kein Tracking). Wir verwenden lediglich notwendige Cookies für essentielle Funktionen.

Wir verwenden Schriftarten von Adobe Fonts. Dafür stellt dein Browser eine Verbindung zu den Servern von Adobe in den USA her. Wenn du unsere Seite nutzen möchtest, musst du dich damit einverstanden erklären.

Weitere Informationen in unserer Datenschutzerklärung.