Cara menggunakan formulir html dan css

Question

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.

Table of Contents Show

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 :

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.

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

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.

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 2022

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.

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>

Baca Juga : Cara Membuat Web Responsive Dengan HTML dan CSS

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>

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

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

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

Baca Juga : Cara Hosting Ke Netlify, Gak Pake Lama

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

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

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.

Baca Juga : 10 Hosting Web Statis Terbaik dan Gratis 2022

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 ?

Cara Membuat Form Login yang Menarik dengan HTML.

Deklarasikan Dokumen HTML Anda. Sekarang, buka file html form login Anda. ... .

2. Buat Kepala Halaman Form Login. ... .

3. Beri Judul Halaman Form Login. ... .

3. Sisipkan File CSS. ... .

4. Buat Badan Form Login. ... .

Buat Layout Form Login. ... .

6. Beri Judul Form Login. ... .

7. Buat Kotak Form Login..

Form login adalah halaman yang di dalamnya terdapat sebuah inputan untuk memasukan username dan password sebagai akses untuk masuk ke dalam aplikasi.

Apa itu tag form HTML?

HTML element tag <form> merupakan tag pada HTML yang digunakan untuk menciptakan formulir bagi isian input dari pengguna.

Form HTML apa saja?

Form merupakan bagian pada HTML yang dapat digunakan untuk membuat elemen Form pada halaman Web. Elemen Form dapat terdiri dari check box, radio button, menu, text box, text area, dan button.

kode html