Membuat Tampilan Form Login Sederhana

Jenis website saat ini sangat beragam. Mulai dari website skala kecil hingga besar. Misalnya website skala kecil adalah website yang hanya berisikan informasi tentang sesuatu yang dibahas oleh website tersebut. Lalu website skala besar salah satu contohnya seperti toko online, karena memiliki banyak fitur didalamnya. Tidak sekedar menampilkan informasi, melainkan juga ada interaksi dari website dengan pengunjungnya seperti misalnya membeli barang, proses pembayaran, dan juga pembuatan akun untuk website tersebut.

Berbicara mengenai pembuatan akun untuk website, tentu tidak akan lepas dari yang namanya form login. Sesuai dengan pembahasan kali ini kita akan belajar bagaimana cara membuat tampilan form login sederhana. Dengan mempelajari membuat tampilan form login, nantinya kalian akan bisa berkreasi untuk menata letak dan warna untuk website kalian agar tidak bosan. Bagaimana cara membuatnya ? kalian bisa ikuti langkah berikut ini. Pertama kalian buat file htmlnya terlebih dahulu seperti contoh code dibawah ini.

login.html

<html>
<head>
	<meta charset="UTF-8">
	<title>Form Login</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="wrapper">
		<center><h2>Login Form</h2></center>

		<form action="#">
		  <div class="imgcontainer">
		    <img src="namagambar.png" alt="Avatar" class="avatar" width="100">
		  </div>

		  <div class="container">
		    <label><b>Username</b></label>
		    <input type="text" placeholder="Enter Username" name="uname" required>

		    <label><b>Password</b></label>
		    <input type="password" placeholder="Enter Password" name="psw" required>
		        
		    <button type="submit">Login</button>
		    <input type="checkbox" checked="checked"> Remember me
		  </div>

		  <div class="container" style="background-color:#ccc">
		    <button type="button" class="cancelbtn">Cancel</button>
		    <span class="psw">Forgot <a href="#">password?</a></span>
		  </div>
		</form>
	</div>
</body>
</html>

Setelah sudah kalian simpan file tersebut dengan format html. Sekarang lanjut untuk file CSSnya agar website kalian memiliki warna dan posisi yang bagus. Codenya seperti berikut ini.

style.css

body{
    background:#F1F1F1;
}
.wrapper{
    width: 500px;
    margin:auto;
}
form {
    border: 3px solid #f1f1f1;
    background: white
}

input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

button {
    background-color: maroon;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

button:hover {
    opacity: 0.8;
}

.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
}

img.avatar {    
    border-radius: 50%;
}

.container {
    padding: 16px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}

Setelah sudah kalian simpan filenya dengan format CSS. Kedua file tersebut harus dalam satu folder ya. Untuk melihat hasilnya kalian bisa buka file tersebut lewat browser. Dan hasilnya akan seperti ini.

Mudah bukan ?

Sekian pembahasan mengenai membuat tampilan form login sederhana. Semoga bermanfaat.