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. 

Baca Juga : Cara Membuat Card Responsive Dengan HTML & CSS

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 :

Baca Juga : Cara Membuat Modal Responsive Dengan HTML, CSS dan Javascript

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.

Baca Juga : Cara Membuat Bottom Navbar Dengan HTML dan CSS

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

Baca Juga : Cara Membuat Navbar Responsive Dengan HTML, CSS dan Javascript

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.

Baca Juga : 5 Website Box Shadow CSS Generator Terbaik

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 :

<!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>

Baca Juga : Cara Membuat Web Responsive Dengan HTML dan CSS

5. Membuat Form Login html

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 :

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

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;
  }
}

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;
  }
}