Berikut ini adalah contoh membuat form login HTML yang user-friendly, lengkap dengan penggunaan CSS untuk tampilan yang menarik
<!DOCTYPE html>
<html>
<head>
<title>Form Login</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.form-group input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
.form-group button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
.form-group button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h2>Form Login</h2>
<form>
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Masukkan username" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Masukkan password" required>
</div>
<div class="form-group">
<button type="submit">Login</button>
</div>
</form>
</div>
</body>
</html>Output :
See the Pen Contoh Form Login HTML by De Orchids (@De-Orchids) on CodePen.
Anda dapat menggunakan contoh kode di atas untuk membuat form login yang user-friendly dengan tampilan yang menarik. Pastikan untuk mengganti atribut action pada elemen <form> dengan URL yang sesuai untuk memproses data login.
Dengan menggunakan CSS, Anda dapat mengatur tampilan form login sesuai keinginan Anda. Misalnya, Anda dapat mengubah warna latar belakang, mengatur lebar form, atau menambahkan efek bayangan pada form.
Semoga contoh kode di atas dapat membantu Anda dalam membuat form login yang user-friendly dengan menggunakan HTML dan CSS. Selamat mencoba!
Leave a Reply