Postingan AneIqbal kali ini membahas bagaimana cara membuat form login dengan HTML dan CSS. Form login yang dibuat ini cukup sederhana. Seperti apa cara pembuatannya? Simak pembahasan berikut sampai selesai.
Cara membuat form login dengan HTML
Form login HTML
Form login merupakan ‘pintu gerbang’ untuk mengakses suatu halaman web. Bila punya ‘kuncinya’ maka kita dapat masuk ke halaman tersebut.
Form login banyak dijumpai pada web sosial media. Karena web sosial media memiliki user dan tiap user memiliki ‘halaman’ masing-masing. Namun tentu tidak terbatas pada web sosial media saja. Beragam website yang menyediakan fitur tertentu yang dipakai oleh orang banyak pasti memiliki form login.
Kita bisa membuat form login versi kita sendiri dengan versi yang sederhana. Hanya sekadar form loginnya saja. Tidak ada fitur apapun di dalamnya. Tetapi, ini bisa dijadikan sebagai langkah awal untuk membuat form login yang lebih kompleks.
Kita akan membuat form login sederhana dan nantinya akan diberi style agar lebih menarik. Formnya hanya berupa dua kolom input dan satu tombol.
Satu kolom input untuk username dan satunya lagi untuk password. Kemudian satu tombol lagi yang berfungsi sebagai tombol Login.
Lalu, apa saja yang akan dibuat? Buat 2 buah file, file form.html dan style.css.
form.html merupakan file yang berisi tag form. Sedangkan style.css berisi script CSS untuk memberi style form.html. Berikut kedua script tersebut.
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>
Bila tanpa style, form login terlihat seperti ini.
Agar tampilannya lebih menarik, beri style form.html dengan menyisipkan file style.css. Letakkan file form.html dan file style.css dalam satu folder agar lebih mudah ‘memanggilnya’.
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;
}
Hasil akhirnya akan terlihat seperti ini jika sudah ditambahkan file style.css.
Cukup mudah bukan membuat form login dengan HTML? Tampilan form login HTML akan menjadi lebih bagus jika ditambahkan CSS dan memang itulah fungsi utama CSS.
Semoga panduan membuat form login sederhana di atas bisa membantu Anda. Sekian dan terima kasih sudah membaca sampai akhir.
