1

PERTEMUAN V FORM 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 area Contoh : <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.

D.

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

<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 Teks Dalam 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>

Kontrol Password Memberikan 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 Checkbox Kotak 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 Button Kontrol 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>

Tombol Reset Digunakan 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 Submit Digunakan 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>

F. TAG LINE BREAK Tag <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 PRE Tag <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 : Alamat: Email : Kota : </PRE> </FORM> <INPUT <INPUT <INPUT <INPUT TYPE=text TYPE=text TYPE=text TYPE=text NAME=nama SIZE=15 > NAME=alamat SIZE=25 > NAME=email SIZE=15 > NAME=kota SIZE=30 >

H. TABEL DALAM FORM Penggunaan 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>

I. FORM DENGAN PARAGRAPH MARK Jika 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 LIST Program 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 <OL> <LI><INPUT <LI><INPUT <LI><INPUT </OL> </FORM> buku bacaan favoritmu ? NAME=no1 SIZE=15 > NAME=no2 SIZE=15 > NAME=no3 SIZE=15 >

K. CHECKBOX DAN RADIO BUTTON Contoh 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>

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 DOCUMENT Satu 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>

<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 TABEL Form bisa digunakan bersama tabel, untuk memudahkan posisi field-field yang berbeda ukurannya. Berikut contoh program tentang form alamat dengan menggunakan tabel untuk mengatur field.

10

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. LABEL Elemen 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>

11

O. ATRIBUT TABINDEX Atribut 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> teksteks <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 LEGEND Elemen 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

12

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>