In diesem Beispiel werden Bootstrap 5 Klassen verwendet, um das Formular zu formatieren.
Das form-group-Element wird verwendet, um jedes Formularfeld zu umhüllen und die label-Elemente, die mit dem Formularfeld verknüpft sind, korrekt zuzuordnen. Das form-control-Element wird verwendet, um das Formularfeld zu stylen. Wir haben auch eine kleine "Hilfe"-Text, der mithilfe des small-Elements und der Klasse form-text angezeigt werden.
Das Beispiel beinhaltet auch ein input-Element vom Typ "password" und ein input-Element vom Typ "checkbox" mit einer entsprechenden Beschriftung.
Zuletzt haben wir einen "Einloggen"-Knopf, der mithilfe des button-Elements und der Klasse btn btn-primary erstellt wurde.
<form method="post" action="index.php">
<div class="form-group">
<label for="exampleInputEmail1">Email-Adresse</label>
<input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">Wir teilen deine Email-Adresse niemals mit jemandem.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Passwort</label>
<input type="password" name="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-group form-check">
<input type="checkbox" name="loggedin" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Angemeldet bleiben</label>
</div>
<button type="submit" class="btn btn-primary">Einloggen</button>
</form>