Kalau kamu lagi ngoding website dan pengin bikin form buat input data—entah itu form login, form kontak, atau checkout—maka kamu wajib kenalan sama yang namanya HTML Form Elements. Di artikel ini, kita bakal bahas lengkap mulai dari <form>, <input>, sampai <output>. Tenang aja, bahasanya santai, tapi isinya tetap nendang!
1. The HTML <form> Element
Yup, semua elemen form biasanya dibungkus dalam tag <form>. Ini ibarat wadahnya. Tanpa ini, input-an kamu nggak bisa “dikirim” ke server.
<form action="/submit" method="post">
<!-- isinya nanti di sini -->
</form>- action: ke mana data dikirim.
- method: biasanya “get” atau “post”.
2. The <input> Element
Ini elemen yang paling sering dipakai. Mau bikin teks input, checkbox, radio button, semuanya pakai <input>.
<input type="text" name="username" placeholder="Masukkan username">Tipe <input> itu banyak: text, password, email, number, checkbox, radio, dan lainnya.
Contoh lengkapnya:
<!DOCTYPE html>
<html>
<body>
<h2>Input Element</h2>
<form action="https://w3schools.com/action_page.php">
<label for="uname">Username:</label><br>
<input type="text" id="uname" name="username" placeholder="Masukkan username"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Hasilnya:
3. The <label> Element
Jangan lupa kasih label buat tiap input biar lebih ramah pengguna (dan SEO juga suka). Pakai for yang sesuai sama id input-nya.
<label for="email">Email:</label>
<input type="email" id="email" name="email">Klik label-nya? Input-nya langsung aktif. Keren, kan?
4. The <select> Element
Kalau kamu mau bikin dropdown menu, inilah yang kamu cari.
<select name="jurusan">
<option value="ti">Teknik Informatika</option>
<option value="si">Sistem Informasi</option>
</select>Contoh Lebih lengkapnya:
<!DOCTYPE html>
<html>
<body>
<h2>Select Element</h2>
<p>Select element digunakan untuk drop-down list:</p>
<form action="https://www.w3schools.com/action_page.php">
<label for="jurusan">Pilih jurusan:</label><br>
<select id="jurusan" name="jurusan">
<option value="ti">Teknik Informatika</option>
<option value="si">Sistem Informasi</option>
</select><br><br>
<input type="submit" value="Kirim">
</form>
</body>
</html>Hasilnya:
5. Visible Values
Yang kelihatan di dropdown <select> itu isi dari <option>, tapi value-nya (yang dikirim ke server) bisa beda.
<option value="1">Pilihan Satu</option>Jadi yang dikirim ke server: 1, bukan “Pilihan Satu”.
6. Multiple Selections
Mau user bisa pilih lebih dari satu? Tambahin multiple.
<select name="hobi[]" multiple>
<option value="musik">Musik</option>
<option value="gaming">Gaming</option>
<option value="travel">Traveling</option>
</select>Pakai [] di name supaya bisa kirim array data ke server.
Kode lebih lengkapnya:
<!DOCTYPE html>
<html>
<body>
<h2>Pilihan lebih dari satu</h2>
<p>Gunakan atribut <code>multiple</code> untuk membolehkan pengguna memilih lebih dari satu nilai.</p>
<form action="https://www.w3schools.com/action_page.php">
<label for="hobi">Pilih hobi:</label><br>
<select id="hobi" name="hobi[]" multiple>
<option value="musik">Musik</option>
<option value="gaming">Gaming</option>
<option value="travel">Traveling</option>
</select><br><br>
<input type="submit" value="Kirim">
</form>
<p>Tahan tombol Ctrl (Windows) / Command (Mac) untuk memilih beberapa opsi.</p>
</body>
</html>Hasilnya:
7. <textarea> Element
Butuh kolom input yang panjang, kayak buat komentar atau deskripsi? Pakai <textarea>!
<textarea name="komentar" rows="4" cols="50" placeholder="Tulis komentar..."></textarea>Kamu bisa atur ukurannya pakai rows dan cols.
Kode lebih lengkapnya:
<!DOCTYPE html>
<html>
<head>
<title>Form Komentar</title>
</head>
<body>
<h2>Form Komentar</h2>
<form action="https://www.w3schools.com/action_page.php" method="post">
<label for="komentar">Komentar Anda:</label><br>
<textarea id="komentar" name="komentar" rows="4" cols="50" placeholder="Tulis komentar..."></textarea><br><br>
<input type="submit" value="Kirim">
</form>
</body>
</html>Hasilnya:
8. The <button> Element
Mau submit form? Pakai <button>. Tapi bisa juga buat tombol biasa.
<button type="submit">Kirim</button>
<button type="button">Klik Aja</button>Bisa juga isi tombolnya pakai HTML lain, misalnya gambar atau ikon.
Contoh lebih lengkap:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Tombol</title>
</head>
<body>
<h2>Contoh Tombol</h2>
<form action="https://www.w3schools.com/action_page.php" method="post">
<label for="nama">Nama:</label><br>
<input type="text" id="nama" name="nama" placeholder="Masukkan nama"><br><br>
<button type="submit">Kirim</button>
<button type="button" onclick="alert('Tombol diklik!')">Klik Aja</button>
</form>
</body>
</html>Hasilnya
Penjelasan:
1. <button type=”submit”>: Mengirim form saat diklik.
2. <button type=”button”>: Tidak mengirim form, bisa digunakan untuk interaksi JavaScript (seperti menampilkan alert di contoh ini).
9. The <fieldset> and <legend> Elements
Pengen bikin grup input yang kelihatan rapi? Bungkus pakai <fieldset>, dan kasih judul pakai <legend>.
<fieldset>
<legend>Data Diri</legend>
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama">
</fieldset>Kelihatan lebih rapi dan terstruktur!
Contoh lebih lengkap:
<!DOCTYPE html>
<html>
<head>
<title>Form Data Diri</title>
</head>
<body>
<h2>Formulir Data Diri</h2>
<form action="https://www.w3schools.com/action_page.php" method="post">
<fieldset>
<legend>Data Diri</legend>
<label for="nama">Nama:</label><br>
<input type="text" id="nama" name="nama" placeholder="Masukkan nama"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" placeholder="Masukkan email"><br><br>
<input type="submit" value="Kirim">
</fieldset>
</form>
</body>
</html>Hasilnya:
10. The <datalist> Element
Pengen ada saran isi input tapi tetap bisa diketik bebas? Ini dia solusinya.
<input list="browser" name="browser">
<datalist id="browser">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
</datalist>User bisa pilih atau ngetik sendiri. Fleksibel banget.
Contoh lengkapnya:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Datalist</title>
</head>
<body>
<h2>Contoh Datalist</h2>
<form action="https://www.w3schools.com/action_page.php" method="post">
<label for="browser">Pilih browser favorit:</label><br>
<input list="browser" name="browser" id="browserInput" placeholder="Ketik atau pilih browser"><br><br>
<datalist id="browser">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
<option value="Opera">
</datalist>
<input type="submit" value="Kirim">
</form>
</body>
</html>11. The <output> Element
Kalau kamu pengin nampilin hasil hitungan atau interaksi form, pakai <output>.
<form oninput="hasil.value = angka.value * 2">
<input type="number" id="angka" name="angka">
= <output name="hasil"></output>
</form>Hasilnya update otomatis saat user input angka.
Contoh lebih lengkapnya:
<!DOCTYPE html>
<html>
<head>
<title>Form dengan Output</title>
</head>
<body>
<h2>Perkalian Otomatis (x2)</h2>
<form oninput="hasil.value = angka.value * 2">
<label for="angka">Masukkan angka:</label><br>
<input type="number" id="angka" name="angka" placeholder="Contoh: 5"><br><br>
Hasil (dikali 2): <output name="hasil" for="angka">0</output>
</form>
</body>
</html>12. HTML Form Elements:
Kumpulan HTML Form Elements
| No. | Elemen HTML | Fungsi Singkat | Contoh Penggunaan |
|---|---|---|---|
| 1 | <form> | Wadah utama untuk semua elemen form | <form action=”/submit” method=”post”> … </form> |
| 2 | <input> | Input data seperti teks, email, checkbox, dll | <input type=”text” name=”nama”> |
| 3 | <label> | Label untuk input, meningkatkan aksesibilitas | <label for=”email”>Email:</label> |
| 4 | <textarea> | Input teks panjang (multiline) | <textarea name=”pesan” rows=”4″></textarea> |
| 5 | <select> | Dropdown list untuk memilih satu opsi | <select name=”jurusan”>…</select> |
| 6 | multiple (atribut) | Memungkinkan memilih lebih dari satu opsi | <select name=”hobi[]” multiple>…</select> |
| 7 | <button> | Tombol untuk submit, reset, atau aksi lain | <button type=”submit”>Kirim</button> |
| 8 | <fieldset> | Mengelompokkan input agar lebih rapi | <fieldset>…</fieldset> |
| 9 | <legend> | Judul/deskripsi untuk fieldset | <legend>Data Diri</legend> |
| 10 | <datalist> | Menyediakan pilihan autocomplete | <datalist id=”browser”>…</datalist> |
| 11 | <output> | Menampilkan hasil hitungan atau output lain | <output name=”hasil”></output> |
Kesimpulan
Nah, itu dia kumpulan HTML Form Elements yang wajib kamu tahu. Dari <form> sampai <output>, semua punya peran penting. Kalau kamu pengin form kamu interaktif, ramah pengguna, dan SEO-friendly, pastiin kamu ngerti cara pakainya.
Tips tambahan: Gabungkan form ini dengan CSS biar tampilannya lebih kece, dan tambahin JavaScript kalau mau validasi real-time.
Mau belajar lebih dalam atau punya pertanyaan? Tinggal tulis di kolom komentar, ya!
Komentar