Form
Sebuah 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.
Mengetahui bagaimana membuat form
pada HTML dengan benar penting untuk memastikan tidak terdapat kesalah pahaman
pengguna dalam menggunakan form yang disediakan. Bagian ini akan menjelaskan
bagiamana membuat form dengan HTML, elemen-elemen form yang disediakan, serta
bagaimana elemen-elemen tersebut digunakan. Pemrosesan form secara dinamis
tidak akan dibahas, dan properti CSS untuk memperindah tampilan form akan
dibahas pada bagian berikutnya.
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. Idealnya
parameter ini diisikan dengan sebuah URL pada server yang melakukan pemrosesan
data.
Atribut kedua yang wajib diisikan
ialah atribut method. Atribut ini memberitahukan browser bagaimana data
akan dikirimkan kepada server yang alamatnya diisikan pada action.
Terdapat dua nilai yang dapat diisikan pada bagian ini, yaitu get
dan post. Keuda nilai ini sendiri merupakan protokol HTTP yang
digunakan untuk pengiriman data.
Elemen
Masukan Form
Terdapat banyak elemen-elemen
masukan pada form, yang dapat digunakan oleh pengguna untuk mengisikan data
dengan yang berbeda-beda jenisnya. Bagian ini akan membahas tiap-tiap elemen
masukan form, beserta dengan cara pembuatannya.
Elemen
Masukan Teks: TextField dan TextArea
Pengisian informasi dalam bentuk
teks pada form HTML dapat dilakukan dengan menggunakan dua buah elemen: textarea dan input. textarea digunakan untuk masukan teks yang terdiri dafi beberapa
baris, sementara input digunakan untuk masukan teks yang hanya satu baris.
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:
<tr>
<td valign="top">Komentar</td>
<td valign="top">:</td>
<td valign="top"><textarea
cols="20" rows="5">Isikan komentar anda
disini</textarea></td>
</tr>
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:
<td>Nama
</td>
<td>:</td>
<td><input type="text"
name="Nama" size="25" ></td>
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:
- color
- datetime-local
- number
- tel
- week
- date
- email
- range
- time
- datetime
- month
- search
- url
- password
- text
- 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.
- Radio
Button
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`:
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td><input type="radio"
name="Kelamin" value="Laki-laki" />
Laki-Laki
<input type="radio" name="Kelamin"
value="Perempuan" />
Perempuan</td>
</tr>
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.
- CheckBox
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.
<tr>
<td>Hobi</td>
<td>:</td>
<td><input type="checkbox"
name="Olahraga" value="olahraga" />
olahraga
<input type="checkbox" name="Membaca"
value="Membaca" />
Membaca
<input type="checkbox"
name="komputer" value="Komputer" />
Komputer
<input type="checkbox" name="Musik"
value="Musik" />
Musik
<input type="checkbox"
name="Lain-lain" value="Lain-Lain" />
Lain-Lain</td>
</tr>
Seperti yang dapat dilihat, atribut name
dan value juga wajib dimiliki oleh checkbox, dengan alasan yang sama
untuk radio button.
- Dropdown
List
Meskipun dapat memberikan pilihan
nilai kepada pengguna, radio button maupun checkbox sangat tidak ideal untuk
digunakan pada pilihan yang memiliki nilai yang sangat banyak. Misalnya,
pilihan negara yang ditinggali oleh pengguna dari ratusan negara yang ada di
dunia akan jika ditampilkan pada radio button akan menyebabkan daftar yang
dipaparkan sangat banyak dan sulit dibaca oleh pengguna. Dalam kasus seperti
ini lebih baik kita menggunakan dropdown list.
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>
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 reset pada tombol penghapusan ini.
<input
type="reset" name="reset" value="Kosongkan Form">
Contoh skrip untuk form :
<html>
<head>
<title>Belajar Form</title>
</head>
<body>
<form>
<label for="nama_depan">Nama
Depan</label>
<input type="text" name="nama_depan"
id="Nama_Depan"><br>
<label for="nama_belakang">Nama
Belakang</label>
<input type="text"
name="nama_belakang" id="nama_belakang"><br>
Jenis Kelamin
<input type="radio" name="Jenis_Kelamin"
value="Pria" id="pria">
<label
for="pria">Pria</label>
<input type="radio"
name="Jenis_Kelamin" value="Wanita"
id="wanita">
<label
for="wanita">Wanita</label><br>
<label for="pendidikan">Pendidikan
Terakhir</label>
<select name="pendidikan"
id="pendidikan">
<option
value="">Silahkan Pilih</option>
<option
value="SD">SD</option>
<option
value="SLTP">SMP</option>
<option value="SLTA">SMA/SMK/STM</option>
<option
value="D3">D3</option>
<option
value="S1">S1</option>
<option
value="S2">S2</option>
<option
value="S3">S3</option>
</select><br>
Komik Favorit
<input type="checkbox"
name="komik" value="Naruto" id="Naruto">
<label
for="Naruto">Naruto</label>
<input type="checkbox"
name="komik" value="One_P" id="One_P">
<label for="One_P">One
Piece</label>
<input type="checkbox"
name="komik" value="Bleach" id="Bleach">
<label
for="bleach">Bleach</label>
<input type="checkbox"
name="komik" value="Deat_N" id="Death_N">
<label for="Death_N">Death
Note</label>
<input type="checkbox"
name="komik" value="Fairy_Tail"
id="Fairy_Tail">
<label for="Fairy_Tail">Fairy
Tail</label>
<input type="checkbox"
name="komik" value="Conan" id="Conan">
<label
for="Conan">Conan</label>
<input type="checkbox"
name="komik" value="Hunter" id="Hunter">
<label for="Hunter">Hunter X
Hunter</label><br>
<textarea rows="4" cols="50"
id="deskripsi">Deskripsikan diri anda
</textarea><br><br>
<label for="deskripsi"></label>
<input type="submit"
value="Submit">
<input type="reset"
value="Reset">
</form>
</body>
</html>
