BEKERJA DENGAN FORM
20.4. BEKERJA DENGAN FORM
Jika kita sering membuka-buka halaman web di internet, seringkali kita menjumpai bagian-bagian dimana kita harus memasukkan atau mengetikkan data-data tertentu. Misalnya sebeleum kita masuk ke inbox email, kita diminta mengetikkan user name dan password pada tempat yang telah disediakan. Fasilitas seperti ini biasa disebut sebagai form (formulir).
Formulir dibentuk dengan menggunakan pasangan tag <FORM> dan </FORM> . Dua attribute utama dari FORM yang sering digunakan adalah ACTION dan METHOD .
ACTION menentukan alamat yang akan dijalankan dan menerima semua masukan pada FORM. Jika ACTION tidak disebutkan, informasi akan dikirim ke alamat yang sama dengan halaman FORM itu sendiri.
METHOD digunakan untuk menentukan bagaimana informasi dikirim ke alamat yang disebutkan dalam ACTION . Nilai yang umum digunakan adalah GET dan POST . POST membuat informasi akan dikirim secara terpisah dengan alamat, sedangkan GET akan membuat informasi dikirim menjadi satu dengan alamat yang dituju.
20.4.1. Tipe Input Ada beberapa tipe input yang diterima oleh FORM yaitu TEXT,
PASSWORD, CHECKBOX, RADIO, SUBMIT dan RESET . Tipe-tipe input ini secara eksplisit menggunakan tag <INPUT> . Selain itu ada tipe input lain yang tidak menggunakan tag <INPUT> yaitu, TEXTAREA dan SELECT . Attribute untuk tag <INPUT> dapat dilihat pada table 20.3.
Tabel 20.3. Attribute-attribute tag <INPUT>
Attribute Fungsi TYPE
Menentukan tipe input
NAME
Menentukan nama data. Attribute ini diperlukan oleh semua jenis input, kecuali submit dan reset
MAXLENGTH
Menentukan jumlah maksimal karakter pada tipe input text dan password
VALUE
Menentukan nilai awal dari input
SIZE
Menentukan ukuran kotak input pada tipe input text dan password
CHECKED
Mengatur agar checkbox dalam keadaan terpilih pada keadaan awal
Tipe TEXT Tipe TEXT berguna untuk memasukkan nama orang, benda, alamat atau
teks lain yang tidak terlalu panjang. Gambar berikut ini menunjukkan penggunaan tipe TEXT.
Gambar 20.29. Penggunaan input tipe TEXT
Tipe PASSWORD Tipe password sebenarnya sama dengan tipe text, hanya bedanya
apabila mengetikkan sesuatu pada kotak password, maka karakter akan disembunyikan dan diganti misalnya dengan tanda *. Berikut ini contoh penggunaan tipe password.
Gambar 20.30. Penggunaan input tipe PASSWORD
Tipe CHECKBOX Tipe ini berguna untuk membuat kotak cek. Kotak cek adalah suatu
bentuk masukan yang memungkinkan pengguna memilih dengan cara mengklik pada pilihan yang diinginkan. Pengguna dapat memilih satu atau lebih dari satu pilihan atau tidak memilih sama sekali. Attribute checked dapat digunakan untuk memberi nilai awal pada suatu pilihan. Berikut ini contoh checkbox.
Gambar 20.31. Penggunaan input tipe CHECKBOX
Tipe RADIO Berbeda dengan checkbox, radio digunakan dalam dua atau lebih tombol
yang memungkinkan pengguna hanya memilih satu pilihan. Seperti halnya checkbox, attribute checked juga dapat digunakan untuk memberi nilai awal pilihan.
Gambar 20.32. Penggunaan input tipe RADIO
Tipe SUBMIT Tipe SUBMIT akan membentuk tombol submit. Apabila pengguna
mengklik tombol tersebut maka akan menyebabkan alamat yang disebutkan pada ACTION pada tag <FORM> akan dimuat. Tipe SUBMIT mengklik tombol tersebut maka akan menyebabkan alamat yang disebutkan pada ACTION pada tag <FORM> akan dimuat. Tipe SUBMIT
Gambar 20.33. Penggunaan input tipe SUBMIT
Tipe RESET Tipe RESET berfungsi untuk mengosongkan atau mengembalikan nilai
field teks ke nilai asal. Seperti halnya SUBMIT, RESET juga memiliki atribut value yang bila diisi akan merubah kata dalam tombol.
Pada Gambar 20.34, tampak bahwa field nama telah diisi (gambar kanan atas) ketika tombol kosongkan (RESET) ditekan maka field-field tersebut akan kembali dikosongkan (gambar kanan bawah)
Gambar 20.34. Penggunaan input tipe RESET
Tipe TEXTAREA Pasagan tag <TEXTAREA> dan </TEXTAREA> berfungsi untuk membentuk
suatu masukan dalam bentuk teks yang panjang dan bisa mencakup banyak baris. Atribut untuk TEXTAREA, yaitu:
o NAME untuk menentukan nama textarea o NAME untuk menentukan nama textarea
diturunkan ke baris berikutnya jika panjang baris lebih dari kolom textarea
Gambar 20.35. Penggunaan tipe TEXTAREA
Tipe SELECT SELECT digunakan untuk membuat combo box yang berisi daftar pilihan.
Pengguna dapat melihat daftar pilihan dengan mengklik pada combo box dan memilih dengan cara mengkliknya pada pilihannya (Gambar 20.36).
Gambar 20.36. Penggunaan tipe SELECT.