Form
form merupakan bagian dari dokumen web yang dapat diisikan oleh
pengguna, untuk memeberikan informasi tertentu dari pengguna kepada website.
Sebuah form sangat penting dalam sebuah aplikasi web, terutama aplikasi web
dinamis, karena form merupakan satu-satunya sarana bagi pengembang website
untuk mendapatkan informasi dari pengguna.
Inisialisasi
Form
Form pada HTML dibuat dengan menggunakan elemen form.
Elemen form harus
membungkus seluruh elemen-elemen masukan form lain untuk memastikan masukan
informasi pengguna dapat dibaca oleh aplikasi web. Pembungkusan elemen-elemen
masukan dilakukan sama seperti kita membungkus elemen-elemen lain pada div:
<form action="#" method="post">
....
</form>
Seperti
yang dapat dilihat pada kode di atas, terdapat dua atribut yang wajib dimiliki
oleh elemen form. Atribut
pertama ialah action, yang
berfungsi untuk memberitahukan browser alamat pengiriman dari data-data yang
diisikan pengguna di dalam form. Atribut kedua yang wajib
diisikan ialah atribut method. Atribut
ini memberitahukan browser bagaimana data akan dikirimkan kepada
server yang alamatnya diisikan pada action.
Elemen
Masukan Teks: TextField dan TextArea
Pengisian
informasi dalam bentuk teks pada form HTML dapat dilakukan dengan menggunakan
dua buah elemen: textarea dan input. Penggunaan elemen textarea dapat dilakukan dengan sangat
sederhana, hanya langsung memasukkan tag-nya saja:
<textarea>
</textarea>
selain
memberikan tag kosong seperti di atas, kita juga dapat mengisikan tag untuk
mendapatkan nilai masukan standar:
<textarea>
Contoh isi textarea
</textarea>
Contoh
Penggunaan Elemen TextArea
Pengaturan
panjang dan lebar dari textarea dapat
dilakukan melalui CSS, dengan menggunakan properti height dan width.
Walaupun
dapat mengisikan teks dengan banyak sekaligus, textarea tentunya tidak dapat
digunakan untuk seluruh kasus pengisian data. Seringkali kita menginginkan
pengguna hanya mengisikan data singkat, tanpa isi teks yang banyak. Untuk jenis
masukan seperti itu, kita dapat menggunakan elemen input:
<input type="text">
yang akan
menghasilkan elemen masukan seperti berikut:
Contoh
Penggunaan Elemen Input
Perhatikan
juga bahwa kita menggunakan atribut type pada elemen ini untuk
menentukan data-data yang akan diisikan.
Terdapat banyak jenis tipe data yang dapat kita isikan, dan browser akan
menyesuaikan jenis masukan teks yang ada, sesuai dengan atribut type yang kita tentukan. Nilai-nilai yang dapat diisikan
pada atribut type yaitu:
1.
color
2.
datetime-local
3.
number
4.
tel
5.
week
6.
date
7.
email
8.
range
9.
time
10.
datetime
11.
month
12.
search
13.
url
14.
password
15.
text
16.
file
Elemen Pemilihan: Radio
Button, Checkbox, dan Dropdown
Selain
mengisikan data berupa teks, seringkali kita juga menemukan data berupa
pilihan, misalnya jenis kelamin atau hobi. Pengisian data seperti ini biasanya
memberikan beberapa pilihan kepada pengguna, dan pengguna dapat memilih satu
atau beberapa pilihan yang diberikan.
Jika kita
ingin memberikan pilihan kepada pengguna, dan memastikan pengguna hanya memilih
satu pilihan saja, kita dapat menggunakan radio button. Radio button dibuat dalam
HTML dengan menggunakan elemen input, dengan
atribut type bernilai
:code`radio`:
<input type="radio" name="sex" value="pria"> Pria <br>
<input type="radio" name="sex" value="wanita"> Wanita
dalam
pembuatan elemen radio button, kita juga wajib menambahkan dua atribut lainnya,
yaitu name dan value. Atribut name digunakan untuk
memberitahukan browser bahwa radio button dengan atribut name yang sama adalah merupakan
kumpulan radio button yang sama, sehingga pengguna tidak boleh memilih dua buah
pilihan pada radio button tersebut.
Atribut value digunakan untuk menyimpan
nilai yang ingin kita kirimkan ke server.
Jika ingin
memberikan pengguna kemampuan untuk memilih banyak pilihan sekaligus, kita
dapat menggunakan elemen checkbox. Elemen ini sama
seperti radio button, dibuat dengan elemen input yang nilai atribut type-nya berisikan checkbox.
<input type="checkbox" name="day" value="senin"> Senin <br>
<input type="checkbox" name="day" value="selasa"> Selasa <br>
<input type="checkbox" name="day" value="rabu"> Rabu
Seperti
yang dapat dilihat, atribut name dan value juga wajib dimiliki oleh
checkbox, dengan alasan yang sama untuk radio button.
Pembuatan elemen
dropdown dilakukan dengan menggabungkan dua elemen, yaitu select dan option.
Elemen select membungkus
seluruh elemen option yang
ada, untuk membentuk sebuah dropdown. Elemen option sendiri merupakan nilai dari dropdown
yang diinginkan. Perhatikan kode di bawah:
<select name="country">
<option value="indonesia">Indonesia</option>
<option value="malaysia">Malaysia</option>
<option value="filipina">Filipina</option>
<option value="vietnam">Vietnam</option>
</select>
yang akan
menghasilkan:
dan jika ingin
memungkinkan pengguna memilih beberapa pilihan kita dapat menambahkan atribut multiple pada
elemen select:
<select name="country" multiple>
<option value="indonesia">Indonesia</option>
<option value="malaysia">Malaysia</option>
<option value="filipina">Filipina</option>
<option value="vietnam">Vietnam</option>
</select>
Elemen
Tersembunyi
Elemen tersembunyi memberikan kebebasan pada pengembang untuk
mengirimkan data ke server tanpa menampilkan data tersebut kepada pengguna. Elemen tersembunyi biasanya
berisi kode khusus untuk melacak pengguna, kunci enkripsi, atau kode-kode lainnya
yang tidak penting bagi pengguna, tetapi diperulkan oleh website.
Pembuatan elemen
tersembunyi dilakukan dengan menggunakan elemen input, yang memiliki
atribut type bernilai hidden.
<input type="hidden" name="csrf_token" value="a1923axclkaseruczxcna">
Tombol pada Form
Setelah pengguna mengisikan data-data yang
diminta oleh dokumen web, tentu saja pengguna harus
mengirimkan data tersebut ke server. Pengiriman data dapat dilakukan pengguna
melalui tombol khusus yang disediakan oleh HTML.
Tombol Pengiriman
Pembuatan tombol pengiriman juga dilakukan
dengan menggunakan elemen input, yang atribut type-nya diisikan dengan nilai submit, seperti berikut:
<input type="submit" name="submit" value="Masukkan
Form">
Perhatikann bahwa berbeda dengan elemen-elemen input sebelumya,
nilai dari atribut value diproses menjadi teks dari tombol yang ditampilkan ke pengguna. Hal
ini menyebabkan kita tidak lagi perlu menambahkan teks setelah elemen form,
seperti pada radio button ataupun checkbox.
Tombol
Penghapus Input
Ketika sedang mengisikan form, seringkali pengguna menyadari
bahwa data-data yang diisikannya mayoritas adalah data yang salah. Pada saat
ini biasanya pengguna akan menghapus seluruh isi dari form, satu per satu.
Untungnya HTML telah memberikan fitur untuk menghapus seluruh isi form
sekaligus, melalui tombol penghapus input.
Pembuatan tombol dilakukan sama persis
seperti pada tombol pengiriman, dengan perbedaan nilai pada atribut type, yang
diisikan dengan resetpada tombol penghapusan ini.
<input type="reset" name="reset" value="Kosongkan
Form">
Organisasi
Elemen Form
Mengetahui bagaimana membuat elemen-elemen masukan pada form
masih merupakan langkah awal dalam pembuatan form HTML. Elemen-elemen masukan
form jika ditampilkan tanpa informasi tambahan tidaklah berguna, karena
pengguna tidak dapat mengetahui data apa yang harus diisikan ke dalam
elemen-elemen tersebut.
UNtuk memberikan informasi tambahan kepada pengguna, HTML juga
menyediakan elemen-elemen yang dapat digunakan sebagai penanda dari elemen
masukan form. Adapun elemen-elemen yagn dapat digunakan untuk tujuan tersebut
yaitu label, fieldset, dan legend.
Label
Elemen label memberikan
fasilitas untuk menambahkan teks pada elemen masukan form. Elemen ini diisikan
dengan deskripsi dari elemen masukan yang ingin ditambahkan, dan anda
harus memiliki atribut for. Atribut for pada
elemen label berisikan nilai yang sama dengan atribut idpada
elemen masukan form. Pengisian nilai yang
sama akan mengikatkan elemen label dengan
elemen masukan, sehingga pengguna dapat langsung mengisikan nilai dengan
melakukan klik pada teks yang dihasilkan oleh elemen label.
Perhatikan kode berikut:
<label for="username">Username</label>
<input type="text" name="username" id="username">
di mana isi dari atribut for pada label adalah sama dengan isi
atribut id pada
elemen input. Lihat hasil eksekusi kode pada halaman berikutdan
coba klik teks “Username” untuk melihat efeknya. Coba juga untuk menggantikan
isi atribut for atau id untuk melihat hasilnya.
Fieldset
Elemen fieldset merupakan elemen yang digunakan untuk membungkus beberapa elemen
masukan form, untuk menandakan bahwa elemen-elemen
tersebut merupakan elemen masukan yang berada pada satu grup yang sama, atau
saling berhubungan.
Secara standar, elemen fieldset akan
memberikan border di sekitar grup elemen-elemen di dalamnya, yang tentunya
dapat diubah dengan menggunakan CSS. Berikut
adalah contoh penggunaan fieldset:
<fieldset>
<label for="username">Username</label>
<input type="text" name="username" id="username">
<label for="password">Password</label>
<input type="text" name="password" id="password">
</fieldset>
yang
hasil eksekusinya adalah:
Legend
Elemen legend digunakan untuk
memberikan judul pada sebuah fieldset. Pengunaan
elemen legend sangat
sederhana, hanya dengan menambahkan elemen tersebut sebagai child pertama
dari fieldset, seperti berikut:
<fieldset>
<legend>Login</legend>
<label for="username">Username</label>
<input type="text" name="username" id="username">
<label for="password">Password</label>
<input type="text" name="password" id="password">
</fieldset>
yang akan menghasilkan tampilan seperti berikut:
dan tentunya tampilan dari legend dapat diubah dengan
menggunakan CSS.
Validasi Masukan pada
Form
Seringkali dalam pengembangan form pada aplikasi, terdapat
elemen-elemen yang tidak wajib diisikan oleh pengguna dan elemen-elemen yang
wajib diisikan oleh pengguna. Aplikasi kemudian akan melakukan pengecekan
terhadap nilai masukan dari pengguna, apakah nilai yang wajib ada sudah
diisikan atau belum. Jika nilai belum diisikan maka aplikasi akan menolak form
pengguna, dengan pesan kesalahan yang menjelaskan bahwa terdapat isian yang
wajib diisi oleh pengguna. Proses pengecekan kewajiban isi atau berbagai batasan
lain ini dikenal dengan nama validasi.
Validasi
pada elemen-elemen form HTML dilakukan dengan beberapa cara, yaitu:
1.
Atribut requied pada elemen-elemen
masukan yang wajib diisikan. Jika pengguna tidak mengisikan elemen maka browser
secara otomatis akan memberikan peringatan kepada pengguna dan membatalkan
pengiriman form. Contoh penggunaan atribut ini yaitu:
2. <input type="text" name="username" requied>
3.
Pengunaan atribut type yang benar, untuk
memastikan browser dapat melakukan pengecekan nilai yang diisikan pengguna
dengan format sesuai dengan yang dispesifikasikan pada standar HTML. Misalnya, jika menggunakan type="email", maka pengguna tidak
dapat mengisikanbukanemail sebagai
masukan form.
Contoh
Pesan Kesalahan Pengisian Email pada HTML
Jadi, pastikan anda menggunakan atribut-atribut yang tepat
sesuai dengan data yang ingin disimpan, untuk memastikan browser dapat bekerja
dengan optimal dalam melakukan validasi terhadap elemen-elemen dalam form.
Posting Komentar