Mendesain Form Login Dengan CSS 3 – Clean dan Responsive

Pada tutorial kali ini, kita akan membahas bagaimana cara mendesain form login dengan CSS 3.

Di internet terdapat banyak desain form login yang sudah jadi yang siap untuk digunakan, namun dengan mengerti bagaimana membuat dan mendesain form tersebut, kita akan lebih mudah menyesuaikannya dengan website kita

Hasil akhir form login yang akan kita buat seperti tampak pada gambar berikut:

Komponen dan dukungan browser

Form login diatas dapat berjalan baik pada browser modern seperti Chrome, Firefox, Safari , dan Opera, khusus untuk Internet Explorer, dapat berjalan baik pada IE versi 8+.

Untuk icon, kita akan  menggunakan icon font dari font-awesome, yang dapat di download disini.

I. Elemen HTML Untuk Membuat Form Login

Untuk dapat  mendesain form login dengan CSS, sebelumnya  kita harus menyiapkan kode HTML nya, adapun kode HTML yang akan kita  gunakan adalah sebagai berikut:

<div class="login-form-container" id="login-form">
	<div class="login-form-content">
		<div class="login-form-header">
			<div class="logo">
				<img src="img/logo.png"/>
			</div>
			<h3>Login ke akun Anda</h3>
		</div>
		<form method="post" action="" class="login-form">
			<div class="input-container">
				<i class="fa fa-envelope"></i>
				<input type="email" class="input" name="email" placeholder="Email"/>
			</div>
			<div class="input-container">
				<i class="fa fa-lock"></i>
				<input type="password"  id="login-password" class="input" name="password" placeholder="Password"/>
				<i id="show-password" class="fa fa-eye"></i>
			</div>
			<div class="rememberme-container">
				<input type="checkbox" name="rememberme" id="rememberme"/>
				<label for="rememberme" class="rememberme"><span>Biarkan tetap masuk</span></label>
				<a class="forgot-password" href="#">Lupa Password?</a>
			</div>
			<input type="submit" name="login" value="Login" class="button"/>
			<a href="#" class="register">Register</a>
		</form>
		<div class="separator">
				<span class="separator-text">atau</span>
		</div>
		<div class="socmed-login">
			<a href="#facebook" class="socmed-btn facebook-btn">
				<i class="fa fa-facebook"></i>
				<span>Login dengan Facebook</span>
			<a>
			<a href="#g-plus" class="socmed-btn google-btn">
				<i class="fa fa-google"></i>
				<span>Login dengan Google</span>
			<a>
			<a href="#g-plus" class="socmed-btn yahoo-btn">
				<i class="fa fa-yahoo"></i>
				<span>Login dengan Yahoo</span>
			<a>
		</div>
	</div>
</div>

Pada kode diatas, terdapat 3  Elemen utama yaitu:

• Background yang berisi background gambar yang akan menutup penuh satu halaman.
• Backdrop yang  berwarna gelap transparan yang akan kita gunakan untuk menutupi background.
• Container yang berisi form login

Form login sendiri terdiri dari tiga bagian, yaitu:

• Header yang berisi logo dan judul login.
• Form login yang berisi inputan email, password, tombol login dan tombol register
• Social login yang berisi tombol social media.

Pembagian ini untuk mempermudah ketika ingin mengubah bagian tertentu, misal meniadakan tombol social media login. Gambaran pembagian ini tampak pada gambar berikut:

1. Header

Pada bagian form header, kita isi dengan logo dari perusahaan/web kita disertai dengan judul dari form (kali ini kita menggunakan H3), pada contoh ini “Login ke akun Anda”

Sobat dapat membuatnya lebih simpel dengan menghilangkan logo dan mempersingkat judul menjadi “Login”

2. Form Login

Pada form login kita buat isian berupa email dan password, disamping itu juga  ada tombol submit dan daftar.

Email dan Password

Isian email terdiri dari dua element yaitu <i></i> yang berisi icon email dan <input/> yang berisi isian email.

Sedangkan untuk password terdiri dari tiga element yaitu <i></i> yang pertama berisi icon gembok, <input/> untuk isian password dan <i></i> yang berisi icon mata, yang ketika di klik akan membuat password yang sebelumnya asterik berubah menjadi karakter

Elemen input pada email dan password kita beri atribut placeholder, sehingga ketika isian kosong akan memunculkan kata Email dan Password.

Tombol Submit dan  Register

Untuk tombol submit kita gunakan element input dan untuk tombol register, kita gunakan element anchor <a>

II. Mendesain Form Login Dengan CSS

1. Background dan  Backdrop

Background dan backdrop memiliki karakteristik yang sama yaitu menutupi semua area screen, adapun kode css yang kita gunakan:

.background, 
.backdrop {
	background-color: #3f689c;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

position: fixed akan membuat posisi elemen menjadi “fixed” sesuai posisi top, left, right, dan bottom yang didefinisikan.

Untuk backdrop kita buat menutupi background dengan membuat warna backdrop transparan sebesar 90%, adapun kode CSS yang kita gunakan:

.backdrop {
	filter: alpha(opacity=90);
	opacity: .9;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}

Terdapat 2 jenis background yaitu dotted dan blurred. Untuk dotted kita tambahkan gambar dot pada backdrop sedangkan untuk blurred kita tambahkan CSS filter blur pada background:

.background {
	filter: blur(15px);
	-webkit-filter: blur(10px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=5); */
}

Blur ini hanya dapat diterapkan pada browser non IE

2. Container

Form login kita letakkan di tengah-tengah screen, adapun kode css nya adalah:

.login-form-container {
    max-width: 400px;
    width: 100%;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: -286px;
}

Agar dapat membuatnya berada ditengah, kita buat posisi container  menjadi absolute.

Selanjutnya kita harus menentukan lebar dan tinggi, dari container, pada contoh diatas, kita membuat lebar maksimal 400px (max-width: 400px; width: 100%).

Dengan max-width 100% akan membuat container memiliki lebar 100% pada viewport < 400px, sedangkan jika viewport > 400px, lebar container tetap 40px.

Untuk menempatkan container di tengah-tengah secara horizontal kita buat left: 50% dengan margin-left setengah dari lebar container (margin-left: 200px)

Untuk membuat container di tengah tengah secara vertical, kita set top: 50% dengan margin-top setengah dari tinggi container margin-top: -286px

ilustrasi:

3. Header

Pada header kita buat logo dan judul menjadi rata tengah dengan memberikan properti align dengan nilai center (align: center)

.login-form-header {
    text-align: center;
}

Sebagai tambahan, pada logo (elemen img) kita tambahkan border lingkaran berwarna abu-abu, untuk membuat border menjadi lingkaran, kita set properti border-radius dengan nilai minimal setengah dari lebar elemen

Pada contoh diatas kita set sebesar 43px (border-radius: 43px)

4. Form login

CSS untuk form login:

.login-form .input-container {
	border-bottom: 1px solid #CCCCCC;
    margin-top: 15px;
    font-size: 20px;
    color: #9e9e9e;
	padding-bottom: 5px;
}
.login-form .input {
	border: 0;
	width: 200px;
}
.login-form .input:focus {
    outline: none;
}
#show-password {
	float: right;
    vertical-align: bottom;
    text-align: center;
    margin-top: 7px;
	cursor: pointer;
}
.login-form .forgot-password {
	float: right;
}
.login-form .rememberme-container {
	margin-top: 15px;
	padding: 0;
}
.login-form .rememberme-container input {
	margin-left: 0;
}
.login-form .rememberme span {
	vertical-align: top;
}
.login-form .button {
	margin-top: 15px;
    width: 100%;
    background: #2e7ec7;
    border: 0;
    color: #FFFFFF;
    padding: 10px;
    font-size: 15px;
	cursor: pointer;
	transition: background .3s;
}
.login-form .button:hover {
	background: #1f6eb7;
}
.login-form .button:focus {
	outline: none;
}
.login-form .register {
	margin-top: 5px;
    background: #CCCCCC;
    border: 0;
    color: #676464;
    padding: 8px;
    font-size: 15px;
    display: block;
    text-align: center;
}
.login-form .register:hover	{
	background: #b7b7b7;
}

Masing masing isian email dan password kita beri garis bawah. Garis tersebut berasal dari container (<div class="input-container">) bukan dari elemen input

Selain itu kita tambahkan icon pada masing masing elemen input (email dan password)

5. Separator

Sebelum elemen social login, terdapat separator berupa garis tengah dengan kata-kata “atau” yang berada di tengah.

Untuk membuatnya, kita menggunakan dua elemen yaitu div dan span

<div class="separator">
	<span class="separator-text">atau</span>
</div>

adapun kode css yang kita gunakan:

.separator {
    margin: 20px 0;
    border-top: 1px solid #CCCCCC;
    position: relative;
}

Kita buat div memiliki border diatas border-top: 1px solid #CCCCCC dan position: relative. posisi relative berguna untuk referensi elemen span yang nantinya akan kita berikan posisi absolut.

Elemen span kita buat posisinya menjadi absolut dan kita geser keatas sebesar -11px sehingga berada di tengah-tengah border dari div.

.separator-text {
    display: block;
    position: absolute;
    top: -11px;
    left: 50%;
    margin-left: -22px;
    padding: 0px 10px;
    background: #FFFFFF;
    color: #8a8a8a;
}

6. Social Login

Pada contoh diatas kita membuat 3 tombol social yaitu facebook, google, dan yahoo.

Ketiga tombol tersebut kita buat menggunakan element anchor (<a>). Style yang kita gunakan sama persis dengan style pada tombol register, hanya beda di warna elemen dan warna elemen ketika terjadi even hover.

.socmed-login .socmed-btn {
    padding: 10px 25px;
    color: #FFFFFF;
    display: block;
    margin-top: 5px;
    text-align: center;
}

Untuk membuat lebar 100% kita hanya perlu men set display dari elemen anchor dengan nilai block ( display:block ),  tidak perlu men set properti width.

III. Desain Responsive

Agar form dapat tetap nyaman dilihat dan digunakan pada viewport kecil (smartphone) maka kita perlu menambahkan CSS khusus screen ukuran tertentu.

Menyesuaikan tinggi form

Karena  form cukup tinggi (574px), yang bisa jadi melebihi viewport dari smartphone, maka kita perlu untuk menyesuaikan margin atas dari form pada batas screen tertentu:

@media screen and (max-height: 600px) {
	.login-form-container {
		margin-top: 0;
		top: 10px;
	}
}

jika viewport dibawah 600px, maka kita buat form 10px dibawah batas atas.

Menyesuaikan  lebar form

Agar form tetap rapi, maka kita perlu menyesuaikan lebar form dan beberapa ukuran element lain ketika dibuka pada viewport kecil.

@media screen and (max-width: 400px) {
	.login-form-container {
		left: 5px;
		margin-left: 5px;
		min-width: 283px;
		right: 10px;
		margin-bottom: 10px;
		width: auto;
	}
	.login-form .input {
		width: 140px;
	}
	.socmed-login .socmed-btn i {
		margin-right: 5px;
		width: 19px;
	}
}

Pada style diatas, karena lebar form 400px, kita batasi maksimal viewport sebesar 400px, jika kurang dari itu, maka lebar form juga akan mengecil, disamping itu kita juga batasi lebar element input untuk email dan password.

IV. Show  Password

Ketika icon mata, yang ada di input password di klik, maka password akan berubah menjadi huruf, untuk melakukannya, kita menggunakan jquery, dengan script sebagai berikut:

$('#show-password').click(function() {
	if ($(this).hasClass('fa-eye')) {
		$('#login-password').attr('type', 'text');
		$(this).removeClass('fa-eye');
		$(this).addClass('fa-eye-slash');
	} else {
		$('#login-password').attr('type', 'password');
		$(this).removeClass('fa-eye-slash');
		$(this).addClass('fa-eye');
	}
})

Pada script diatas, jika kita klik icon mata, maka atribut type pada input password akan berubah menjadi teks dan icon berubah menjadi eye-slash, jika kita klik lagi maka atribut type menjadi password dan icon menjadi “eye”

Demikian pembahasan mengenai cara mendesain form login dengan HTML 5 dan CSS 3