E-Book yang Sedang Anda Baca Ini Berasal dari:

SUMBER ILMU PENGETAHUAN TANPA BATAS

www.pustaka78.com
Inilah situs yang selalu dicari. Akan menjadi sumber download buku digital
terbesar di Indonesia. Menyediakan ribuan ebook, audio, movie, foto, dan
software bermutu dalam berbagai kategori. Dijamin dapat didownload
GRATIS 100%. Kunjungi sekarang juga www.pustaka78.com

Hak Cipta Terpelihara

© Hak Cipta ada pada Penulis/ Pengarang, Penerbit, atau Sumber Online.
LISENSI PENGGUNAAN: Dokumen ini boleh dikutip, dimodifikasi, atau
disebarkan luaskan secara bebas tanpa menghilangkan identitas pemilik hak
cipta. Pustaka Gratis 78 semata-mata hanya sebagai perpustakaan digital
penyedia ilmu pengetahuan yang memiliki koleksi dokumen yang pada dasarnya
bersumber pada publikasi online gratis atau dokumentasi yang tidak
diperdagangkan lagi. Jika buku ini masih diperdagangkan, kami tetap
menyarankan Anda untuk membeli versi cetaknya agar dunia perbukuan di
Indonesia terus maju dan berkembang dengan pesat.
Semoga semua bahan bacaan koleksi Pustaka Gratis 78 ini bermanfaat bagi
masyarakat luas di Indonesia dan luar negeri.
8
MENYUSUN FORM

Website dalam dunia bisnis tidak semata-mata hanya dimanfaatkan untuk

menampilkan profil-profil, misi-visi, atau daftar jasa serta produk yang
dimiliki oleh sebuah perusahaan pemiliki web itu. Jika web hanya
dimanfaatkan sebatas itu saja maka pendayagunaan web itu menjadi kurang
maksimal. Sebuah web akan lebih mengundang keuntungan jika web itu
dijadikan lahan untuk berkomunikasi antara calon klien atau konsumen dan
dengan pemilik web tersebut. Dengan demikian, web memiliki kelebihan
tersendiri dibandingkan dengan brosur-brosur atau pamflet-pamflet yang
disebarkan orang atau ditempelkan di dinding-dinding.
Ketika seseorang mengunjungi sebuah web, ia tidak hanya berharap agar
mendapat informasi tentang sebuah perusahaan sebanyak mungkin, tapi juga
ingin agar ia bisa berinteraksi dengan orang-orang yang ada di balik web
tersebut. Hal ini wajar saja terjadi mengingat belum tentu apa yang
diinginkan seorang konsumen telah dapat dipenuhi oleh tampilan-tampilan
halaman-halaman web yang tersaji. Mengingat kebutuhan konsumen
mungkin akan begitu kompleks, kita harus menyediakan cara agar mereka
dapat bertanya atau berinteraksi dengan kita lewat cara yang mudah dan
cepat.
Pada kesempatan kali ini, kita akan belajar bagaimana menyusun form. Form
sendiri terdiri dari komponen-komponen yang bertugas untuk mengumpulkan
informasi dari para pengunjung. Dan oleh form, informasi tersebut dikirim
kepada kita dengan bantuan script tertentu. Form merupakan jawaban yang
mungkin akan kita pilih jika kita ingin menciptakan interaktivitas antara
pengunjung dan pemilik web.

2
8.1. Form dalam Dunia Website
Form dalam dunia website pada dasarnya memiliki tugas untuk
mengumpulkan data-data atau informasi lainnya dari para pengunjung. Sebut
saja data tentang nama, alamat, nomor telepon, alamat e-mail, hobi,
pekerjaan, penghasilan, dan sebagainya. Dalam prakteknya, form ini memiliki
jasa yang besar terutama dalam bidang bisnis lewat internet. Sebuah web bisa
dikatakan bagus jika ia memiliki form beserta komponen-komponen di
dalamnya. Form dapat menjadi tempat bertanya bagi para pengunjung. Dan
dari pihak pemilik web, form dapat diandalkan dalam pengumpulan data-data
penting yang ada di dalam diri para pengunjung, seperti data demografi (usia,
pendapatan, suku bangsa, jenis kelamin, dan sebagainya) serta data-data
psikografi seperti hobi, cita-cita yang berkaitan dengan pekerjaan, moto
hidup, dan sebagainya.

Gambar 8-1 Form Pendaftaran pada Sebuah Website

Data-data yang terkumpul itu sangat penting artinya. Pemilik web yang ingin
menang dalam persaingan yang semakin ketat dewasa ini harus mengantongi
data-data semacam itu. Lewat data-data itu pemilik web bisa merancang
sebuah strategi untuk menggaet para pelanggan, yang biasanya berasal dari
para pengunjung itu sendiri. Data-data itu harus disimpan dalam sebuah

3
sistem yang disebut Database dan keberadaannya harus benar-benar dijaga
agar tidak dicuri pihak lain.

8.1.1. Mengenal Komponen-Komponen Form

Dalam mengemban tugasnya untuk mengumpulkan data-data dari para
pengunjung, form dibantu oleh komponen-komponen yang ada di dalamnya.
Ada banyak komponen yang ada di dalam form. Standarnya, komponen form
terdiri dari text-box, password field, radio button, check box, text-area,
tombol submit, tombol reset, pop-up menu, hidden, dan list.
Dalam beberapa kasus nama-nama komponen form di atas mungkin akan
ditulis secara berbeda. Text-box juga sering dinamai text-field, pop-up menu
sering disebut menu drop-down, dan lain sebagainya. Namun pada dasarnya
sama saja.

Gambar 8-2 Komponen-Komponen Form

8.1.2. Cara Kerja Form

Form bertugas mengumpulkan data-data dan informasi dari para pengunjung.
Pertanyaan selanjutnya adalah bagaimana data-data dan informasi itu bisa
sampai ke tempat kita sebagai pemilik web? Atau bagaimana data-data dan
informasi itu bisa diolah dan ditampilkan lagi ke dalam website (contohnya
dalam pembuatan guest book dimana data-data akhirnya ditampilkan lagi ke

4
dalam web itu)? Dalam dunia web programming, data-data dan informasi
yang berhasil dikumpulkan oleh form dikirim dan diolah oleh server kepada
kita dengan bantuan sebuah script server-side. Script server-side yang biasa
dimanfaatkan adalah Active Server Pages (ASP), PHP, ColdFusion (CFML),
Perl, dan C dengan bantuan CGI.
Script-script di atas bertugas untuk mengambil informasi-informasi serta data
lainnya yang dikirim oleh form. Selanjutnya script tersebut akan memutuskan
apakah data-data itu akan diteruskan kepada kita dengan cara mengirimnya
via e-mail, menampilkannya kembali ke dalam website, atau diolah dengan
cara lain. Jika form dipakai untuk membuat guest book maka data-data serta
informasi tersebut diolah oleh script agar bisa dimunculkan kembali ke dalam
halaman web. Sedangkan jika digunakan untuk menampung pertanyaan-
pertanyaan maka script akan meneruskan data serta informasi tadi ke kita
sebagai pemilik web lewat bantuan e-mail.
Dalam kenyataannya, membuat script server-side yang bertugas mengolah
data-data dari form semacam itu tidaklah mudah. Anda harus terjun ke dalam
dunia web programming. Beberapa piranti lunak justru menyediakan jalan
keluar agar data form bisa diolah tanpa bantuan script server-side, seperti MS
Frontpage 2000 dengan fasilitas webbot-nya. Namun untuk pemakaian yang
lebih profesional lagi, webbot tampaknya kurang memadai.

8.2. Meletakkan Form

Dalam dunia HTML, form dibentuk oleh pasangan tag <form> dan </form>.
Semua komponen form yang telah disebutkan di atas harus diletakkan di
antara tag ini. Jika tidak, maka komponen form itu tidak bisa dipakai untuk
mengumpulkan informasi dari para pengunjung, terlebih untuk mengirim
informasi itu ke script server-side. Mengapa demikian? Hal ini terjadi karena
tag <form> bertugas untuk mengatur bagaimana data serta informasi tadi
dikirim dan script mana yang bertugas untuk mengolahnya.
Dalam HTML, bentuk script untuk pembuatan form ini adalah sebagai
berikut :

<Form name=”namaform” action=”namascript” method=”POST/GET”>

. . . komponen form . . .
</Form>

Atribut name dipakai untuk menamai form tersebut sedangkan action dipakai
untuk menentukan script server-side mana yang akan bertugas untuk

5
mengolah data yang nanti akan dikirim form ini. Proses pengiriman data dari
form menuju ke script diatur oleh atribut method yang bisa berisi dua nilai,
Post dan Get.
Untuk meletakkan form ke dalam halaman web Anda, ikuti langkah-langkah
berikut ini :
1. Bukalah jendela Object Pallete Anda.
2. Pilihlah tab Form Elements Pallete yang memiliki tampilan seperti
di bawah ini.

3. Klik-lah icon Form yang ada di tab Form Elements Pallete di

atas sebanyak dua kali. Atau, klik-lah sekali dan seretlah ia (click
and drag) ke dalam halaman web Anda. Baik cara pertama maupun
kedua akan mendorong sistem untuk meletakkan form ke dalam
halaman web Anda.

6
 Gambar 8-3 Meletakkan Form dengan Cara Click and Drag

4. Sesudah Anda melakukan langkah ke-3 maka di dalam halaman web

akan Anda jumpai kotak dengan tulisan “F” di sisi kiri-atasnya.
5. Di dalam kotak itulah Anda letakkan komponen-komponen form
nantinya.

7
 Gambar 8-4 Kotak dengan Tulisan “F” Menandai Adanya
Form di dalam Web Kita

8.2.1. Menamai Form

Di dalam web Anda mungkin terdapat beberapa halaman yang sama-sama
menggunakan form untuk tujuan yang berbeda-beda. Form di halaman A
untuk mengisi data-data guest book sementara form di halaman B untuk
mengumpulkan data-data pertanyaan, dan form di halaman C untuk keperluan
lain yang lebih penting lagi. Agar Anda tidak salah mengenali satu form
dengan form lainnya, ada baiknya Anda memberi nama pada tiap-tiap form.
Dengan demikian Anda tahu form tersebut berfungsi untuk apa.
Untuk menamai form Anda, ikutilah langkah-langkah berikut ini :
1. Munculkan jendela Inspector.
2. Klik-lah tulisan “F” yang ada di kotak form tersebut.
3. Jendela Inspector berubah menjadi Form Inspector seperti gambar di
bawah ini.

8
 Gambar 8-5 Form Inspector

4. Di dalam text-box Name

Anda masukkan teks untuk menamai form yang bersangkutan seperti
“Pertanyaan”, “Buku Tamu”, atau lainnya.
5. Form Anda telah diberi nama.

8.2.2. Mengatur Action

Atribut Action dipakai untuk menentukan script server-side mana yang akan
bertugas untuk mengolah data-data dan informasi lainnya yang dikirim oleh
form. Di sini Anda harus tentukan nama file yang berisi script tersebut.
Untuk memasukkan nama file script server-side ke dalam form, ikuti
langkah-langkah berikut ini :
1. Pastikan Anda telah memilih form yang bersangkutan dan Form
Inspector seperti gambar 8-5 di atas muncul di layar monitor.
2. Pada bagian Action, klik-lah check-box Action di sana.
3. Sedangkan di kotak yang ada di sebelah kanannya (bertuliskan
(empty reference)) masukkan nama file script server-side yang
dimaksud. Sebagai contoh, jika file yang dimaksud adalah form.asp
, maka tulislah ia ke
dalam kotak tersebut.
Anda bisa memasukkan nama itu secara langsung, dengan cara

9
 browse file, atau dengan cara point-to-file. Semua cara ini telah
berulang kali kita bahas baik saat kita melakukan peletakan gambar,
link, dan sebagainya.
4. Nama file script server-side sudah berhasil didefinisikan.

8.2.3. Memilih Method

Pengiriman data dan informasi dari form menuju script server-side
melibatkan salah satu dari dua metode yang telah disediakan HTML, yaitu
POST dan GET. Kedua metode ini bekerja dengan cara yang saling berbeda.
Jika menggunakan metode POST maka data akan dikirim bersama-sama
dengan HTTP Header. Kelebihan dari metode POST ini antara lain, data dan
informasi yang dikirim tak bisa kita lihat sehingga aman bilamana data atau
informasi tersebut mengandung sesuatu yang amat rahasia, seperti password,
nomor kartu kredit, atau nama pacar. Sedangkan jika metode GET yang
dipilih maka data akan dikirim menyatu dengan URL, seperti contoh di
bawah ini :

http://www.gilelu.com/form.asp?nama=juminten&password=minten

Pada URL di atas tampak bahwa ia membawa dua buah informasi dari form,
yaitu nama yang berisi nilai “Juminten” dan password yang berisi “minten”.
Kekurangan dari metode GET antara lain, jumlah data yang dikirim amat
terbatas; berbeda dengan POST yang tidak terbatas. Selain itu, data yang
dikirim dengan metode GET bisa diintip oleh orang lain karena muncul di
jendela URL browser kita. Namun, GET memiliki kelebihan lain dibanding
POST, contohnya ia bisa dipakai untuk memasukkan data yang dikirim oleh
form ke dalam atribut sebuah tag secara langsung sehingga data itu menjadi
nilai dari atribut yang bersangkutan.
Untuk memilih metode yang telah disediakan, ikutilah langkah-langkah
berikut ini :
1. Pada jendela Form Inspector terdapat drop-down menu Method.
2. Pilihlah salah satu metode yang ada di sana, Get atau Post
.
3. Action telah didefinisikan.

10
8.3. Memasukkan Text Field
Sekarang saatnya untuk memasukkan komponen form satu per satu ke dalam
halaman web kita. Komponen form pertama yang akan kita bahas kali ini
adalah text-field (dimana ia sering juga disebut dengan istilah text-box). Text-
field ini dalam form memegang peranan yang cukup penting. Oleh karena itu
ia sering kali dipakai dan bahkan dalam pembuatan form, text-field ini selalu
dilibatkan sehingga tak pernah absen dari halaman web yang mengandung
form.
Hal ini dapat dimaklumi mengingat text-field dipakai untuk menampung
data-data dan informasi dari para pengunjung dalam wujud teks. Teks di sini
sangatlah luas, ia tidak hanya dipandang sebagai huruf saja, namun juga
angka dan karakter lainnya. Ia dipakai untuk mengumpulkan data-data atau
informasi yang bersifat pendek dari para pengunjung seperti nama, alamat e-
mail, nomor telepon, kode pos, dan data-data pendek lainnya. Ia tidak
dirancang untuk menampung data dan informasi yang panjang. Ia hanya
mampu menerima satu baris data saja, dan oleh sebab itu beberapa piranti
lunak menyebutnya dengan istilah one-line text-box.
Untuk memasukkan text-box ke dalam halaman web, ikuti langkah-langkah
berikut ini :
1. Letakkan kursor di dalam kotak Form.
2. Klik-lah icon Text Field yang ada di Object Pallete tab Form
Elements Pallete sebanyak dua kali. Atau alternatif lainnya, klik-lah
icon itu dan seretlah ia ke dalam kotak Form.
3. Di halaman web Anda akan muncul kotak text-field tempat mengisi
data-data pendek.
4. Di depan text-field tersebut (sebelah kiri text-field) bisa Anda beri
keterangan secukupnya agar orang lain tahu data apa yang mesti
dimasukkan ke dalamnya. Sebagai contoh, tulislah “Nama”, “nomor
telepon”, atau apa saja sesuai kebutuhan.

11
 Gambar 8-6 Text-Field Nama di Halaman Web

8.3.1. Mengatur Text-Field Lewat Text-Field Inspector

Dalam prakteknya, text-field yang tadi telah Anda letakkan belum bisa
bekerja secara maksimal sebelum Anda melakukan modifikasi pada text-field
di atas. Untuk melakukan modifikasi, akan lebih mudah bagi Anda jika Anda
dibantu oleh Text-Field Inspector. Inspector ini akan muncul begitu Anda
mengklik sekali pada text-field yang ada di halaman web Anda sebagai
pertanda ia akan Anda pilih.
Adapun bentuk text-field inspector adalah semacam ini :

12
 Gambar 8-7 Text-Field Inspector

Dengan Text-Field Inspector di atas Anda bisa atur atribut-atribut text-field.

Atribut-atribut text-field yang patut diperhatikan dan membawa pengaruh
yang cukup penting antara lain :
x Name : atribut ini dipakai untuk memberi nama pada text-field di atas.
Pemberian nama ini sangat penting mengingat script server-side akan
menangkap informasi dan data dari text-field berdasarkan nama-nama
mereka. Untuk memasukkan nama ke dalam text-field, tinggal ketikkan
teks ke dalam kotak Name .
x Value : atribut ini dipakai apabila Anda ingin memasukkan teks secara
langsung ke dalam text-field tanpa harus menunggu orang lain
memasukkannya ke sana. Jika Anda menulis teks ke dalam Value ini
maka teks itu akan tampak secara otomatis pada text-field Anda. Tulislah
teks yang hendak Anda masukkan ke dalam text-field di kotak Value
.

13
 Gambar 8-8 Teks yang Anda Masukkan ke dalam Kotak Value
Berpindah ke Text-Field

x Visible : Atribut ini dipakai untuk mengatur panjang text-field secara

visual. Dikatakan secara visual karena panjang pendeknya text-field tidak
berpengaruh terhadap seberapa banyak teks yang bisa dimasukkan ke
dalamnya. Text-field yang pendek tetap bisa menampung teks dengan
ukuran yang melebihi panjang text-field itu sendiri. Masukkan ukuran
panjang text-field dengan memasukkan angka ke dalam kotak Visible
.
x Max : Atribut ini dipakai untuk membatasi panjang teks. Jika Anda
memasukkan nilai dalam wujud angka di sini maka teks hanya bisa
mengandung karakter sebanyak angka yang tadi Anda masukkan. Jika
Anda memasukkan “6” maka teks hanya bisa sepanjang 6 karakter saja.
Dan begitu seterusnya. Untuk membatasi panjang teks gunakan kotak
Max dan masukkan angkanya di sana.
x ReadOnly : Atribut ini dipakai untuk mengatur agar seorang pengunjung
tidak bisa memasukkan datanya ke dalam text-field tersebut. Atribut ini
bisa bekerja sama dengan atribut Value. Anda masukkan teks secara
otomatis lewat atribut Value dan dengan atribut ReadOnly ini text-field
yang telah terisi teks lewat atribut Value itu tidak bisa diganti, hanya bisa

14
 dibaca saja. Klik-lah check-box ReadOnly jika Anda ingin
text-field tersebut hanya bisa dibaca saja.

8.4. Memasukkan Password Field

Password field ini sama dengan text-field hanya saja ia berbeda dalam hal
bagaimana ia menampilkan teks yang dimasukkan oleh pengunjung ke
dalamnya. Sesuai namanya, password field ini bertugas untuk mengumpulkan
data-data atau informasi lainnya yang bersifat rahasia, seperti password
misalnya. Karena bersifat rahasia maka password field ini dirancang agar
setiap teks yang dimasukkan ke dalamnya tak bisa dibaca orang lain dan
bahkan oleh si pengisi password field tersebut. Hal ini untuk mencegah agar
apa yang ditulis oleh si pengisi tidak bisa dibaca orang lain. Semua teks yang
diletakkan di dalamnya akan dirubah secara visual dengan karakter asterisk
(*).
Untuk meletakkan password field ke dalam halaman web, Anda bisa
menggunakan dua cara yang saling berbeda. Cara I, Anda menggunakan
Object Pallete sedangkan cara II dengan memodifikasi text-field yang tadi
telah Anda masukkan sebelumnya.

8.4.1. Memasukkan Password Field Cara I

Cara I ini memungkinkan Anda memasukkan password field lewat Object
Pallete. Langkah-langkah yang bisa Anda tempuh untuk memasukkan
password field lewat cara ini adalah sebagai berikut :
1. Letakkan kursor di dalam kotak Form.

2. Klik-lah icon Password sebanyak dua kali atau klik-lah sekali

kemudian seretlah ia ke dalam kotak form halaman web Anda.
3. Di dalam halaman web Anda akan muncul password-field yang
sekilas mirip text-field.
4. Beri keterangan di depan password field itu, seperti tulisan
“Password” atau lainnya.

15
 Gambar 8-9 Password Field di Halaman Web Anda

8.4.2. Memasukkan Password Field Cara II

Bila Anda menggunakan cara II ini pastikan bahwa Anda sudah meletakkan
text-field yang akan dimodifikasi menjadi password terlebih dulu.
Selanjutnya, pada Text-Field Inspector, klik-lah checkbox Is Password Field
sehingga dalam keadaan tercentang. Sesudah itu, text-field tadi telah menjadi
password field. Setiap teks yang ada di dalamnya akan berganti wujud secara
visual menjadi karakter bintang.

16
 Gambar 8-10 Text-Field yang Telah Berubah Menjadi Password Field
Akan Merubah Semua Teks Secara Visual Menjadi Tanda Asterisk (Bintang)

8.4.3. Mengenal Atribut-Atribut Password Field

Atribut-atribut password field diatur oleh Password Field Inspector. Tidak
ada hal yang istimewa di dalam atribut-atribut password field karena
semuanya mirip dengan atribut-atribut text-field terkecuali pada tipenya
dimana text-field tidak akan mengganti teks menjadi asterisk secara visual.
Anda bisa lihat bahwa di dalam Password Field Inspector, bagian Is Password
Field dalam keadaan tercentang.

17
 Gambar 8-11 Password Field Inspector

8.5. Memasukkan Text-Area

Text-area ini hampir sama dengan text-field. Hanya saja ia bisa menampung
teks lebih banyak lagi. Ia sangat ideal untuk mengumpulkan informasi dari
para pengunjung yang diduga akan memakan tempat luas karena ditulis
secara panjang dan lebar, seperti misalnya komentar, kata-kata mutiara,
pesan, dan kritikan. Karena tugasnya yang demikian itu maka text-area ini
memiliki ukuran fisik lebih panjang dan lebar dibanding text-field.
Untuk memasukkan text-area ke dalam halaman web Anda, lakukan langkah-
langkah berikut ini :
1. Letakkan kursor di dalam kotak form.

2. Klik-lah icon Text-Area yang ada di Object Pallete bagian

Form Elements Pallete sebanyak dua kali. Atau, klik-lah sekali dan
seretlah ia ke dalam kotak form halaman web Anda.
3. Di dalam halaman web Anda akan muncul text-area yang besar.
4. Tulislah keterangan di depannya seperti “Komentar” atau apa saja
sesuai kebutuhan.

18
 Gambar 8-12 Text-Area Sangat Ideal Untuk Menampung Teks yang Panjang dan
Lebar

8.5.1. Mengatur Atribut-Atribut Text-Area

Agar kerja text-area bisa lebih maksimal lagi, Anda wajib mengatur atribut-
atribut yang ada di dalamnya. Untuk mengatur atribut text-area ini akan lebih
mudah jika Anda menggunakan Tex-Area Inspector. Caranya adalah dengan
mengklik text-area tersebut sehingga jendela Inspector akan menjadi jendela
Text-Area Inspector seperti gambar di bawah ini :

Gambar 8-13 Tampilan Jendela Text-Area Inspector

19
Ada beberapa atribut yang patut Anda perhatikan, yaitu :
x Name : Atribut ini sangat penting karena script server-side akan
mengolah data dan informasi dari text-area berdasarkan nama ini.
Masukkan nama yang Anda inginkan untuk menamai text-area ini ke
dalam kotak Name .
x Rows : Atribut ini dipakai untuk mengatur berapa lebar text-area tersebut.
Lebar text-area ditentukan oleh berapa banyak baris teks yang bisa
dimunculkan di sana. Lebar text-area ini tidak berpengaruh terhadap
banyak tidaknya teks yang bisa ditampung. Ia hanya akan mengatur lebar
text-area secara visual. Masukkan lebar text-area ke dalam kotak Row
dengan satuan jumlah baris .
x Columns : Atribut ini dipakai untuk mengatur berapa panjang text-area
tersebut. Panjang pendeknya text-area ditentukan oleh berapa banyak
karakter yang bisa ditampilan oleh text-area tersebut. Satu karakter akan
menghabiskan satu kolom sehingga jika Anda isi dengan nilai 40 kolom
maka panjang text-area itu sama dengan empat puluh karakter. Masukkan
panjangnya ke dalam kotak Columns .
x Wrap : Atribut ini dipakai untuk memotong teks menjadi beberapa baris
jika teks itu lebih panjang daripada text-area. Ada beberapa pilihan yang
bisa Anda ambil. Jika Anda memilih Off maka teks tidak akan terpotong
meski telah melampaui panjang text-area. Sebagai gantinya text-area akan
memunculkan tombol scrolling horizontal. Jika Anda memilih Virtual
maka teks akan dipotong secara virtual jika lebih panjang daripada text-
area. Arti dipotong secara virtual adalah teks itu hanya terlihat terpotong
di layar monitor namun sebenarnya ia tidak terpotong. Sedangkan apabila
Anda memilih Physical maka teks itu akan benar-benar terpotong.
Pilihlah nilai yang ada di atribut Wrap ini pada menu drop-down Wrap
.
x Content : Atribut ini berfungsi sama dengan atribut Value yang ada di
text-area, yaitu meletakkan teks secara otomatis ke dalam text-area.
Masukkan teks yang ingin Anda masukkan ke dalam text-area lewat kotak

Content ini .

20
 Gambar 8-14 Apa yang Tertulis di Atribut Content Muncul di Text-Area

x ReadOnly : Atribut ini berfungsi sama dengan atribut ReadOnly yang ada
di text-field, yaitu membuat agar text-area hanya bisa dibaca saja tanpa
bisa ditulisi. Klik-lah checkbox ReadOnly jika Anda ingin
menggunakannya.

8.6. Meletakkan Check Box

Check box merupakan salah satu komponen form yang telah sering kita sebut
di dalam buku ini. Ia berbentuk kotak kecil dan jika kita klik tombol kiri
mouse kita ke dalam kotak tersebut, tanda centang akan mengisi kotak kecil
itu. Dalam prakteknya, check box sering dipakai untuk mengumpulkan data
dan informasi dari para pengunjung dalam wujud pilihan. Berbeda dengan
text-field, password field, dan text-area dimana para pengunjung wajib
mengisi informasi dalam wujud teks ke dalamnya, dalam check box
pengunjung hanya perlu memilih pilihan yang tersedia secara tepat.
Model check box mirip dengan multiple choice dalam ujian ebtanas atau
lainnya. Hanya saja para pengunjung bisa mengambil lebih dari satu pilihan.
Jika check box itu dalam keadaan tercentang maka ia dalam keadaan terpilih.
Bilamana check box berada dalam keadaan terpilih maka form akan
mengirim data atau informasi yang ada di dalamnya ke script server-side.

21
Untuk meletakkan check box ke dalam form, lakukan langkah-langkah
berikut ini :
1. Letakkan kursor di dalam kotak form

2. Klik-lah icon Check Box yang ada di Object Pallete bagian

Form Elements Pallete sebanyak dua kali. Atau, klik-lah ia dan
seretlah ke dalam kotak form halaman web Anda.
3. Jika Anda menginginkan lebih dari satu check box maka lakukan
langkah ke-2 berulang kali sampai didapat jumlah check box yang
sesuai.
4. Berilah keterangan pada masing-masing check box. Setiap check
box yang Anda letakkan akan mewakili satu pilihan bagi para
pengunjung.
5. Check box telah terpasang di dalam halaman web Anda.

Gambar 8-15 Tiga Buah Check Box Diletakkan ke dalam Form

8.6.1. Mengatur Atribut Check Box

Atribut-atribut yang ada di dalam check box yang telah kita letakkan tadi
harus kita modifikasi lebih lanjut agar setiap check box mengirim data atau
informasi yang ada di dalamnya begitu ia dipilih oleh pengunjung. Untuk

22
mengatur atribut check box Anda wajib menggunakan jendela Check Box
Inspector yang akan muncul jika Anda mengklik salah satu check box yang
ada di halaman web Anda.

Gambar 8-16 Check Box Inspector

Atribut-atribut yang penting dalam check box antara lain :

x Name : Nama ini wajib diisikan. Script server-side akan menerima data
dari check box berdasarkan nama ini. Jika Anda meletakkan check box
dalam jumlah banyak namun semuanya masih dalam satu kategori maka
Anda wajib menamai semua check box dengan nama yang sama. Sebagai
misal, check box yang telah kita buat tadi memiliki satu kategori yang
sama, yaitu kendaran maka Anda wajib menamai semua check box itu
dengan nama “Kendaraan” .
x Value : Mengingat pengunjung tidak memasukkan data atau informasi ke
dalam check box ini maka sebagai gantinya data atau informasi itu
diletakkan di dalam atribut value. Jika check box yang bersangkutan
dipilih maka data atau informasi yang ada di dalam atribut value check
box yang bersangkutanlah yang akan dikirim ke script server-side.
Masukkan data atau informasi tersebut ke kotak Value
.
x Selected : Atribut ini dipakai untuk mengatur apakah check box akan
diset dalam keadaan terpilih secara otomatis atau tidak. Jika Anda

23
 mengklik Selected ini maka check box yang bersangkutan akan ikut

terpilih secara otomatis .

Gambar 8-17 Check Box Pertama Tercentang Secara Otomatis

8.7. Meletakkan Radio Button

Radio button mirip dengan check box. Ia berbentuk lingkaran dan di
dalamnya terdapat lingkaran yang lebih kecil lagi dengan warna hitam jika ia
Anda pilih. Radio button ini memiliki fungsi berbeda dengan check box. Jika
check box dirancang untuk menawarkan banyak pilihan dimana para
pengunjung bisa mengambil lebih dari satu pilihan maka radio button ideal
untuk menyajikan pilihan dimana para pengunjung hanya bisa mengambil
salah satu pilihan yang ada. Oleh karena itu, jika satu pilihan diambil maka
pilihan lain akan ditinggalkan, dan seterusnya.
Radio button ini bekerja dengan cara yang sama dengan check box. Ia akan
mengirim data atau informasi yang tersimpan di dalam atribut value jika radio
button ini dipilih.
Untuk meletakkan radio button, lakukan langkah-langkah berikut ini :
1. Letakkan kursor di dalam kotak form

24
 2. Klik-lah icon Radio Button yang ada di Object Pallete bagian
Form Elements Pallete sebanyak dua kali. Atau, klik-lah ia dan
seretlah ke dalam kotak form halaman web Anda.
3. Jika Anda menginginkan lebih dari satu radio button maka lakukan
langkah ke-2 berulang kali sampai didapat jumlah radio button yang
sesuai.
4. Berilah keterangan pada masing-masing radio button. Setiap radio
button yang Anda letakkan akan mewakili satu pilihan bagi para
pengunjung.
5. Radio Button telah terpasang di dalam halaman web Anda.

Gambar 8-18 Tiga Buah Radio Button Diletakkan Di Halaman Web

8.7.1. Mengatur Atribut Radio Button

Sama halnya dengan check box, radio button juga memiliki atribut-atribut
yang harus disetting terlebih dulu sebelum ia bisa bekerja secara maksimal.
Untuk menset atribut yang ada di radio button, Anda akan mendapat
kemudahan jika menggunakan Radio Button Inspector. Klik-lah salah satu
radio button dan Radio Button Inspector seperti gambar di bawah ini akan
muncul di layar monitor Anda.

25
 Gambar 8-19 Radio Button Inspector

Atribut-atribut yang bisa Anda atur antara lain adalah sebagai berikut :
x Group : Semua radio button yang masih dalam satu kategori wajib
dinamai dengan nama yang sama. Anda bisa memasukkan nama tersebut
ke dalam kotak Group . Sebagai contoh,
radio button di atas memiliki kategori yang sama, yaitu jumlah roda maka
Anda bisa menamai semua radio button di atas dengan nama “Roda”. Jika
Anda memasukkan nama ke dalam kotak Group ini maka ia akan
tersimpan ke dalam Group.
x Value : Mengingat radio button tidak menerima masukan data atau
informasi dalam wujud teks seperti text-field maka data atau informasi
yang nanti akan dikirim ke script server-side wajib diletakkan di dalam
atribut value ini. Anda bisa memasukkan data atau informasi masing-
masing radio button ke kotak Value .
x Selected : Atribut ini dipakai untuk mengatur apakah sebuah radio button
akan dibuat dalam keadaan terpilih secara otomatis atau tidak. Jika semua
radio button masih dalam satu nama (group) maka hanya ada satu radio
button yang bisa dipilih dalam sekali waktu.

8.8. List dan Pop-Up Menu

Teknik list dan pop-up menu hampir sama dengan radio button dan check
box. Di sini pengunjung akan ditawari daftar pilihan yang bisa diambil salah

26
satunya oleh pengunjung. Pilihan-pilihan itu disajikan kepada pengunjung
dalam wujud menu. List dan Pop-Up Menu sendiri memiliki kemiripan.
Bedanya, List memungkinkan seorang pengunjung mengambil lebih dari satu
pilihan sementara Pop-up menu tidak memungkinkan. Namun di antara
keduanya pada dasarnya memiliki bentuk yang sama.
Untuk meletakkan pop-up menu dan list ke dalam halaman web Anda, ikuti
langkah-langkah berikut ini :
1. Letakkan kursor di dalam kotak form

2. Jika Anda ingin meletakkan pop-up menu, klik icon Pop Up

sebanyak dua kali. Dan jika Anda ingin meletakkan list, klik icon

List sebanyak dua kali. Keduanya bisa juga Anda letakkan

dengan cara click and drag seperti komponen-komponen form
lainnya.
3. Berilah keterangan di dekat pop up menu atau list tersebut supaya
pengunjung tahu apa yang seharusnya ia pilih.
4. Pop up dan list telah dimasukkan ke dalam halaman web Anda.

Gambar 8-20 Pop-Up (Atas) dan List (Bawah) dalam Halaman Web

27
8.8.1. Mengatur Atribut-Atribut Pop-Up Menu dan List
Pop-up menu dan list berisi sederet pilihan-pilihan yang bisa diambil salah
satunya, beberapa diantaranya, atau justru semuanya (dua yang terakhir hanya
bisa dijalankan jika Anda menggunakan list).
Untuk meletakkan pilihan-pilihan itu dan untuk mengatur atribut-atribut
lainnya yang ada pada pop-up menu serta list, Anda wajib menggunakan Pop-
Up Menu Inspector dan List Inspector. Tampilan keduanya sama, yaitu
seperti gambar di bawah ini.

Gambar 8-21 Pop-Up dan List Inspector

Adapun atribut-atribut yang perlu diperhatikan di sini adalah :

x Name : Atribut ini dipakai untuk menamai pop-up dan list menu yang tadi
Anda letakkan. Wajib diisi mengingat script server-side akan menerima
data yang dikirim pop-up dan list menu berdasarkan nama ini.
x Rows : Atribut ini berguna untuk mengatur berapa lebar pop-up dan list
menu. Jika Anda mengisinya dengan nilai 1 maka hanya pilihan nomor
satu saja yang tampak di dalam halaman web. Sisanya baru bisa Anda
lihat jika Anda menekan tombol anak panah kecil dimana semua pilihan
akan dikeluarkan. Isilah nilai yang Anda inginkan ke dalam kotak Rows
.
x Multiple Selection : Atribut ini dipakai untuk merubah pop-up menu
menjadi list dan sebaliknya. Jika Anda mengklik check box multiple
selection maka pop-up menu menjadi list dan begitu juga sebaliknya. List

28
 bisa menerima pengambilan lebih dari satu pilihan sementara pop-up
menu tidak .

8.8.2. Memasukkan Pilihan ke dalam Pop-Up dan List

Menu
Jika atribut-atribut di atas telah Anda set dengan baik maka sekarang saatnya
untuk memasukkan pilihan-pilihan ke dalam pop-up dan list menu. Di dalam
HTML, pilihan-pilihan yang ada di dalam pop-up dan list menu diatur oleh
tag <option>.
Untuk memasukkan pilihan-pilihan ke dalam pop-up menu dan list menu kita
bisa gunakan Pop-up Inspector dan List Inspector seperti saat kita menset
atribut-atribut di atas.
Secara default, GoLive telah menyediakan tiga buah pilihan yang sudah
diletakkan ke dalam pop-up dan list menu. Hanya saja tiga buah pilihan itu
perlu dimodifikasi ulang. Ketiga pilihan itu diberi nama First, Second, dan
Third. Anda bisa lihat ketiga pilihan ini di dalam Inspector.

Gambar 8-22 Daftar Pilihan yang Nanti Akan Dimasukkan ke dalam Pop-Up
dan List Menu

Pilihan di atas harus diatur ulang agar sesuai dengan pilihan-pilihan Anda
sendiri. Untuk merubahnya, ikuti langkah-langkah berikut ini :
1. Klik-lah teks “First” sehingga ia dalam keadaan terblok.
2. Di bawahnya muncul tiga kotak baru. Kotak pertama, dalam wujud
check box, dipakai untuk mengatur apakah pilihan itu yang akan
dipilih secara otomatis. Kotak kedua untuk menamai pilihan. Kotak
ketiga untuk memasukkan nilai pada pilihan tersebut. Jika pilihan
yang bersangkutan diambil maka nilai tersebut yang akan dikirim ke
script server-side.

29
 3. Pada kotak kedua, ubahlah nama pilihan itu dengan nama Anda
sendiri. Pada kotak ketiga tentukan nilainya bagi pilihan tersebut.
Pada kotak pertama (check box) Anda bisa mengkliknya jika Anda
ingin pilihan itu berada dalam keadaan terpilih secara otomatis.

4. Lakukan langkah 1-3 untuk pilihan-pilihan yang lain.

5. Nama pilihan serta nilai yang Anda masukkan telah berpindah ke
kotak daftar pilihan seperti gambar berikut.

6. Jika Anda ingin membuat pilihan baru lagi, klik-lah tombol

dan lakukan langkah-langkah 1-3 di atas.
7. Jika Anda ingin menghapus salah satu pilihan maka pilihlah option
yang ingin Anda hapus pada daftar pilihan dan klik-lah tombol
.
8. Dan, bila Anda ingin menduplikat satu pilihan sehingga terbentuk
dua atau lebih pilihan yang sama maka pilihlah option yang akan
digandakan dan klik-lah tombol .
9. Pop-up dan List Menu Anda sudah diisi oleh data-data (pilihan-
pilihan).

8.9. Meletakkan Hidden

Hidden ini merupakan komponen form yang tidak tampak di halaman web
Anda namun ia sanggup mengirim data atau informasi ke script server-side.
Guna dari hidden ini adalah untuk mengirim data atau informasi yang bersifat
rahasia dan yang tidak bisa dilihat oleh pengunjung. Terkadang hidden ini

30
digunakan untuk mengirim nilai-nilai tertentu yang nantinya akan dipakai
oleh script server-side untuk melakukan tindakan tertentu.
Untuk meletakkan hidden ini ke dalam halaman web Anda, lakukan langkah-
langkah berikut ini :
1. Letakkan kursor di dalam kotak form.

2. Klik-lah icon Hidden .

3. Tulisan “H” kecil muncul di halaman web Anda yang menandakan
hidden field telah dimasukkan ke dalam halaman web Anda.

Hanya ada dua atribut yang penting yang ada di dalam hidden field ini, yaitu
name dan value, dimana Anda bisa mengaturnya lewat Hidden Inspector.
Kedua atribut itu berfungsi sama dengan atribut name dan value pada text-
field.

Gambar 8-23 Tampilan Hidden Inspector

8.10. Tombol Submit dan Reset

Dua komponen form yang akan kita bahas kali ini adalah Tombol Submit dan
tombol Reset. Tombol Submit dipakai untuk memerintah browser agar ia
mengirim data-data atau informasi yang telah dimasukkan pengunjung ke
dalam tiap-tiap komponen form ke file script-server side yang telah
dispesifikasikan terlebih dulu. Sedangkan tombol Reset dipakai untuk

31
menghapus semua data-data atau informasi yang telah dimasukkan ke dalam
semua komponen form. Tombol Reset ini dipakai jika seorang pengunjung
ingin mengganti data-data atau informasi-informasi yang tadi telah ia
masukkan tanpa perlu menghapus data-data yang lama satu per satu.
Untuk memasukkan tombol submit dan tombol reset ke dalam halaman web
kita, lakukan langkah-langkah berikut ini :
1. Letakkan kursor di dalam kotak form.

2. Klik-lah icon Submit Button atau Reset Button yang ada

di Object Pallete bagian Form Elements Pallete sebanyak dua kali.
Atau, klik-lah sekali kemudian seretlah ia ke dalam kotak form
halaman web.
3. Kini, tombol Submit dan Reset telah diletakkan di dalam halaman
web Anda.

Gambar 8-25 Tombol Submit dan Reset di Dalam Halaman Web

8.10.1. Mengatur Atribut Tombol Submit dan Reset

Meskipun atribut tombol submit dan reset tidak perlu dimodifikasi lebih
lanjut mengingat kedua tombol itu sudah bisa bekerja dengan baik tanpa
pangaturan sana sini namun agar tampilan kedua tombol itu sesuai dengan
harapan ada baiknya jika Anda melakukan pemodifikasian atribut.

32
Untuk memodifikasi, klik-lah tombol submit atau reset itu sehingga muncul
Submit atau Reset Inspector.

Gambar 8-26 Submit dan Reset Button Inspector

Ada beberapa atribut di sana, antara lain :

x Button : Bagian ini untuk menset satu tombol menjadi tombol lainnya,
seperti tombol Submit menjadi Reset dan sebaliknya atau tombol Submit
menjadi tombol Normal. Jika Anda telah meletakkan kedua tombol,
Submit dan Reset, ke dalam halaman web Anda maka pengubahan jenis
tombol dirasa tidak perlu dilakukan.
x Name : Name ini dipakai untuk menamai masing-masing tombol.
Bedanya dengan komponen form lainnya, Anda boleh tidak memberi
nama pada tombol Submit dan Reset.
x Label : Label dipakai untuk memberi tulisan yang nantinya akan tertera di
atas tombol Submit atau Reset. Secara default, tulisan yang tertera di atas
tombol submit adalah “Submit Query” sementara tombol reset adalah
“Reset”. Anda bisa menggantinya menjadi “Kirim” atau “Hapus” lewat
label ini .

8.11. Mengenal Tab Order

Tab order merupakan fasilitas yang ada di dalam HTML versi 4. Dengan
adanya tab order ini seorang pengunjung bisa berpindah dari satu komponen

33
ke komponen lainnya lewat urutan-urutan tertentu yang telah kita tentukan
terlebih dulu.
Jika Anda memiliki sederet komponen form seperti gambar di bawah ini
maka dalam prakteknya seorang pengunjung bisa berpindah dari satu
komponen ke komponen form lainnya dengan cara menekan tombol Tab.
Misalnya, apabila ia sudah selesai mengisi text-field “Nama” dan ingin
berpindah ke password-field maka cara terpraktis untuk berpindah adalah
dengan menekan tombol Tab yang ada di keyboard.

Gambar 8-24 Orang Bisa Berpindah Dari Satu Komponen Form

ke Komponen Form Selanjutnya dengan Menekan tombol Tab

Secara default, perpindahan dari satu komponen form ke komponen form

lainnya lewat tombol Tab dilakukan secara urut. Dari contoh di atas,
urutannya adalah sebagai berikut : Nama, Password, Komentar, Pilihan, dan
seterusnya.

34
Fasilitas Tab Order dipakai untuk mengacak urutan tersebut. Anda bisa
mengatur urutan perpindahan dari satu komponen form ke lainnya seperti ini :
Nama, Komentar, Banyaknya Roda, Password, dan terakhir check box yang
ada di bagian Pilihan. Dengan demikian menjadi tidak urut lagi.
Untuk melakukannya, lakukan langkah-langkah berikut ini :
1. Klik-lah komponen-komponen form di atas satu per satu mulai dari
Text-Field.
2. Di dalam masing-masing inspector komponen form di atas dapat

Anda temukan pilihan Tab

3. Isilah nomor urut untuk masing-masing komponen form di dalam
kotak Tab di atas. Sebagai contoh, text-field nomor 1, password
nomor 3, dan seterusnya.
4. Kini, urutan komponen form tersebut telah acak.

8.12. Mengenal Key

Anda bisa lihat bahwa di dalam Inspector text-field, password, text-area,
radio button, dan check box terdapat satu pilihan yang bernama Key. Pilihan
ini dipakai untuk mengatur perpindahan dari satu komponen form ke lainnya
lewat bantuan tombol keyboard. Sebagai contoh, jika Anda ingin berpindah
dari Nama ke Komentar secara mudah maka Anda bisa menggunakan tombol
Alt+Z. Jika tombol ini ditekan maka secara otomatis komponen form akan
melompat ke text-area Komentar.
Untuk menggunakannya, ikuti langkah-langkah berikut ini :
1. Klik-lah komponen form yang akan diberi key ini. GoLive
tampaknya hanya menyediakan fasilitas key ini untuk komponen
selain pop-up dan list menu saja.

2. Pada bagian Key masukkan satu buah huruf di sana.

3. Selanjutnya, pengunjung tinggal menggunakan tombol Alt plus
huruf yang Anda masukkan ke dalam kotak Key pada nomor 2.

35
8.13. Sampai Sejauh Ini . . .
Sampai sini Anda sudah bisa menciptakan halaman web yang interaktif
dengan meletakkan form beserta komponen-komponennya ke dalam halaman
tersebut. Namun Anda masih belum selesai sebab Anda harus membuat script
server-side yang bertugas untuk mengolah data-data yang dikirim oleh form
tersebut. Ada banyak buku tentang teknik pembuatan script server-side ini
dan beberapa diantaranya berbahasa Indonesia, seperti “ASP”, “PHP”, “Perl”,
atau lainnya.
Tampilan form dalam halaman web bisa dipercantik dengan memanfaatkan
tabel sebagai alat lay out-nya. Tampilannya seperti gambar di bawah ini.

Gambar 8-25 Tampilan Form dengan Bantuan Lay Out dari Tabel

36