Secara umum, HTML dan CSS bekerja bersama-sama untuk membuat halaman web yang interaktif dan menarik bagi pengguna. HTML memberi struktur dan konten pada halaman web, sedangkan CSS memberikan tampilan dan tata letak pada elemen HTML. Dalam tutorial ini, kita akan belajar membuat tampilan register dan login dengan menggunakan HTML dan Css.
Langkah 1: Membuat HTML
Pertama-tama, buat file HTML kosong dan beri nama file “index.html”. Kemudian tambahkan kode berikut untuk membuat form login dan register.
<!DOCTYPE html>
<html>
<head>
<title>Register & Login with HTML Dan CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="form-container">
<div class="form-login">
<h2>Login</h2>
<form>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</div>
<div class="form-register">
<h2>Register</h2>
<form>
<input type="text" placeholder="Full Name">
<input type="text" placeholder="Username">
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<input type="password" placeholder="Confirm Password">
<button type="submit">Register</button>
</form>
</div>
</div>
</body>
</html>
Kode HTML di atas berisi form login dan register yang terletak di dalam sebuah div dengan class “form-container”. Form login dan register memiliki div masing-masing dengan class “form-login” dan “form-register”. Form-login berisi input username, password, dan button login. Sedangkan form-register berisi input full name, username, email, password, confirm password, dan button register.
Langkah 2: Menambahkan CSS
Setelah membuat HTML, kita perlu menambahkan style untuk membuat tampilan form login dan register lebih menarik. Buat file CSS baru dengan nama file “style.css” dan tambahkan kode berikut.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
.form-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.form-login, .form-register {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 400px;
text-align: center;
}
.form-register {
margin-left: 20px;
}
.form-login h2, .form-register h2 {
margin-bottom: 10px;
}
.form-login form, .form-register form {
display: flex;
flex-direction: column;
}
.form-login input, .form-register input {
border: none;
background-color: #f5f5f5;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
}
.form-login button, .form-register button {
background-color: #333;
color: #fff;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
.form-login button:hover,.form-register button:hover{
background-color: #0274be;
}
untuk hasilnya Bisa dilihat Gambar dibawah:
