FORM

2.1 Form

Form memungkinkan suatu web server untuk menerima informasi dari pemakai melalui
sejumlah elemen kontrol. Kontrol ini bisa berupa suatu list menu, checkbox, radio button,
push button, dll. Form dapat digunakan untuk berbagai keperluan, seperti mengumpulkan
informasi atau meminta umpan balik dari pembaca, menawarkan barang/jasa secara online,
atau menyediakan pelayanan untuk pembaca.

2.2 Macam-Macam Kontrol Dalam Form

Kontrol dalam form merupakan elemen pembantu yang digunakan pembaca untuk
berinteraksi dengan halaman web. Macam-macam kontrol pada suatu form adalah :

 Teks baris tunggal, digunakan untuk memasukkan data angka dan teks
 Teks baris banyak, memungkinkan pembaca untuk memasukkan beberap baris teks
yang dapat digulung naik atau turun
 Teks password, untuk memasukkan password yang ditampilkan dengan tanda bintang.
 Tombol submit dan reset, digunakan untuk mengirimkan data yang dimasukkan
pembaca ke web server atau untuk membatalkannya
 Checkbox, memungkinkan pembaca untuk menggunakan kotak periksa
 Radio button, memungkinkan pembaca untuk memilih salah satu pilihan dari
sekelompok pilihan yang tersedia
 Daftar menu, memungkinkan pembaca untuk memilih satu atau lebih pilihan dari suatu
daftar menu

2.3 Metode Pengiriman Data Suatu Form

Untuk mengirimkan informasi ke web server, form mempunyai 2 metode, yaitu GET dan
POST. Pada HTML, metode ini dinyatakan dengan atribut METHOD di dalam elemen FORM.
Metode GET merupakan default pengiriman suatu data form. Metode ini mengirimkan data
dengan cara meletakkan pada bagian akhir dari URL. Sedangkan pada metode POST, data
dikirim secara terpisah. Dengan adanya penyimpanan data secara terpisah ini membuat
metode POST mampu menyimpan data dalam jumlah banyak.

2.4 Struktur Form

Form dibentuk dengan pasangan tag <FORM> ... </FORM>. Berikut adalah struktur dasar
elemen form pada dokumen HTML :

 Tag <FORM METHOD=”POST|GET” ACTION=”URL_SCRIPT”> ... </FORM>

 Tag <TEXTAREA>
 Tag <INPUT>
 Tag <SELECT>
 Tag <OPTION>

Tag <TEXTAREA> digunakan untuk memberikan kesempatan pada pembaca untuk

memasukkan informasi teks lebih dari satu baris. Tag <INPUT> digunakan untuk membuat
kontrol dalam form. Tag <SELECT> digunakan untuk membuat menu-menu pilihan dalam
suatu daftar pop-up di mana item-itemnya dituliskan dalam tag <OPTION>.
2.5 Membuat Form Sederhana

Form yang akan dibuat akan meminta pembaca untuk memasukkan namanya dan
kemudian menekan tombol “OK” jika sudah benar dan menekan tombol “BATAL” jika terjadi
kesalahan dan ingin mengulanginya.

Tampilan kode HTML di atas :

2.6 Tombol Submit dan Reset

Tombol “Submit” dan “Reset” dibuat menggunakan tag <INPUT> dengan atribut TYPE =
Submit atau TYPE = Reset. Bentuk umum dari kontrol ini sebagai berikut :
<INPUT TYPE = Submit | TYPE = Reset VALUE = “nama_tombol”>

2.7 Meminta Input Teks Dari Pembaca

Kontol dalam bentuk kotak teks memungkinkan kita untuk meminta pembaca memasukkan
data teks dalam form. Tag untuk membuat kontrol ini adalah <INPUT> dengan atribut TYPE
= ”text”. Kontrol ini merupakan jenis kontrol input yang paling sederhana, biasanya
digunakan untuk memasukkan teks yang pendek. Bentuk umum dari kontrol ini sebagai
berikut :

<INPUT TYPE = text NAME = “nama” VALUE = “nama_default” SIZE =

jumlah_maksimum_karakter_yang_dapat_ditampilkan MAXLENGTH =
jumlah_maksimum_karakter_yang_dapat_dimasukkan >

Jenis-jenis kontrol untuk tag <INPUT> adalah sebagai berikut :

Nama Fungsi
TYPE
text membuat kotak teks satu baris
password menerima input berupa password
hidden menyembunyikan input teks yang diketikkan
checkbox membuat kotak periksa
radio membuat tombol radio button
submit membuat tombol push button SUBMIT
reset membuat tombol push button RESET
Tampilan kode HTML di atas :

2.8 Membuat Input Untuk Password

Tampilan kode HTML di atas :

2.9 Checkbox

Bentuk umum checkbox <INPUT TYPE = Checkbox NAME = “nama” VALUE = “nilai”
CHECKED>. Atribut TYPE menyatakan jenis kontrol, NAME merupakan nama variabel yang
menyimpan nilai pada atribut VALUE. Jika atribut CHECKED ditambahkan pada checkbox,
itemnya secara default akan terpilih. Contoh pembuatan checkbox pada dokumen HTML :
Tampilan kode HTML di atas :

2.10 Radio Button

Bentuk umum radio button sama dengan bentuk umum checkbox, kecuali TYPE = Radio.
Contoh :
Tampilan kode HTML di atas :

2.11 Menu Pop-Up

Menu pop-up dinyatakan dengan pasangan tag <SELECT> ... </SELECT>, sedangkan daftar
pilihannya dinyatakan dengan tag <OPTION>. Berikut adalah bentuk umum dari kontrol
ini :

<SELECT NAME = “nama” SIZE = jumlah_baris_yang_muncul MULTIPLE>

<OPTION VALUE=”nilai” SELECTED>
</SELECT>
 Tampilan kode HTML di atas :

2.12 Membuat Input Teks Dalam Beberapa Baris

Untuk membuat teks yang memerlukan lebih dari 1 baris dalam suatu form, kita harus
menggunakan pasangan tag <TEXTAREA> ... </TEXTAREA>. Elemen ini biasanya
digunakan untuk meminta komentar dari pembaca. Bentuk umum TEXTAREA adalah :

<TEXTAREA NAME=”nama” ROWS = jumlah_baris COLS = jumlah_kolom>

</TEXTAREA>
Tampilan kode HTML di atas :

A. Soal
Buatlah formulir untuk proses pengisian biodata !