Cara Membuat Form Login Dengan HTML dan CSS

Cara membuat form login dengan HTML itu tidaklah sulit sebenarnya tetapi memang butuh ketelitian. Sebab jika tidak teliti, misalnya salah satu huruf saja, maka form login HTML tersebut menjadi berantakan. Maka dari itu, kita akan bahas bagaimana cara membuat form login dengan HTML dan CSS untuk menghindari masalah tersebut.

Namun sebelum membahas lebih lanjut bagaimana cara membuat form login HTML ini, ada baiknya kita perlu tahu sebenarnya apa itu form login. Mengapa harus ada dan penting sekali untuk dibuat? Sebenarnya apa fungsi form login HTML ini?


Form login

Form login merupakan salah satu halaman pada website yang berfungsi untuk menjembatani antara sebuah sistem website dengan usernya. Jika website tersebut memiliki fitur register atau daftar akun, maka dapat dipastikan bahwa website tersebut juga memiliki halaman form login.

Setelah Anda mendaftarkan akun pada suatu website, maka Anda sudah memiliki sebuah akun sebagai kunci untuk masuk ke dalam website tersebut. Jika dianalogikan, website itu rumah dan halaman login adalah pintunya. Jika Anda memiliki akun (kunci rumah) maka Anda bisa membuka pintu tersebut dan masuk ke dalam websitenya (rumah).


Form login ini sudah pasti sering Anda lihat ketika masuk ke sosial media Anda bukan? Kurang lebih seperti itu pengertian form login ini. Dan pada umumnya, form login website dibuat dengan HTML dan dipercantik dengan CSS.


Persiapan membuat form login HTML

Sebelum masuk ke coding form login, ada beberapa aplikasi yang perlu kita persiapkan. Pertama, pastikan sudah terinstall aplikasi Notepad (lebih direkomendasikan Notepad++) di laptop atau PC Anda. Kedua, pastikan juga aplikasi web browser sudah ada. Misalnya, Google Chrome ataupun Mozilla Firefox.

Jika kedua aplikasi tersebut sudah dipersiapkan dan sudah bisa dijalankan tanpa ada masalah, selanjutnya langsung kita coba untuk coding form login HTML berikut CSSnya. Inilah panduan cara membuat form login dengan HTML di Notepad.


Cara membuat form login dengan HTML dan CSS

Untuk membuat form login sederhana dengan HTML dan CSS, ada dua file yang perlu kita buat dengan aplikasi Notepad. Pertama adalah file html (form.html) dan file kedua yaitu file css (style.css). 

Kita buat dulu dari file html yang berfungsi membentuk struktur dari halaman login. Buka aplikasi Notepad (atau Notepad++ supaya lebih nyaman) kemudian ketik script form login HTML berikut.

1. Buat script form.html

<!DOCTYPE html>
<head>
   <title>Login</title>
   <link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
   <form>
      <input type="text" name="id" placeholder="ID" />
      <input type="password" name="password" placeholder="Password" />
      <input type="submit" name="submit" value="Login" />
   </form>
</body>
</html>

Jika ingin melihat hasil dari coding form.html di atas, silakan buka file tersebut dengan web browser favorit Anda. Maka hasilnya akan terlihat seperti gambar berikut.


Hasilnya sangat polos karena HTML memang bertugas untuk membuat struktur halaman form login. Untuk mempercantiknya, maka dibutuhkan CSS yang kemudian file CSS ini dipanggil melalui file HTML (perhatikan bagian link rel="stylesheet" pada kode di atas, inilah pemanggilan filenya). 

Buat file baru di Notepad kemudian ketik script form login CSS berikut ini. Ohiya, letakkan file form.html dan style.css dalam satu folder supaya tidak salah pemanggilannya.

2. Buat script style.css

*{
 margin: 0;
 padding: 0;
}

body {
 text-align: center;
 padding-top: 250px;
 background: #00aaff;
}

input[type=text], input[type=password]{
 padding: 10px;
 border: 1px solid #999;
 outline: none;
 color: #888;
 margin-right: 5px;
 box-shadow: inset 0px 0px 5px #999;
 text-align: center;
}

input[type=text]:focus, input[type=password]:focus{
 border: 1px solid #00aaff;
 box-shadow: inset 0px 0px 5px #00aaff;
}

input[type=submit]{
 padding: 5px 10px;
 margin-top: 10px;
 font-weight: 700;
 background: #2b0000;
 border: 1px solid #2b0000;
 color: #fff;
 box-shadow: 0px 0px 2px #2b0000;
}

input[type=submit]:hover {
 background: #0088ff;
 border: 1px solid #0088ff;
 box-shadow: 0px 0px 2px #0088ff;
}

Ingat ya save file tersebut dengan nama style.css dan letakkan dalam satu folder yang sama dengan form.html yang sudah dibuat tadi. Maka, jika tidak ada masalah, lakukan refresh pada form.html yang dibuka melalui web browser tadi dan berikut hasilnya.


Form login dengan HTML dan CSS sudah selesai dibuat. Selamat! Anda berhasil membuat form login HTML dan CSS. Silakan bereksplorasi dengan kedua script di atas untuk melihat bagaimana bisa menjadi seperti di atas tampilan form loginnya.

Demikian panduan cara membuat form login dengan HTML dan CSS. Semoga bisa bermanfaat dan sekaligus membantu Anda dalam membuat form login HTML. Semoga penjelasannya juga mudah dipahami sehingga Anda bisa membuat form login dengan HTML tanpa ada masalah.