10. HTML Forms and Input — Membuat Formulir Interaktif
Form digunakan untuk menerima data dari pengguna. Contohnya adalah form login, pendaftaran, pencarian, kontak, komentar, checkout, dan berbagai jenis input lainnya.
Pada materi ini kita akan mempelajari:
<form> <input> <textarea> <button> <select> <optgroup> <option> <label> <fieldset> <legend> <datalist> <output>1. Overview
HTML Forms digunakan untuk membuat antarmuka yang memungkinkan pengguna memasukkan data.
Contoh sederhana:
<form>
<label for="nama">
Nama
</label>
<input
type="text"
id="nama"
name="nama">
<button type="submit">
Kirim
</button>
</form>
Daftar Elemen Forms and Input
| No. | Elemen | Fungsi |
|---|---|---|
| 1 | <form> | Container untuk formulir |
| 2 | <input> | Menerima berbagai jenis input |
| 3 | <textarea> | Input teks yang terdiri dari beberapa baris |
| 4 | <button> | Membuat tombol |
| 5 | <select> | Membuat pilihan dropdown |
| 6 | <optgroup> | Mengelompokkan pilihan |
| 7 | <option> | Membuat pilihan dalam select |
| 8 | <label> | Label/keterangan untuk form control |
| 9 | <fieldset> | Mengelompokkan kontrol form |
| 10 | <legend> | Judul untuk fieldset |
| 11 | <datalist> | Menyediakan pilihan saran untuk input |
| 12 | <output> | Menampilkan hasil perhitungan atau output |
2. <form> — Container Formulir
Elemen <form> digunakan sebagai container untuk berbagai kontrol formulir.
Sintaks dasar
<form>
Form controls
</form>
Atribut action
Atribut action menentukan URL tempat data form dikirim.
<form action="/proses">
...
</form>
Atribut method
Atribut method menentukan metode pengiriman data.
<form
action="/proses"
method="post">
...
</form>
Metode yang paling umum adalah GET dan POST.
GET biasanya digunakan untuk mengambil atau mencari data, sedangkan POST biasanya digunakan ketika mengirim data ke server.
Pemilihan metode harus disesuaikan dengan kebutuhan aplikasi dan cara server memproses data.
3. <input> — Input Pengguna
<input> merupakan salah satu elemen terpenting dalam HTML Form.
Jenis input ditentukan menggunakan atribut type.
Text
<input
type="text"
name="nama"
placeholder="Masukkan nama">
<input
type="email"
name="email"
placeholder="nama@email.com">
Password
<input
type="password"
name="password">
Number
<input
type="number"
name="umur"
min="1"
max="100">
Date
<input
type="date"
name="tanggal">
Checkbox
<input
type="checkbox"
name="setuju"
value="yes">
Saya setuju dengan ketentuan.
Radio
<input
type="radio"
name="gender"
value="pria">
Pria
<input
type="radio"
name="gender"
value="wanita">
Wanita
File
<input
type="file"
name="foto">
Submit
<input
type="submit"
value="Kirim">
Jenis input yang umum
- text — teks biasa
- email — alamat email
- password — password
- number — angka
- date — tanggal
- time — waktu
- checkbox — pilihan ya/tidak atau banyak pilihan
- radio — satu pilihan dari beberapa pilihan
- file — upload file
- url — alamat URL
- tel — nomor telepon
- search — input pencarian
- range — slider nilai
- color — pemilih warna
4. <textarea> — Input Banyak Baris
<textarea> digunakan untuk memasukkan teks yang terdiri dari beberapa baris.
Contohnya komentar atau pesan.
<textarea
name="pesan"
rows="5"
cols="40">
</textarea>
Contoh modern
<label for="pesan">
Pesan
</label>
<textarea
id="pesan"
name="pesan"
placeholder="Tulis pesan Anda..."
rows="5">
</textarea>
5. <button> — Membuat Tombol
Elemen <button> digunakan untuk membuat tombol yang dapat berinteraksi dengan pengguna.
<button type="submit">
Kirim
</button>
Beberapa nilai type yang umum:
- submit — mengirim form
- button — tombol biasa
- reset — mengembalikan form ke kondisi awal
Di dalam <form>, sebaiknya tentukan atribut type pada <button> agar perilakunya jelas.
6. <select> — Dropdown
<select> digunakan untuk membuat pilihan berbentuk dropdown.
<select name="bahasa">
<option value="html">
HTML
</option>
<option value="css">
CSS
</option>
<option value="javascript">
JavaScript
</option>
</select>
Selected
Atribut selected dapat digunakan untuk menentukan pilihan awal.
<option
value="html"
selected>
HTML
</option>
7. <optgroup> — Mengelompokkan Pilihan
<optgroup> digunakan untuk mengelompokkan beberapa <option> dalam dropdown.
<select name="teknologi">
<optgroup label="Frontend">
<option value="html">
HTML
</option>
<option value="css">
CSS
</option>
<option value="js">
JavaScript
</option>
</optgroup>
<optgroup label="Backend">
<option value="python">
Python
</option>
<option value="php">
PHP
</option>
</optgroup>
</select>
8. <option> — Pilihan
<option> digunakan sebagai pilihan di dalam <select> atau konteks elemen form tertentu yang mendukung option.
<select>
<option value="html">
HTML
</option>
<option value="css">
CSS
</option>
</select>
Atribut value adalah nilai yang akan dikirim ketika form disubmit.
9. <label> — Label Form
<label> memberikan keterangan untuk sebuah form control.
Cara yang baik adalah menghubungkan for pada label dengan id input.
<label for="nama">
Nama Lengkap
</label>
<input
type="text"
id="nama"
name="nama">
Label membuat form lebih mudah dipahami dan membantu aksesibilitas.
Ketika label terhubung dengan input melalui for dan id, pengguna juga dapat mengklik label untuk berinteraksi dengan kontrol tersebut.
10. <fieldset> — Mengelompokkan Form
<fieldset> digunakan untuk mengelompokkan kontrol form yang saling berhubungan.
<fieldset>
<input type="text">
<input type="email">
<input type="tel">
</fieldset>
11. <legend> — Judul Fieldset
<legend> memberikan judul atau keterangan untuk sebuah <fieldset>.
<fieldset>
<legend>
Informasi Pribadi
</legend>
<label for="nama">
Nama
</label>
<input
type="text"
id="nama"
name="nama">
</fieldset>
12. <datalist> — Daftar Saran Input
<datalist> menyediakan pilihan saran yang dapat digunakan oleh sebuah input.
Berbeda dengan <select>, pengguna tetap dapat mengetik nilai sendiri.
<label for="browser">
Browser
</label>
<input
list="browser-list"
id="browser"
name="browser">
<datalist id="browser-list">
<option value="Chrome">
<option value="Firefox">
<option value="Edge">
<option value="Safari">
</datalist>
<select> menyediakan pilihan yang telah ditentukan.
<datalist> memberikan saran, tetapi pengguna masih dapat memasukkan nilai lain.
13. <output> — Menampilkan Hasil
<output> digunakan untuk menampilkan hasil perhitungan atau hasil suatu operasi.
Contoh sederhana
<form
oninput="hasil.value =
Number(a.value) +
Number(b.value)">
<input
type="number"
id="a"
value="10">
+
<input
type="number"
id="b"
value="20">
=
<output
name="hasil"
for="a b">
30
</output>
</form>
Contoh yang dapat dicoba
14. Contoh Form Lengkap
Berikut contoh form yang menggabungkan berbagai elemen yang telah dipelajari.
Validasi Form HTML
HTML memiliki beberapa atribut yang dapat membantu melakukan validasi dasar sebelum data dikirim.
required
<input
type="text"
name="nama"
required>
minlength dan maxlength
<input
type="text"
name="username"
minlength="4"
maxlength="20">
min dan max
<input
type="number"
name="umur"
min="18"
max="60">
pattern
<input
type="text"
name="kode"
pattern="[A-Z]{3}[0-9]{3}"
placeholder="ABC123">
Validasi HTML membantu memberikan pemeriksaan awal pada sisi browser, tetapi aplikasi yang menerima data tetap harus melakukan validasi di sisi server sesuai kebutuhan keamanan aplikasi.
GET dan POST pada Form
GET
<form
action="/search"
method="get">
<input
type="search"
name="q">
<button type="submit">
Cari
</button>
</form>
POST
<form
action="/register"
method="post">
<input
type="text"
name="username">
<input
type="password"
name="password">
<button type="submit">
Daftar
</button>
</form>
Pemilihan GET atau POST bukan sekadar masalah menyembunyikan data. GET memiliki karakteristik berbeda dari POST dalam hal tujuan penggunaan, URL, caching, bookmark, dan pemrosesan data.
Atribut Penting pada <input>
| Atribut | Fungsi | Contoh |
|---|---|---|
| type | Menentukan jenis input | type="email" |
| name | Nama field yang digunakan saat pengiriman data | name="email" |
| id | Identitas unik elemen | id="email" |
| value | Nilai input | value="HTML" |
| placeholder | Petunjuk sementara | placeholder="Email" |
| required | Field wajib diisi | required |
| disabled | Menonaktifkan input | disabled |
| readonly | Input tidak dapat diedit | readonly |
| min | Nilai minimum | min="1" |
| max | Nilai maksimum | max="100" |
| pattern | Pola validasi | pattern="[A-Z]+" |
Accessibility pada Form
Form sebaiknya dibuat agar mudah digunakan oleh semua pengguna, termasuk pengguna teknologi bantu.
Hubungkan label dengan input
<label for="email">
Email
</label>
<input
type="email"
id="email"
name="email">
Jangan hanya mengandalkan placeholder
<label for="nama">
Nama Lengkap
</label>
<input
type="text"
id="nama"
name="nama"
placeholder="Contoh: Ardaman">
Placeholder sebaiknya menjadi petunjuk tambahan, bukan pengganti label.
Struktur Dasar HTML Forms
<form> │ ├── <fieldset> │ │ │ ├── <legend> │ │ │ ├── <label> │ ├── <input> │ │ │ ├── <label> │ └── <textarea> │ ├── <select> │ ├── <optgroup> │ │ ├── <option> │ │ └── <option> │ │ │ └── <option> │ ├── <datalist> │ ├── <output> │ └── <button> </form>
Contoh Form Kontak Sederhana
<form
action="/contact"
method="post">
<label for="nama">
Nama
</label>
<input
type="text"
id="nama"
name="nama"
required>
<label for="email">
Email
</label>
<input
type="email"
id="email"
name="email"
required>
<label for="pesan">
Pesan
</label>
<textarea
id="pesan"
name="pesan"
rows="6"
required>
</textarea>
<button type="submit">
Kirim Pesan
</button>
</form>
Best Practice HTML Forms
1. Gunakan <label>
Setiap input yang membutuhkan keterangan sebaiknya memiliki label yang jelas.
2. Gunakan type yang sesuai
Gunakan email untuk email, number untuk angka, date untuk tanggal, dan sebagainya.
3. Gunakan name pada field yang dikirim
Atribut name penting karena menjadi nama field ketika data form dikirim.
4. Gunakan required jika field wajib
Dengan begitu browser dapat memberikan validasi dasar sebelum form dikirim.
5. Kelompokkan form dengan fieldset
Gunakan <fieldset> dan <legend> ketika beberapa kontrol mempunyai hubungan yang jelas.
6. Jangan hanya mengandalkan placeholder
Placeholder adalah petunjuk tambahan. Gunakan label untuk memberikan nama field.
Summary
| Elemen | Fungsi |
|---|---|
| <form> | Container formulir |
| <input> | Menerima berbagai jenis input |
| <textarea> | Input teks multi-baris |
| <button> | Membuat tombol |
| <select> | Membuat dropdown |
| <optgroup> | Mengelompokkan option |
| <option> | Membuat pilihan |
| <label> | Memberikan label pada kontrol form |
| <fieldset> | Mengelompokkan kontrol form |
| <legend> | Judul fieldset |
| <datalist> | Menyediakan saran input |
| <output> | Menampilkan hasil perhitungan/output |
HTML Forms digunakan untuk menerima input dari pengguna. Elemen <form> menjadi wadah utama, sedangkan <input>, <textarea>, <select>, dan <button> digunakan untuk membangun kontrol formulir.
Gunakan <label> agar setiap input mempunyai keterangan yang jelas. Gunakan <fieldset> dan <legend> untuk mengelompokkan kontrol yang saling berkaitan.
<datalist> dapat digunakan untuk memberikan saran input, sedangkan <output> dapat digunakan untuk menampilkan hasil perhitungan atau output.
Dengan memahami elemen-elemen tersebut, kita dapat membuat form yang lebih terstruktur, mudah digunakan, responsif, dan lebih mudah diakses oleh pengguna.