Wprowadzenie
Formularz logowania i rejestracji, co więcej, stanowi nieodłączny element wielu stron internetowych, ponieważ zapewnia użytkownikom możliwość bezpiecznego dostępu do treści, a także ułatwia personalizację usług. Dzięki niemu użytkownicy mogą uzyskać dostęp do konta lub zarejestrować się w serwisie, a więc korzystać z jego funkcjonalności w pełni, co z kolei wpływa na ich satysfakcję. Stworzenie estetycznego i funkcjonalnego formularza wymaga odpowiedniego projektu oraz kodu.
W artykule omówimy przykładowy formularz logowania i rejestracji, który został zaprojektowany w HTML i CSS, a także pokażemy, jak można go dostosować, aby był bardziej intuicyjny, co z pewnością poprawi doświadczenie użytkownika. Przedstawimy również, jak działa interaktywny przełącznik pomiędzy logowaniem a rejestracją.
Struktura HTML
Głównym elementem formularza jest przełącznik, który umożliwia zmianę trybu między logowaniem a rejestracją, a więc zwiększa wygodę. Formularz logowania zawiera pola na adres e-mail i hasło. Formularz rejestracji dodaje pole na imię oraz hasło użytkownika.
Kod HTML został podzielony na dwie sekcje. Jedna sekcja odpowiada za logowanie, druga za rejestrację. Responsywny kontener otacza wszystko, dzięki czemu formularz działa poprawnie na urządzeniach mobilnych.
Stylizacja CSS
Stylizacja tego formularza logowania i rejestracji opiera się na nowoczesnym designie. Główne cechy to zaokrąglone krawędzie, przejrzysta typografia i interaktywne animacje. Kolory zostały dobrane tak, aby zapewnić estetyczny wygląd i łatwość użytkowania.
Każdy element formularza jest odpowiednio wyrównany i zoptymalizowany. CSS zawiera również efekty hover oraz przejścia, co podnosi jakość doświadczenia użytkownika. Dzięki stylom placeholder użytkownik łatwiej identyfikuje pola do wypełnienia.
Podsumowanie
Projektowanie formularza logowania i rejestracji to kluczowy etap budowy nowoczesnych stron internetowych, ponieważ dobrze zaprojektowany formularz nie tylko spełnia swoją funkcję, ale również, co ważniejsze, poprawia doświadczenie użytkownika i zwiększa jego zaufanie do serwisu. Przykładowy kod zaprezentowany powyżej oferuje elegancki wygląd i pełną funkcjonalność. Dzięki zastosowanym technikom HTML i CSS formularz jest atrakcyjny i użyteczny.
Tworząc własny formularz logowania i rejestracji, możesz wykorzystać przedstawione przykłady. Pamiętaj o odpowiedniej optymalizacji pod kątem UX i responsywności. Dopracowany formularz poprawia doświadczenie użytkownika, zwiększając skuteczność serwisu.
KOD HTML
<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>ZALOGUJ SIĘ </span><span>ZAREJESTRUJ SIĘ</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">ZALOGUJ SIĘ</h4>
<div class="form-group">
<input type="email" name="logemail" class="form-style" placeholder="Twój email" id="login-email" autocomplete="off">
<label for="login-email" class="placeholder-label">Twój email</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="Twoje hasło" id="login-pass" autocomplete="off">
<label for="login-pass" class="placeholder-label">Twoje hasło</label>
<i class="input-icon uil uil-lock-alt"></i>
</div>
<a href="#" class="btn btn-login mt-4">ZALOGUJ SIĘ</a>
<p class="mb-0 mt-4 text-center">
<a href="<?php echo wp_lostpassword_url(); ?>" class="link">Nie pamiętasz swojego hasła?</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">ZAREJESTRUJ SIĘ</h4>
<div class="form-group">
<input type="text" name="regname" class="form-style" placeholder="Twoje imię" id="register-name" autocomplete="off">
<label for="register-name" class="placeholder-label">Twoje imię</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="Twój email" id="register-email" autocomplete="off">
<label for="register-email" class="placeholder-label">Twój email</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="Twoje hasło" id="register-pass" autocomplete="off">
<label for="register-pass" class="placeholder-label">Twoje hasło</label>
<i class="input-icon uil uil-lock-alt"></i>
</div>
<a href="#" class="btn btn-register mt-4">ZAREJESTRUJ SIĘ</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
KOD CSS
/* STRONA LOGOWANIA */
.mb-0{
color:white !important;
padding-bottom:10px;
text-align:center;
}
.pb-3{
padding-bottom:10px;
text-align:center;
}
a {
cursor: pointer;
transition: all 200ms linear;
}
a:hover {
text-decoration: none;
}
.link {
color: #262626;
font-weight:600;
}
.link:hover {
color: #00add9;
}
p {
font-weight: 500;
font-size: 14px;
line-height: 1.7;
}
h4 {
font-weight: 600;
}
h6 span{
padding: 0 20px;
text-transform: uppercase;
font-weight: 700;
}
.section{
position: relative;
width: 100%;
display: block;
}
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
position: absolute;
left: -9999px;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label{
position: relative;
display: block;
text-align: center;
width: 60px;
height: 16px;
border-radius: 8px;
padding: 0;
margin: 10px auto;
cursor: pointer;
background-color: white;
}
.checkbox:checked + label:before,
.checkbox:not(:checked) + label:before {
position: absolute;
display: block;
width: 36px;
height: 36px;
border-radius: 50%;
color: white;
background-color: #00add9;
font-family: '';
content: '\1F854';
z-index: 20;
top: -10px;
left: -10px;
line-height: 36px;
text-align: center;
font-size: 24px;
transition: all 0.5s ease;
}
.checkbox:checked + label:before {
transform: translateX(44px) rotate(-270deg);
}
.card-3d-wrap {
position: relative;
width: 440px;
max-width: 100%;
height: 400px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
perspective: 800px;
margin-top: 60px;
}
.card-3d-wrapper {
width: 100%;
height: 100%;
position:absolute;
top: 0;
left: 0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: all 600ms ease-out;
}
.card-front, .card-back {
width: 100%;
height: 100%;
background-color: white;
background-position: bottom center;
background-repeat: no-repeat;
background-size: 300%;
position: absolute;
border-radius: 6px;
left: 0;
top: 0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card-back {
transform: rotateY(180deg);
}
.checkbox:checked ~ .card-3d-wrap .card-3d-wrapper {
transform: rotateY(180deg);
}
.center-wrap{
position: absolute;
width: 100%;
padding: 0 35px;
top: 50%;
left: 0;
transform: translate3d(0, -50%, 35px) perspective(100px);
z-index: 20;
display: block;
}
.form-group{
position: relative;
display: block;
margin: 15px;
padding: 0;
}
.form-style {
padding: 13px 20px;
padding-left: 55px;
height: 48px;
width: 100%;
font-weight: 500;
border-radius: 4px;
font-size: 14px;
line-height: 22px;
letter-spacing: 0.5px;
outline: none;
color: #c4c3ca;
background-color: #1f2029;
border: none;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
}
.form-style:focus,
.form-style:active {
border: none;
outline: none;
box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
}
.input-icon {
position: absolute;
top: 0;
left: 18px;
height: 48px;
font-size: 24px;
line-height: 48px;
text-align: left;
color: #ffeba7;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.btn{
margin-top:10px;
margin-bottom:10px;
border-style:solid !important;
border-width:1px !important;
border-color:#00add9 !important;
height: 44px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
-webkit-transition : all 200ms linear;
transition: all 200ms linear;
padding: 0 30px;
letter-spacing: 1px;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
text-align: center;
border: none;
background-color: #00add9;
color: white;
box-shadow: 0 8px 24px 0 rgba(255,235,167,.2);
}
.btn:active,
.btn:focus{
background-color: #102770;
color: #ffeba7;
box-shadow: 0 8px 24px 0 rgba(16,39,112,.2);
}
.btn:hover{
background-color: #10277000;
color: #00add9;
box-shadow: 0 8px 24px 0 rgba(16,39,112,.2);
border-style:solid;
border-width:1px;
border-color:#00add9;
}
/* KONIEC LOGOWANIA */
input{
font-size:12px !important;
padding:25px !important;
}
.input-container {
position: relative;
display: inline-block;
width: 100%;
max-width: 500px;
margin-bottom: 20px;
}
#email, #name, #phone,
textarea {
width: 100%;
padding: 15px !important;
border: 1px solid #f7f8f9 !important;
border-radius: 20px !important;
font-size: 12px !important;
outline: none;
position: relative;
resize: none;
background: #121125 !important;
}
.placeholder-label {
position: absolute;
font-family: montserrat;
top: 50%;
left: 10px;
transform: translateY(-50%);
background: white;
padding: 0px 10px;
color: #d3d3d3;
font-size: 12px;
transition: all 0.3s ease;
pointer-events: none;
}
input:focus + .placeholder-label,
input:not(:placeholder-shown) + .placeholder-label,
textarea:focus + .placeholder-label,
textarea:not(:placeholder-shown) + .placeholder-label {
top: 0;
font-size: 12px;
color: #00add9;
}
input::placeholder,
textarea::placeholder {
color: transparent;
}