PERTEMUAN VFORM

I. BEKERJA DENGAN TAG <FORM>Macam-macam kontrol dalam Form :

Teks baris tunggal, untuk memasukan data angka dan teks Teks banyak baris, untuk memasukan beberapa baris teks yang dapat digulung naik dan

turun. Teks password, untuk memasukan password yang ditampilkan dengan tanda bintang. Teks tersembunyi, untuk menyembunyikan teks dari yang diketikan dari pandangan

pembaca. Tombol Submit dan Reset, untuk mengirimkan data yang dimasukan pembaca ke web atau

membatalkannya Checkbox, memungkinkan pembaca untuk menggunakan kotak cek. Radio button, untukmemilih salah satu pilihan dari sekelompok pilihan yang tersedia Daftar menu, memungkinkan pembaca memilih satu atau lebih pilihan dari daftar menu

A. TAG<FORM> Sebuah form dibentuk dengan menggunakan pasangan tag <FORM> </FORM>. Setiap elemen

form harus mempunyai dua buah atribut METHOD dan ACTION. METHOD : cara mengirimkan data yang dimasukan pembaca ke web server ACTION : URL dari script yang dipanggil oleh form tersebut.

Contoh :<FORM action=http://homepage.com/prog/adduser method=”post”>…isi form…</FORM>

B. <TEXTAREA> Untuk memberikan kesempatan pada pembaca untuk memasukan informasi teks pada lebih

dari satu baris. Ditampilkan dengan panjang 4 baris dan lebar 40 karakter dalam keadaan kosong. Ada beberapa atribut untuk tag ini : NAME : memberi nama pada text area ROWS : mengatur panjang baris/tinggi text area COLS : mengatur lebar kolom text area Default Teks : Default teks yang ditampilkan sebagai default pada text areaContoh : <FORM action=http://homepage.com/prog/adduser method=”post”><TEXTAREA NAME=”comments” ROW=4 COLS=40>Isi komentar anda disini……</TEXTAREA></FORM>

C. <SELECT> Untuk membuat menu-menu pilihan dalam suatu daftar pop-up. Beberapa pilihan untuk tag ini

adalah : NAME : untuk mendefinisikan nama untuk daftar pilihan SIZE : menyatakan jumlah baris yang muncul pada form.

1

MULTIPLE : memungkinkan menu bertindak seperti checkbox, sehingga pembaca dapat memilih lebih dari satu pilihan

D. <OPTION>Untuk membuat menu-menu pilihan dalam suatu daftar pull-down. Atribut yang digunakan :

VALUE : menyatakan nilai yang akan dikembalikan jika suatu item dipilih SELECTED : menyatakan pilihan default. Jika tidak ditentukan, pilihan pertama

yang dijadikan default.Contoh :<FORM action=http://homepage.com/prog/adduser method=”post”><SELECT NAME=”network”>

<OPTION SELECTED VALUE=”ethernet”>Ethernet<OPTION VALUE=”token16”>Token Ring-16MB<OPTION VALUE=”token4”>Token Ring-4MB<OPTION VALUE=”localtalk”>LocalTalk

</SELECT></FORM>

E. <INPUT> Untuk membuat kontrol kotak teks yang terdiri dari satu baris check box, radio button, tombol

submit dan reset, teks tersembunyi dan password. Atribut yang digunakan :- CHECKED : digunakan pada TYPE=CHECKBOX dan TYPE=RADIO yang

menyatakan suatu item dipilih atau tidak- MAXLENGTH : menyatakan jumlah maksimal karakter yang dapat dimasukan- NAME : memberikan nama dari kontrol pada form. - SIZE : menyatakan ukuran dari kontrol- TYPE : menyatakan jenis kontrol yang digunakan seperti TEXTAREA, CHECKBOX,

TEXTBOX dan sebagainya- VALUE : menyatakan nilai default untuk suatu kontrol.

Kontrol TeksDalam bentuk kotak teks yang digunakan untuk memasukan data teks.Contoh :

<FORM action=http://homepage.com/prog/adduser method=”post”>Masukan No. Telepon: <INPUT TYPE=”text” NAME=”Telpon” SIZE=”15” MAXLENGTH=”12”></FORM>

2

Kontrol PasswordMemberikan keamanan dalam pemasukan data.Contoh :

<FORM action=http://homepage.com/prog/adduser method=”post”>Masukan Password: <INPUT TYPE=Password NAME=”Rahasia” SIZE=”30” MAXLENGTH=”30”></FORM>

Kontrol CheckboxKotak kecil yang menampilkan tanda √ jika kotak tersebut diklik.Contoh :

<FORM action=http://homepage.com/prog/adduser method=”post”><INPUT TYPE=checbox NAME=”checkbox1” VALUE=”checkbox_nilai1”>Kotak Checkbox<INPUT TYPE=checbox NAME=”checkbox2” VALUE=”checkbox_nilai2” CHECKED>Kotak checkbox default</FORM>

Kontrol Radio ButtonKontrol yang hanya dapat mempunyai satu nilai dari beberapa kemungkinan nilai-nilai lainnya.Contoh :

Form #1:<FORM action=http://homepage.com/prog/adduser method=”post”><INPUT TYPE=radio NAME=”pilih” VALUE=”pilihan1”>Ya<INPUT TYPE=radio NAME=”pilih” VALUE=”pilihan2”>Tidak</FORM>Form #2:<FORM action=http://homepage.com/prog/adduser method=”post”><INPUT TYPE=radio NAME=”pilih” VALUE=”pilihan1” CHECKED>Ya<INPUT TYPE=radio NAME=”pilih” VALUE=”pilihan2”>Tidak</FORM>

3

Tombol ResetDigunakan jika pembaca ingin menghapus atau mengulangi pemasukan data.Contoh :

<FORM action=http://homepage.com/prog/adduser method=”post”><INPUT TYPE=reset><BR><BR><BR><INPUT TYPE=reset VALUE=Hapus_Form_ini!></FORM>

Tombol SubmitDigunakan jika pembaca ingin mengirimkan pemasukan data.Contoh :

<FORM action=http://homepage.com/prog/adduser method=”post”><INPUT TYPE=”submit”><BR><BR><BR><INPUT TYPE=”submit VALUE=”Kirim data ini!”></FORM>

4

F. TAG LINE BREAKTag <BR> digunakan untuk pindah ke baris berikutnya.

Contoh :<FORM action=http://homepage.com/prog/adduser method=”post”>Nama: <INPUT NAME=”nama” SIZE=”15” ><BR>Alamat E-mail: <INPUT NAME=”email” SIZE=”25” ></FORM>

G. TAG PRETag <PRE> atau Preformatted text digunakan untuk menampilkan teks seperti diketikan

dalam dokumen HTML.Contoh :<FORM action=http://homepage.com/prog/adduser method=”post”><PRE>Nama : <INPUT TYPE=”text” NAME=”nama” SIZE=”15” >Alamat: <INPUT TYPE=”text” NAME=”alamat” SIZE=”25” >Email : <INPUT TYPE=”text” NAME=”email” SIZE=”15” >Kota : <INPUT TYPE=”text” NAME=”kota” SIZE=”30” ></PRE> </FORM>

H. TABEL DALAM FORMPenggunaan tabel mempunyai efek yang sama dengan penggunaan tag <PRE>.

Penggunaan tabel lebih disarankan untuk mengatur field-field karena lebih tepat pengaturannya, dengan tabel dapat diatur gambar, link ke alamat atau elemen html lain.Contoh :<FORM action=http://homepage.com/prog/adduser method=”post”><TABLE><TR><TD>Nama:</TD><TD><INPUT TYPE=”text” NAME=”nama” SIZE=”15”></TD></TR><TR><TD>Alamat:</TD><TD><INPUT TYPE=”text” NAME=”alamat” SIZE=”25”></TD></TR><TR><TD>Email:</TD><TD><INPUT TYPE=”text” NAME=”email” SIZE=”15”></TD></TR><TR><TD>Kota:</TD><TD><INPUT TYPE=”text” NAME=”kota” SIZE=”30”></TD></TR></TABLE> </FORM>

5

I. FORM DENGAN PARAGRAPH MARKJika anda mempunyai form yang dibagi menjadi beberapa bagian, gunakan tag paragraf

<P>…</P>. Tag ini akan mengatur perataan field.Contoh :<FORM action=http://homepage.com/prog/adduser method=”post”><PRE><I><B>Optional:</B></I>Nama: <INPUT TYPE=”text” NAME=”nama” SIZE=”15” >Alamat: <INPUT TYPE=”text” NAME=”alamat” SIZE=”25” ></PRE><P>Komentar anda:<BR><TEXTAREA ROWS=”6” COLS=”70”></TEXTAREA></FORM>

J. MENGGUNAKAN TAG LISTProgram yang menampilkan daftar pilihan dengan menggunakan tag list, penggunaannya

hampir sama dengan list sebelumya.Contoh :<FORM action=http://homepage.com/prog/adduser method=”post”>Sebutkan 3 buku bacaan favoritmu ?<OL><LI><INPUT NAME=”no1” SIZE=”15” ><LI><INPUT NAME=”no2” SIZE=”15” ><LI><INPUT NAME=”no3” SIZE=”15” ></OL></FORM>

6

K. CHECKBOX DAN RADIO BUTTONContoh checkbox :<FORM action=http://homepage.com/prog/adduser method=”post”><DL><DT>Komputer jenis apa yang anda pakai ?<DD><INPUT NAME=”mac” TYPE=checkbox>Macintosh<DD><INPUT NAME=”pc” TYPE=checkbox>IBM Compatible PC

<DL><DT>UNIX Workstation<DD><INPUT NAME=”sun” TYPE=checkbox>Sun<DD><INPUT NAME=”sgi” TYPE=checkbox>SGI<DD><INPUT NAME=”next” TYPE=checkbox>NeXT</DL>

</DL> </FORM>

Contoh checkbox ganda :<FORM action=http://homepage.com/prog/adduser method=”post”>Pilih kombinasi yang anda suka ?<TABLE><TR><TD></TD><TD>Red</TD><TD>Blue</TD><TR><TD>SMALL</TD><TD><INPUT NAME=”sr” TYPE=checkbox></TD>

<TD>><INPUT NAME=”sb” TYPE=”checkbox”></TD></TR><TR><TD>MEDIUM</TD><TD><INPUT NAME=”mr” TYPE=checkbox></TD>

<TD>><INPUT NAME=”mb” TYPE=”checkbox”></TD></TR><TR><TD>LARGE</TD><TD><INPUT NAME=”lr” TYPE=checkbox></TD>

<TD>><INPUT NAME=”lb” TYPE=checkbox></TD></TR></TABLE></FORM>

7

Contoh radio button :<FORM action=http://homepage.com/prog/adduser method=”post”>Baju anda ukuran berapa ?<BR><INPUT NAME=”size” TYPE=radio VALUE=”sm”>Small<INPUT NAME=”size” TYPE=radio VALUE=”md”>Medium<INPUT NAME=”size” TYPE=radio VALUE=”lg”>Large</FORM>

L. MULTIPLE FORM DALAM DOCUMENTSatu dokumen bisa berisi beberapa form. Hal ini membuat dokumen menjadi lebih ringkas

dan lebih mudah dimengerti. Contoh penggunaan beberapa form dengan sejumlah metode proses yang berbeda, dari satu form ke form lain dapat digunakan elemen <FORM> dimana setiap form mempunyai proses yang berbeda. Dalam penggunaan beberapa form, sebaiknya setiap form diberi garis pemisah dengan menggunakan tag <HR>, gambar garis seni dengan menggunakan tag <IMG>.Contoh :<HTML><HEAD><TITLE>CONTOH FORM></TITLE></HEAD><BODY BGCOLOR=LIGHTGREY><FORM action=http://homepage.com/prog/adduser method=”post”>Baju anda ukuran berapa ?<BR><INPUT NAME=”size” TYPE=radio VALUE=sm>Small<INPUT NAME=”size” TYPE=radio VALUE=md>Medium<INPUT NAME=”size” TYPE=radio VALUE=lg>Large<P><INPUT TYPE=submit VALUE=Kirim_data_ini!></FORM><HR>

8

<FORM action=http://homepage.com/prog/adduser method=”post”><TABLE><TR><TD>NAMA :</TD><TD><INPUT TYPE=”text” NAME=”nama” SIZE=”50”></TD></TR><TR><TD>E-Mail :</TD><TD><INPUT TYPE=”text” NAME=”e-mail” SIZE=”50”></TD></TR><TR><TD>ALAMAT :</TD><TD><INPUT TYPE=”text” NAME=”alamat” SIZE=”30”></TD></TR><TR><TD>KOTA :</TD><TD><INPUT TYPE=”text” NAME=”kota” SIZE=”50”></TD></TR></TABLE><P><INPUT TYPE=submit VALUE=Kirim_data_ini!></FORM><HR><FORM action=http://homepage.com/prog/adduser method=”post”><DL><DT>Pilih cara pembayarannya ?<DD><INPUT NAME=”bayar” TYPE=radio VALUE=”cash” CHECKED>Cash<DD><INPUT NAME=”bayar” TYPE=radio VALUE=”cash” CHECKED>Cash<DD><INPUT NAME=”bayar” TYPE=radio VALUE=”check”>Check<DD><INPUT NAME=”bayar” TYPE=radio VALUE=”debit”>Debit Card<DL><DT>Credit Card<DD><INPUT NAME=”bayar” TYPE=radio VALUE=”mc”>Mastercard<DD><INPUT NAME=”bayar” TYPE=radio VALUE=”visa”>Visa<DD><INPUT NAME=”bayar” TYPE=radio VALUE=”disc”>Discover

</DL></DL> <P><INPUT TYPE=submit VALUE=Kirim_data_ini!></FORM></BODY</HTML>

M. KOMBINASI FORM DENGAN TABELForm bisa digunakan bersama tabel, untuk memudahkan posisi field-field yang berbeda

ukurannya. Berikut contoh program tentang form alamat dengan menggunakan tabel untuk mengatur field.

9

Contoh :<FORM action=http://homepage.com/prog/adduser method=”post”><TABLE><TR><TD ALIGN=RIGHT>NAMA :</TD><TD COLSPAN=4><INPUT TYPE=”text” NAME=”nama” SIZE=”50”></TD></TR><TR><TD ALIGN=RIGHT>ALAMAT :</TD><TD COLSPAN=4><INPUT TYPE=”text” NAME=”alamat” SIZE=”50”></TD></TR><TR><TD ALIGN=RIGHT>KOTA, KODE POS :</TD><TD COLSPAN=4><INPUT TYPE=”text” NAME=”kota” SIZE=”50”></TD><TD>,</TD><TD><INPUT TYPE=”text” NAME=”kd_pos” SIZE=”15”></TD><TR></TABLE></FORM>

N. LABELElemen label digunakan untuk menspesifikasikan label. LABEL mempunyai atribut for

untuk mengelompokan label yang telah didefinisikan. Nilai atribut ini sama dengan atribut id pada elemen INPUT. Contoh program di bawah membuat tabel dengan dua teks kontrol dan kelompok label. Setiap label dikumpulkan dalam satu teks input.Contoh :<FORM action=http://homepage.com/prog/adduser method=”post”><P><LABEL for=”nama_d”>NAMA DEPAN :</LABEL><INPUT TYPE=”text” id=”nama_d”><BR><LABEL for=”nama_b”>NAMA BELAKANG :</LABEL><INPUT TYPE=”text” id=”nama_b”><BR><LABEL for=”email”>E-MAIL :</LABEL><INPUT TYPE=”text” id=”email”><BR><INPUT TYPE=radio NAME=”sex” VALUE=Wanita>Wanita<BR><INPUT TYPE=radio NAME=”sex” VALUE=Pria>Pria<BR><INPUT TYPE=submit VALUE=Send><INPUT TYPE=reset></P> </FORM>

10

O. ATRIBUT TABINDEXAtribut tabindex digunakan untuk mengurutkan label yang dimasukan oleh pengguna.

Fungsinya sama seperti index yang lain, yaitu mengurutkan berdasarkan kunci atau urutan tertentu. Atribut ini mempunyai nilai antara 0 – 32767 yang berguna sebagai label pengurutan. Nilai yang digunakan sebagai pengurutan dimulai dari angka kecil ke angka besar. Pemakaian umum atribut ini : Tabindex=nilai

Elemen yang mendukung atribut tabindex adalah A, AREA, BUTTON, INPUT, OBJECT, SELECT dan TEXTAREA.Contoh :<BODY>…teks…teks…<P> Go to the<A tabindex=”10” href=”http:\//www.w3.org/”>W3W Website.</A>…isi yang lain..<BUTTON TYPE=button NAME=”database” TABINDEX=”1” ONCLICK=”database”>database disini</BUTTON>…isi yang lain…<FORM ACTION=”…” METHOD=”post”><P><INPUT TABINDEX=”1” TYPE=”text” NAME=”field1”><INPUT TABINDEX=”2” TYPE=”text” NAME=”field2”><INPUT TABINDEX=”3” TYPE=”submit” NAME=”submit”></P></FORM></BODY>

P. ELEMEN FIELDSET DAN LEGENDElemen Fieldset digunakan untuk menghubungkan kontrol dan label. Group kontrol akan

membantu pengguna untuk memahami fungsinya. Elemen LEGEND untuk memberi judul pada FIELDSET. Pemakaian umum FIELDSET dan LEGEND adalah :

<FIELDSET><LEGEND>…judul kelompok label…</LEGEND>…isi dengan kontrol dan label…</FIELDSET>

Posisi LEGEND dapat diatur dengan atribut ALIGN dan mempunyai nilai top, bottom, left dan right. Pemakaian atribut ALIGN dan nilainya : align=top|bottom|left|right

Top : judul berada dibagian atas fieldset. Ini merupakan nilai default Bottom : judul berada dibagian bawah fieldset Left : judul berada disisi kiri fieldset Right : judul berada disisi kanan fieldset

11

Contoh :<FORM action=http://homepage.com/prog/adduser method=”post”><P><FIELDSET><LEGENDdata Pribadi Pasien</LEGEND>NAMA DEPAN :<INPUT TYPE=”text” id=”nama_d” TABINDEX=”1”>NAMA BELAKANG :<INPUT TYPE=”text” id=”nama_b” TABINDEX=”2”>ALAMAT :<INPUT TYPE=”text” id=”alamat” TABINDEX=”3”>…..Keterangan lain……..</FIELDSET><BR><FIELDSET><LEGEND>Riwayat Kesehatan</LEGEND> <INPUT NAME=”sej_sakit” TYPE=checkbox VALUE=”cacar” TABINDEX=”20”>Cacar <INPUT NAME=”sej_sakit” TYPE=checkbox VALUE=”Gondok” TABINDEX=”21”>Gondok <INPUT NAME=”history_illness” TYPE=checkbox VALUE=”TBC” TABINDEX=”22”>TBC <INPUT NAME=”sej_sakit” TYPE=checkbox VALUE=”Batuk_rejan” TABINDEX=”23”>Batuk Rejan…lainnya…</FIELDSET><BR><FIELDSET><LEGEND>Sakit yang diderita</LEGEND>Apakah anda sedang menjalani pengobatan ?<INPUT TYPE=radio NAME=”pengobatan” VALUE=”Ya” TABINDEX=”35”>Ya<INPUT TYPE=radio NAME=”pengobatan” VALUE=”Tidak” TABINDEX=”35”>Tidak<BR>Jika anda sedang menjalani pengobatan, ketik perawatan dan pengobatan :<TEXTAREA NAME=”perawatan” ROWS=”8” COLS=”70” TABINDEX=”40”></TEXTAREA></FIELDSET><INPUT TYPE=submit VALUE=”kirim”><INPUT TYPE=”reset” VALUE=”hapus”></FORM>

12