Cara Menggunakan CSS dan JavaScript di Form
Formulir (form) adalah salah satu elemen penting dalam pembuatan website. Form biasanya digunakan untuk menginput data, misalnya login, registrasi, atau mengisi survey. Agar form terlihat menarik dan lebih interaktif, kita bisa menambahkan CSS untuk mengatur tampilan dan JavaScript untuk memberikan logika atau validasi.
1. Menambahkan CSS pada Form
CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan form agar lebih rapi, indah, dan mudah digunakan.
Contoh HTML Form Dasar
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<button type="submit">Login</button>
</form>
Menambahkan CSS
<style>
form {
width: 300px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
background: #f9f9f9;
}
input, button {
width: 100%;
padding: 8px;
margin-top: 5px;
border-radius: 5px;
border: 1px solid #aaa;
}
button {
background-color: #28a745;
color: white;
font-weight: bold;
border: none;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
</style>
📌 Hasil: Form terlihat lebih rapi, ada padding, border halus, dan tombol hijau dengan efek hover.
Demo Form dengan CSS
2. Menambahkan JavaScript pada Form
JavaScript digunakan untuk menambahkan interaktivitas, seperti validasi input, menampilkan pesan kesalahan, atau aksi ketika tombol ditekan.
Contoh Validasi dengan JavaScript
<script>
function validateForm(event) {
event.preventDefault(); // mencegah submit default
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
if (username === "" || password === "") {
alert("Username dan Password harus diisi!");
return false;
} else if (password.length < 6) {
alert("Password minimal 6 karakter!");
return false;
} else {
alert("Login berhasil!");
return true;
}
}
</script>
Gabungkan dengan Form
<form onsubmit="validateForm(event)">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<button type="submit">Login</button>
</form>
📌 Hasil: Jika pengguna tidak mengisi username/password, atau password kurang dari 6 karakter, maka akan muncul alert.
Demo Form dengan JavaScript
3. Kesimpulan
- CSS digunakan untuk memperindah tampilan form (warna, ukuran, posisi, efek).
- JavaScript digunakan untuk mengatur logika (validasi input, menampilkan pesan, aksi interaktif).
- Gabungan keduanya membuat form lebih user-friendly dan profesional.
Komentar
Posting Komentar