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
- Emmet
- Side Bar
- Color Picker
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
- <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>
<!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
<!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
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
- Bisa menggunakan margin : auto
- Bisa menggunakan position absolute + transform
- Bisa menggunakan display : flex
body {
padding: 0;
margin: 0;
overflow-x: hidden;
display: flex;
justify-content: center;
align-items: center;
}
3. Membuat Responsive Form Login
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
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
6. Tampilan Form Login via Tablet
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.
Belum ada Komentar untuk "Cara Membuat Form Login Menarik Dengan HTML & CSS"
Posting Komentar