Cara Membuat Form Login Menarik Dengan HTML & CSS

Membuat form login menarik dengan HTML & CSS bisa kamu temukan di infokuy. Pembuatan form login ini bisa kamu ikuti dengan mudah dan designnya pun responsive. 

Sebelumnya, saya sudah membagikan cara membuat card responsive dengan HTML & CSS, kali ini saya akan membuat form login responsive menggunakan HTML & CSS.

Tentunya kamu sudah tidak asing lagi dengan form login, setiap website pasti memiliki halaman login . Namun sering kali menemukan website dengan halaman login yang biasa - biasa saja, bahkan kurang menarik.

Pada artikel kali ini, saya akan membuat halaman login yang menarik dan responsive menggunakan HTML & CSS. Design halaman login yang akan saya buat mengikuti trend saat ini.

Daripada penasaran, langsung aja kuy ikuti tutorial membuat form login dengan HTML & CSS di infokuy. Simak penjelasan lebih lengkapnya berikut ini

Apa Yang Dibutuhkan Untuk Memulai ?

Sebelum masuk ke pembuatan form loginnya, ada beberapa hal yang harus dipersiapkan untuk mengikuti tutorial membuat form login, diantaranya berikut ini :

1. Text Editor

Pertama text editor, Text Editor adalah sebuah software atau aplikasi yang digunakan untuk menuliskan kode program. Ada beberapa text editor yang bisa kamu gunakan diantaranya Visual Studio Code, Sublime Text, Notepad++, Atom dan masih banyak lagi. Dari masing - masing text editor, memiliki keunggulan dan kekurangannya.

Bagi kamu yang menggunakan laptop atau komputer dengan spesifikasi yang mumpuni, saya rekomendasikan untuk menggunakan text editor Visual Studio Code. 

Karena dalam aplikasi tersebut sudah disediakan beragam extensions untuk membantu kamu dalam menuliskan kode program.

Sedikit Tips untuk pengguna text editor Visual Studio Code agar menulis kode program semakin nyaman. Ada beberapa extensions yang harus diinstal, diantaranya :

• LiveServer
• Elm Emmet
• Auto Rename Tag
• Prettier

Untuk pengguna Sublime Text, ada beberapa package yang harus kamu install agar lebih nyaman ketika menuliskan kode program, diantaranya :

• Emmet
• Side Bar
• Color Picker

Namun dalam aplikasi Sublime Text tidak menyediakan package seperti LiveServer. Tapi ada cara agar bisa menjalankan LiveServer seperti Visual Studio Code, akan saya buatkan artikelnya nanti.

2. Browser

Browser sendiri berfungsi untuk menampikan hasil form login yang sudah kamu buat. Ada beberapa browser yang bisa kamu gunakan diantaranya Google Chrome, Mozilla Firefox, Microsoft Edge dan masih banyak lagi. Saya menyarankan untuk menggunakan Google Chrome dan Mozilla Firefox, karena memiliki fitur yang cukup berguna.

Persiapan Untuk Membuat Form Login Menarik & Responsive

Setelah menyiapkan text editor dan browsernya, kamu semakin dekat dengan pembuatan form login responsive dan menarik versi infokuy. Langsung aja kuy, mulai membuat form login responsivenya.

1. Membuat Folder Khusus Project Form Login

Silahkan buat folder khusus untuk project form login yang akan kita buat. Folder project form login bisa kamu tempatkan dimana pun yang terpenting mudah untuk dicari nantinya.

2. Buat File HTML & CSS

Di dalam folder form login, buat 2 file utama yang akan kita gunakan dalam pembuatan form login responsive nantinya. Berikut file project yang harus kamu buat dalam folder form login :

• HTML : index.html
• CSS : style.css

3. Siapkan Asset / Bahan Pendukung Yang Ingin Digunakan

Jika sudah membuat file projectnya, cari asset pendukung untuk memperindah halaman loginnya. Saya menggunakan ilustrasi dari undraw.co untuk memperindah halaman loginnya. Silahkan download assetnya disini.

Beragam ilustrasi yang bisa kamu temukan di undraw.co, semua ilustrasi tersebut bisa kamu gunakan secara gratis, baik untuk development maupun production.

Cara Membuat Form Login Responsive dan Menarik Dengan HTML & CSS

Sudah siap ?? Silahkan buka text editor yang kamu sukai, saya sendiri menggunakan text editor Sublime Text. Karena text editor yang 1 ini sangat ringan dan nyaman untuk digunakan.

1. Deklarasikan Dokumen HTML

Sebelumnya, saya memberikan tips seputar extensions atau package yang bisa kamu install. Beberapa extensions yang kamu install terdapat 1 extensions yang sangat membantu penulisan kode program kamu yakni Emmet.

Dengan bantuan Emmet, kamu cukup menuliskan ! kemudian tekan tombol Tab, nanti akan tergenerate deklarasi HTML dan tag di dalamnya secara otomatis.

2. Koneksikan File CSS

Setelah mendeklarasikan HTML nya, koneksikan file style.css di bagian tag <head>...</head>. Lebih lengkapnya bisa kamu lihat pada gambar berikut ini.

3. Membuat Kerangka Form Login

Setelah mengkoneksikan file html dengan file css, kamu harus membuat kerangkat HTML nya terlebih dahulu. Dalam tag <body>...</body>, ada beberapa tag html yang harus kamu tuliskan, diantaranya berikut ini :

• <div class='container'></div>
• <div class="container-left"></div>
• <div class="container-right"></div>
• <img src="" alt="">
• <h1></h1>
• <p></p>
• <form action=""></form>
• <div class="input"></div>
• <label for=""></label>
• <input type="text">
• <input type="password">
• <button></button>

Berikut kerangka HTML pembuatan form login responsive versi infokuy :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
		<div class="container-left">
		
		</div>
		<div class="container-right">
			
			
		</div>
	</div>
</body>
</html>

4. Menambahkan Gambar

Setelah membuat kerangka form loginnya, pada bagian class container-left, tambahkan beberapa tag html seperti berikut ini :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
		<div class="container-left">
		  <img src="form-login.svg" alt="form-login">
		  <h1>Infokuy - Tutorial Membuat Form Login</h1>
		  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid, neque!</p>
		</div>
		<div class="container-right">
			
			</form>
		</div>
	</div>
</body>
</html>

5. Membuat Form

Setelah berhasil menambahkan tag img, h1 dan p. Selanjutnya kita akan membuat form loginnya pada class container-right. Untuk selengkapnya bisa kamu lihat berikut ini :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
		<div class="container-left">
		  <img src="form-login.svg" alt="form-login">
		  <h1>Infokuy - Tutorial Membuat Form Login</h1>
		  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid, neque!</p>
		</div>
		<div class="container-right">
		  <h2>Silahkan Login</h2>
		  <form>
		  	<div class="input">
		  		<label for="">Username</label>
		  		<input type="text">
		  	</div>		  	
		  	<div class="input">
		  		<label for="">Password</label>
		  		<input type="text">
		  	</div>
		  	<button>Masuk</button>
		  </form>	
		
		</div>
	</div>
</body>
</html>

Membuat Responive Form Login Dengan HTML & CSS

Setelah berhasil membuat kerangka form loginnya, selanjutnya kita akan membuat styling untuk halaman loginnya agar terlihat lebih menarik. Seperti biasa, saya akan menggunakan Grid CSS agar halaman form loginnya bisa responsive untuk mobile, tablet dan desktop.

1. Menambahkan Styling Dasar

Pertama - tama, saya akan menambahkan styling dasarnya terlebih dahulu, buka file style.css dan tambahbkan kode seperti dibawah ini :

body { 
 padding: 0;
 margin: 0;
 overflow-x: hidden;
}

h1 {
	font-size: 1.2em;
}

h2 {
	font-size: 1.1em;
}

p {
	font-size: 1em;
}

2. Mengatur Posisi Card Agar Rata Tengah

Selanjutnya, atur posisi card agar rata tengah. Ada beragam cara agar posisi card bisa rata tengah diantaranya :

• Bisa menggunakan margin : auto
• Bisa menggunakan position absolute + transform 
• Bisa menggunakan display : flex

Yang akan saya gunakan agar posisi card bisa rata tengah menggunakan display flex. Penggunaannya pun cukup mudah, kamu bisa menambah kode ini dibagian selector body. 

 

body { 
 padding: 0;
 margin: 0;
 overflow-x: hidden;
 display: flex;
 justify-content: center;
 align-items: center;
}

3. Membuat Responsive Form Login

Setelah posisi card sudah rata tengah, tampilan form loginnya masih kurang nyaman untuk dipandang. Agar bisa responsive ke berbagai device, perlu menggunakan Grid CSS agar bisa responsive. Penggunannya pun sangat mudah kok, kamu bisa menambahkan css berikut ini :

body { 
 padding: 0;
 margin: auto;
 overflow-x: hidden;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 background: #FBFBFB;
}

h1 {
	font-size: 1.2em;
	padding: 0;
	margin: 0;
}

h2 {
	font-size: 1.1em;
	padding: 0;
	margin: 0;
}

p {
	font-size: 1em;
	padding: 0;
	margin: 0;
}

.container {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(8,1fr);
	gap: 10px;
	margin: 10px;
	box-shadow: 2px 10px 20px rgba(0,0,0,.1);
	border-radius: 20px;
	background-color: white;
	overflow: hidden;
}

.container-left {
	grid-column: 1/9;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin-bottom: 10px;
	padding:10px;
	background-color: #C6CCF8;
}

.container-left img {
	width: 100%;
}


.container-left h1 {
	text-align: center;
	font-size: 1.5em;
	padding: 10px 0;
}

.container-left p {
	text-align: center;
}



.container-right {
	grid-column: 1/9;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
		
}

.container-right .input {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

@media screen and (min-width: 450px) {
	.container {
		width: 400px;
	}
}

@media screen and (min-width: 760px) {

	.container {
		width: 100%;
	}

	body {
		height: 100vh;
	}
	.container-left {
		grid-column: 1/6;
		margin-bottom: 0;
		padding: 20px;

	}
	.container-left img {
		width: 85%;
	}

	.container-left .text {
		padding: 10px 0 0;
		width: 480px;
	}

	.container-left h1 {
		font-size: 1.7em;
	}

	.container-left p {
		font-size: .9em;
	}

	.container-right {
		grid-column: 6/9;
	}
}


@media screen and (min-width: 960px) {
	.container {
		width: 900px;
		height: 550px;
	}

	.container-left {
		padding: 0;
	}
}

4. Styling Form Login

Terakhir, beri styling pada form login agar lebih menarik ketika digunakan. Berikut kode css lengkapnya, bisa kamu ikuti seperti dibawah ini :

body { 
 padding: 0;
 margin: auto;
 overflow-x: hidden;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 background: #FBFBFB;
 font-family: 'Poppins', sans-serif;
}

h1 {
	font-size: 1.2em;
	padding: 0;
	margin: 0;
}

h2 {
	font-size: 1.1em;
	padding: 0;
	margin: 0;
}

p {
	font-size: 1em;
	padding: 0;
	margin: 0;
}

.container {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(8,1fr);
	gap: 10px;
	margin: 10px;
	box-shadow: 2px 10px 20px rgba(0,0,0,.1);
	border-radius: 20px;
	background-color: white;
	overflow: hidden;
}

.container-left {
	grid-column: 1/9;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin-bottom: 10px;
	padding:10px;
	background-color: #C6CCF8;
}

.container-left img {
	width: 100%;
}


.container-left h1 {
	text-align: center;
	font-size: 1.5em;
	padding: 10px 0;
}

.container-left p {
	text-align: center;
}



.container-right {
	grid-column: 1/9;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 10px;
		
}

.container-right h2 {
	display: none;
}

.container-right form {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.container-right .input {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin: 10px 0;
	width: 90%;

}
.input label {
	font-size: 1em;
	font-weight: 550;
}

.input input {
	width: 90%;
	padding: 10px;
	margin-top: 10px;
	outline: none;
	border: 2px solid rgba(0,0,0,0.5);
	border-radius: 5px;
	transition: .5s;
}

.input input:focus {
	border: 2px solid #3B5FF9;
	transition: .5s;
}

.container-right button {
	width: 90%;
	height: 40px;
	border: none;
	margin-top: 20px;
	background-color: #5876F8;
	color: white;
	cursor: pointer;
	border-radius: 10px;
	font-weight: bold;
	font-family: 'Poppins', sans-serif;
	transition: .5s;
}

.container-right button:hover {
	transition: .5s;
	background-color: #3B5FF9;
}

@media screen and (min-width: 450px) {
	.container {
		width: 400px;
	}
}

@media screen and (min-width: 760px) {

	.container {
		width: 100%;
	}

	body {
		height: 100vh;
	}
	.container-left {
		grid-column: 1/6;
		margin-bottom: 0;
		padding: 20px;

	}
	.container-left img {
		width: 85%;
	}

	.container-left .text {
		padding: 10px 0 0;
		width: 350px;
	}

	.container-left h1 {
		font-size: 1.5em;
	}

	.container-right h2 {
	display: block;
}


	.container-left p {
		font-size: .9em;
	}

	.container-right {
		grid-column: 6/9;
	}
}


@media screen and (min-width: 960px) {
	.container {
		width: 900px;
		height: 550px;
	}

	.container-left {
		padding: 0;
	}

	.container-left .text {
		padding: 10px 0 0;
		width: 480px;
	}
}

5. Tampilan Form Login via Mobile

Tampilan form login via mobile, bisa kamu lihat dibawah ini : 

6. Tampilan Form Login via Tablet

Tampilan form login via mobile, bisa kamu lihat dibawah ini : 

7. Tampilan Form Login Via Dekstop

Tampilan form login via desktop, bisa kamu lihat dibawah ini : 

Upload Project Form Login Secara Online

Jika ingin melihat project form login ini secara online, ada situsyang menyediakan layanan deploy website secara static. Penggunaannya pun cukup mudah, silahkan daftar terlebih dahulu di situs netlify 

Jika sudah mendaftar di situs netlify, periksa email yang kamu daftarkan untuk memverifikasi emailnya terlebih dahulu. Lanjut login ke dalam situs netlifynya.

Terdapat beberapa menu, pilih menu Sites. Scroll ke bawah sampai menemukan kotak dengan tulisan Want to deploy a new site without connecting to Git?. 

Kemudian Drag and Drop folder project form login tadi. Berikut hasil project form login yang telah saya upload bisa kamu lihat disini.

Penutup

Berikut pembahasan mengenai cara membuat form login menarik dengan HTML & CSS. Bagaimana menurut kamu mengenai pembuatan form login menarik dan responsive, apakah sangat membantu kamu ? 

Terimakasih telah berkunjung ke infokuy, nantikan artikel menarik lainnya seputar CSS hanya di infokuy.

Share this Article