Modul Pemrograman Web 1
BAB VIII
FORM
Form merupakan elemen HTML yang digunakan untuk :
§ Memperoleh feedback dari pengguna web
§ Memperoleh informasi pembelian secara online
§ Memperoleh data-data user baik nama, alamat, dan data lainya untuk
mendaftar pada service yang disediakan
<form action=”url” method=”get | post”>
………
………
</form>
url : lokasi file yang akan melakukan proses terhadap input dari form
method : menyatakan bagaimana masukan-masukan berasal dari form di kirimkan
kepada program CGI
Jenis masukan dalam Form :
§ Text : nilai yang dimasukkan dapat berupa angka atau teks
<input type=”text” name=”var1” size=n
maxlength=n value=….>
Value pada size menunjukkan besar text box
Value pada maxlength menunjukkan jumlah karakter maksimum yang dapat
ditampung.
§ Radio : menyediakan beberapa pilihan, hanya satu pilihan yang dapat dipilih.
<input type=”radio” name=”var1” value="... ">
pilihan 1
<input type=”radio” name=”var2” value=”..”>
pilihan 2
<input type=”radio” name=”var3”> pilihan 3
§ Checkbox : menyediakan beberapa pilihan, dapat lebih dari satu pilihan
<input type=”checkbox” name=”var1” value=" "
checked>pilihan 1
<input type=”checkbox” name=”var2”>pilihan 2
<input type=”checkbox” name=”var3”>pilihan 3
S1 Teknik Informatika
1
Modul Pemrograman Web 1
§ List atau Dropdown box : menyediakan pilihan dalam bentuk list.
<select name=”var” size=n>
<option value=”… ”>pilihan 1</option>
<option value=” … ”>pilihan 2</option>
<option value= “ … “ selected>pilihan 3
</select>
§ Textarea : memasukkan data dalam bentuk teks berupa memo.
<textarea name=”var” cols=”n” rows=”n”> …
</textarea>
Cols : besar kolom
Rows : banyaknya baris
§ Button : digunakan untuk melakukan pemrosesan form, sehingga membuat
form lebih interaktif. Pada saat button ditekan script yang ada dalam file lain
akan dipanggil untuk melakukan proses selanjutnya. Tombol button terdiri
dari : submit dan reset.
<input type=”submit” value=” … “>
<input type=”reset” value=” … “>
Latihan 1
<html>
<head><title>Latihan Dengan Objek Text</title></head>
<body>
<!--NIM, NAMA, JENIS KELAMIN, AGAMA, STATUS, JURUSAN,
KOMENTAR.-->
<form>
<H1> Form Pendaftaran</H1><hr>
<PRE>
NIM : <input type="text" size="11" name="nim">
NAMA : <input type="text" size="25" name="nama">
JENIS KELAMIN : <input type="radio" name="jkel"
value="Pria">Pria <input type="radio" name="jkel"
value="Wanita">Wanita
S1 Teknik Informatika
2
Modul Pemrograman Web 1
AGAMA : <select name=agama>
<option value="Islam">Islam</option>
<option value="Katoholik">Katholik</option>
<option value="Kristen">Kristen</option>
<option value="Hindu">Hindu</option>
<option value="Budha">Budha</option>
</select>
STATUS : <input type="radio" name="status"
value="kawin">Kawin <input type="radio" name="status"
value="belumkawin">Belum Kawin
JURUSAN : <select name="jurusan" Size="1">
<option value ="Teknik Informatika"> Teknik
Informatika </option>
<option value ="Manajemen Informatika">
Manajemen Informatika </option>
<option value ="Teknik Komputer"> Teknik
Komputer </option>
<option value ="Teknik Industri"> Teknik
Industri </option>
<option value ="Teknik Elektro"> Teknik
Elektro </option>
<option value ="Teknik Sipil"> Teknik Sipil
</option>
<option value ="Teknik Arsitektur"> Teknik
Arsitektur </option>
<option value ="Teknik Perencanaan Wil. Kota
"> Perencanaan Wil. Kota </option>
</select>
KETERANGAN:
<textarea name="ket" rows="3"
cols="30"></textarea>
</PRE>
<BR>
<input type="button" value="kirim">
<input type="reset" value="ulang">
</form>
</body>
</html>
S1 Teknik Informatika
3
Modul Pemrograman Web 1
Tampilan Browser :
Latihan 2
q Buatlah form dengan tampilan seperti dibawah ini, gunakan fasilitas tabel
agar tampilan rapi
S1 Teknik Informatika
4
Modul Pemrograman Web 1
S1 Teknik Informatika
5
