Formulir (form) adalah elemen penting dalam pembuatan website yang memungkinkan pengguna menginput data dan mengirimkannya ke server.
Dalam HTML, formulir dibuat menggunakan tag <form> yang dapat berisi berbagai elemen input seperti teks, tombol, dan kotak centang. Berikut ini adalah langkah-langkah untuk membuat form dasar pada HTML.
Cara Membuat Form pada HTML
1. Struktur Dasar Form HTML
Untuk membuat form, gunakan tag <form> sebagai elemen pembungkusnya. Berikut contoh dasar struktur form HTML:
<form action="/submit-form" method="POST">
<!-- Elemen form akan ditambahkan di sini -->
</form>- action: Menunjukkan tujuan pengiriman data form. Ganti
/submit-formdengan URL tempat data akan diproses. - method: Menentukan metode pengiriman data, seperti
GET(data muncul di URL) atauPOST(data tidak terlihat di URL).
2. Membuat Input Teks
Input teks digunakan untuk mengumpulkan teks, seperti nama atau email. Elemen ini dibuat menggunakan tag <input> dengan tipe text.
<form action="/submit-form" method="POST">
<label for="name">Nama:</label>
<input type="text" id="name" name="name">
</form>- label: Memberi label pada input, dihubungkan dengan atribut
for. - input: Mengumpulkan teks. Pastikan menggunakan atribut
iddannameyang unik.
3. Membuat Input Email
Untuk input email, gunakan atribut type="email", yang akan memvalidasi format email.
<label for="email">Email:</label>
<input type="email" id="email" name="email">4. Membuat Input Kata Sandi (Password)
Gunakan type="password" untuk membuat input kata sandi.
<label for="password">Kata Sandi:</label>
<input type="password" id="password" name="password">5. Menambahkan Tombol Submit
Tombol submit digunakan untuk mengirimkan data ke server.
<button type="submit">Kirim</button>6. Contoh Form Lengkap
Berikut adalah contoh lengkap form dengan berbagai elemen.
<form action="/submit-form" method="POST">
<label for="name">Nama:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Kata Sandi:</label>
<input type="password" id="password" name="password"><br><br>
<button type="submit">Kirim</button>
</form>7. Menggunakan Checkbox dan Radio Button
Selain input teks, HTML mendukung elemen lain seperti checkbox dan radio button untuk pilihan pengguna.
Checkbox
<label><input type="checkbox" name="agree"> Saya Setuju</label>Radio Button
<label><input type="radio" name="gender" value="male"> Laki-laki</label>
<label><input type="radio" name="gender" value="female"> Perempuan</label>8. Menambahkan Select (Dropdown)
Untuk pilihan dropdown, gunakan tag <select>.
<label for="country">Negara:</label>
<select id="country" name="country">
<option value="ID">Indonesia</option>
<option value="MY">Malaysia</option>
<option value="SG">Singapura</option>
</select>Tips dan Trik
- Gunakan atribut
placeholderuntuk memberikan contoh teks di dalam input. - Gunakan atribut
requireduntuk memastikan input tidak kosong. - Pastikan menggunakan
namepada setiap input agar data dapat dikirimkan ke server dengan benar.
Berikut adalah kode HTML lengkap beserta CSS untuk memperindah tampilan form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Pendaftaran dengan CSS</title>
<style>
/* Mengatur gaya untuk tampilan form */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
label {
display: block;
margin-bottom: 5px;
color: #555;
font-weight: bold;
}
input[type="text"],
input[type="email"],
input[type="password"],
select {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
}
input[type="checkbox"],
input[type="radio"] {
margin-right: 5px;
margin-top: 10px;
}
p {
margin-bottom: 5px;
color: #555;
font-weight: bold;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<form action="/submit-form" method="POST">
<!-- Input Nama -->
<label for="name">Nama:</label>
<input type="text" id="name" name="name" placeholder="Masukkan nama lengkap" required>
<!-- Input Email -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Masukkan email" required>
<!-- Input Password -->
<label for="password">Kata Sandi:</label>
<input type="password" id="password" name="password" placeholder="Masukkan kata sandi" required>
<!-- Checkbox -->
<label><input type="checkbox" name="agree" required> Saya Setuju dengan Syarat dan Ketentuan</label>
<!-- Radio Button -->
<p>Jenis Kelamin:</p>
<label><input type="radio" name="gender" value="male" required> Laki-laki</label>
<label><input type="radio" name="gender" value="female" required> Perempuan</label>
<!-- Dropdown Select -->
<label for="country">Negara:</label>
<select id="country" name="country" required>
<option value="">Pilih Negara</option>
<option value="ID">Indonesia</option>
<option value="MY">Malaysia</option>
<option value="SG">Singapura</option>
</select>
<!-- Tombol Submit -->
<button type="submit">Kirim</button>
</form>
</body>
</html>
Tips dan Trik
- Gunakan atribut
placeholderuntuk memberikan contoh teks di dalam input. - Gunakan atribut
requireduntuk memastikan input tidak kosong. - Pastikan menggunakan
namepada setiap input agar data dapat dikirimkan ke server dengan benar.