Einführung
Das Anmelde- und Registrierungsformular ist außerdem ein wesentlicher Bestandteil vieler Websites, da es den Nutzern die Möglichkeit bietet, auf sichere Weise auf Inhalte zuzugreifen, und auch die Personalisierung der Dienste erleichtert. Es ermöglicht den Nutzern, auf ein Konto zuzugreifen oder sich für einen Dienst anzumelden und somit dessen Funktionalität voll auszuschöpfen, was wiederum ihre Zufriedenheit beeinflusst. Um ein ästhetisch ansprechendes und funktionales Formular zu erstellen, sind das richtige Design und der richtige Code erforderlich.
In diesem Artikel werden wir ein Beispiel für ein Anmelde- und Registrierungsformular besprechen, das in HTML und CSS entworfen wurde, und zeigen, wie es angepasst werden kann, um intuitiver zu sein, was die Benutzererfahrung sicherlich verbessern wird. Wir werden auch zeigen, wie der interaktive Wechsel zwischen Anmeldung und Registrierung funktioniert.
HTML-Struktur
Das Hauptelement des Formulars ist ein Kippschalter, der es dem Benutzer ermöglicht, den Modus zwischen Anmeldung und Registrierung zu wechseln, was den Komfort erhöht. Das Anmeldeformular enthält Felder für die E-Mail-Adresse und das Passwort. Das Registrierungsformular enthält ein Feld für den Namen und das Kennwort des Benutzers.
Der HTML-Code ist in zwei Abschnitte unterteilt. Ein Abschnitt ist für die Anmeldung zuständig, der andere für die Registrierung. Ein responsiver Container umgibt alles, damit das Formular auf mobilen Geräten korrekt funktioniert.
CSS-Styling
Das Styling dieses Anmelde- und Registrierungsformular basiert auf einem modernen Design. Zu den wichtigsten Merkmalen gehören abgerundete Kanten, eine klare Typografie und interaktive Animationen. Die Farben wurden so gewählt, dass sie ein ästhetisch ansprechendes Erscheinungsbild und eine einfache Nutzung gewährleisten.
Jedes Formularelement ist korrekt ausgerichtet und optimiert. Das CSS enthält auch Hover- und Übergangseffekte, um das Nutzererlebnis zu verbessern. Mit Platzhalterstilen kann der Benutzer die auszufüllenden Felder leichter identifizieren.
Zusammenfassung
Die Gestaltung des Anmelde- und Registrierungsformulars ist ein wichtiger Schritt bei der Erstellung moderner Websites, da ein gut gestaltetes Formular nicht nur seine Funktion erfüllt, sondern vor allem die Erfahrung des Benutzers verbessert und sein Vertrauen in die Website erhöht. Der oben vorgestellte Beispielcode bietet ein elegantes Aussehen und volle Funktionalität. Die verwendeten HTML- und CSS-Techniken machen das Formular attraktiv und benutzerfreundlich.
Erstellen Sie Ihr eigenes Anmelde- und Registrierungsformularkönnen Sie die mitgelieferten Beispiele verwenden. Denken Sie daran, die UX und die Reaktionsfähigkeit richtig zu optimieren. Ein ausgefeiltes Formular verbessert das Nutzererlebnis und erhöht die Wirksamkeit der Website.
HTML CODE
<div class="section">
<div class="container">
<div class="row full-height justify-content-center">
<div class="col-12 text-center align-self-center py-5">
<div class="section pb-5 pt-5 pt-sm-2 text-center">
<h6 class="mb-0 pb-3"><span>ANMELDEN </span><span>REGISTER</span></h6>
<input class="checkbox" type="checkbox" id="reg-log" name="reg-log"/>
<label for="reg-log"></label>
<div class="card-3d-wrap mx-auto">
<div class="card-3d-wrapper">
<!-- Formularz logowania -->
<div class="card-front">
<div class="center-wrap">
<div class="section text-center">
<h4 class="mb-4 pb-3">ANMELDEN</h4>
<div class="form-group">
<input type="email" name="logemail" class="form-style" placeholder="Deine E-Mail" id="login-email" autocomplete="off">
<label for="login-email" class="placeholder-label">Deine E-Mail</label>
<i class="input-icon uil uil-at"></i>
</div>
<div class="form-group mt-2">
<input type="password" name="logpass" class="form-style" placeholder="Ihr Passwort" id="login-pass" autocomplete="off">
<label for="login-pass" class="placeholder-label">Ihr Passwort</label>
<i class="input-icon uil uil-lock-alt"></i>
</div>
<a href="#" class="btn btn-login mt-4">ANMELDEN</a>
<p class="mb-0 mt-4 text-center">
<a href="/de/</?php echo wp_lostpassword_url(); ?>" class="link">Haben Sie Ihr Passwort vergessen?</a>
</p>
</div>
</div>
</div>
<!-- Formularz rejestracji -->
<div class="card-back">
<div class="center-wrap">
<div class="section text-center">
<h4 class="mb-4 pb-3">REGISTER</h4>
<div class="form-group">
<input type="text" name="regname" class="form-style" placeholder="Ihr Name" id="register-name" autocomplete="off">
<label for="register-name" class="placeholder-label">Ihr Name</label>
<i class="input-icon uil uil-user"></i>
</div>
<div class="form-group mt-2">
<input type="email" name="regemail" class="form-style" placeholder="Deine E-Mail" id="register-email" autocomplete="off">
<label for="register-email" class="placeholder-label">Deine E-Mail</label>
<i class="input-icon uil uil-at"></i>
</div>
<div class="form-group mt-2">
<input type="password" name="regpass" class="form-style" placeholder="Ihr Passwort" id="register-pass" autocomplete="off">
<label for="register-pass" class="placeholder-label">Ihr Passwort</label>
<i class="input-icon uil uil-lock-alt"></i>
</div>
<a href="#" class="btn btn-register mt-4">REGISTER</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS CODE
/* ANMELDESEITE */
.mb-0{
Farbe:weiß !wichtig;
padding-bottom:10px;
text-align:center;
}
.pb-3{
padding-bottom:10px;
text-align:center;
}
a {
Cursor: Zeiger;
Übergang: alle 200ms linear;
}
a:hover {
text-decoration: keine;
}
.link {
Farbe: #262626;
font-weight:600;
}
.link:hover {
Farbe: #00add9;
}
p {
Schriftart-Gewichtung: 500;
Schriftgröße: 14px;
line-height: 1.7;
}
h4 {
font-weight: 600;
}
h6 span{
padding: 0 20px;
text-transform: Großbuchstaben;
Schriftart-Gewicht: 700;
}
.section{
Position: relativ;
Breite: 100%;
Anzeige: block;
}
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
position: absolute;
left: -9999px;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label{
Position: relativ;
Anzeige: block;
text-align: zentriert;
Breite: 60px;
Höhe: 16px;
border-radius: 8px;
padding: 0;
Rand: 10px auto;
Cursor: Zeiger;
Hintergrundfarbe: weiß;
}
.checkbox:checked + label:before,
.checkbox:not(:checked) + label:before {
Position: absolut;
Anzeige: block;
Breite: 36px;
Höhe: 36px;
Rand-Radius: 50%;
Farbe: weiß;
Hintergrund-Farbe: #00add9;
font-family: '';
content: '\1F854';
z-index: 20;
top: -10px;
links: -10px;
Zeilenhöhe: 36px;
text-align: zentriert;
Schriftgröße: 24px;
transition: all 0.5s ease;
}
.checkbox:checked + label:before {
transform: translateX(44px) rotate(-270deg);
}
.card-3d-wrap {
Position: relativ;
Breite: 440px;
max-width: 100%;
Höhe: 400px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
Perspektive: 800px;
margin-top: 60px;
}
.card-3d-wrapper {
Breite: 100%
Höhe: 100%;
position:absolute;
top: 0;
links: 0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
Übergang: alle 600ms Auslaufzeit;
}
.card-front, .card-back {
Breite: 100%;
Höhe: 100%;
Hintergrund-Farbe: weiß;
Hintergrund-Position: unten-mittig;
Hintergrund-Wiederholung: no-repeat;
Hintergrund-Größe: 300%;
Position: absolut;
border-radius: 6px;
links: 0;
oben: 0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden; -moz-backface-visibility: hidden;
-o-backface-visibility: hidden; -o-backface-visibility: hidden;
Rückseiten-Sichtbarkeit: ausgeblendet;
}
.card-back {
transform: rotateY(180deg);
}
.checkbox:checked ~ .card-3d-wrap .card-3d-wrapper {
transform: rotateY(180deg);
}
.center-wrap{
Position: absolut;
Breite: 100%;
padding: 0 35px;
top: 50%;
left: 0;
transform: translate3d(0, -50%, 35px) perspective(100px);
z-index: 20;
Anzeige: block;
}
.form-group{
Position: relativ;
Anzeige: block;
Rand: 15px;
padding: 0;
}
.form-style {
padding: 13px 20px;
padding-left: 55px;
Höhe: 48px;
Breite: 100%;
Schriftart-Gewicht: 500;
Rand-Radius: 4px;
Schriftgröße: 14px;
Zeilenhöhe: 22px;
Buchstaben-Abstand: 0.5px;
outline: none;
Farbe: #c4c3ca;
Hintergrund-Farbe: #1f2029;
border: none;
-webkit-Übergang: alle 200ms linear;
Übergang: alle 200ms linear;
box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
}
.form-style:focus,
.form-style:active {
Umrandung: keine;
outline: none; }
box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
}
.input-icon {
Position: absolut;
top: 0;
links: 18px;
Höhe: 48px;
Schriftgröße: 24px;
Zeilenhöhe: 48px;
text-align: links;
Farbe: #ffeba7;
-webkit-Übergang: alle 200ms linear;
Übergang: alle 200ms linear;
}
.btn{
Rand-oben:10px;
Rand-unten:10px;
border-style:solid !important;
border-width:1px !important;
border-color:#00add9 !important;
Höhe: 44px;
Schriftgröße: 12px;
Schriftart-Gewicht: 600;
text-transform: Großbuchstaben;
-webkit-Übergang: alle 200ms linear;
Übergang: alle 200ms linear;
padding: 0 30px;
Buchstaben-Abstand: 1px;
Anzeige: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center; -ms-align-items: center;
align-items: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-Inhalt: mittig; -ms-justify-Inhalt: mittig; -ms-justify-Inhalt: mittig
justify-Inhalt: center;
-ms-flex-pack: zentriert;
text-align: center;
border: keine;
Hintergrundfarbe: #00add9;
Farbe: weiß;
box-shadow: 0 8px 24px 0 rgba(255,235,167,.2);
}
.btn:active,
.btn:focus{
Hintergrundfarbe: #102770;
Farbe: #ffeba7;
box-shadow: 0 8px 24px 0 rgba(16,39,112,.2);
}
.btn:hover{
background-color: #10277000;
Farbe: #00add9;
box-shadow: 0 8px 24px 0 rgba(16,39,112,.2);
border-style:solid;
border-width:1px;
border-color:#00add9;
}
/* ENDE DER ANMELDUNG */
input{
font-size:12px !important;
padding:25px !important;
}
.input-container {
Position: relativ;
Anzeige: inline-block;
Breite: 100%;
max-Breite: 500px;
margin-bottom: 20px;
}
#email, #name, #elefon,
textarea {
Breite: 100%;
padding: 15px !important;
border: 1px solid #f7f8f9 !important;
Rand-Radius: 20px !wichtig;
font-size: 12px !important;
outline: keine;
Position: relativ;
Größe ändern: keine;
Hintergrund: #121125 !important;
}
.platzhalter-label {
Position: absolut;
font-family: montserrat;
top: 50%;
links: 10px;
transform: translateY(-50%);
Hintergrund: weiß;
padding: 0px 10px;
Farbe: #d3d3;
Schriftgröße: 12px;
Übergang: alle 0.3s Leichtigkeit;
Zeiger-Ereignisse: keine;
}
input:focus + .platzhalter-label,
input:not(:platzhalter-einblenden) + .platzhalter-label,
textarea:focus + .platzhalter-label,
textarea:not(:platzhalter-einblenden) + .platzhalter-label {
oben: 0;
Schriftgröße: 12px;
Farbe: #00add9;
}
input::platzhalter,
textarea::platzhalter {
Farbe: transparent;
}