54
X. FORM
Form merupakan elemen HTML yang digunakan untuk mendapatkan masukan atau input dari pengguna web. Adapun sintax dari form adalah :
<FORM ACTION = “url” METHOD=”get|post” ENCTYPE=“”> </FORM>
atribut ACTION : menyatakan alamat url (url address) yang akan dipakai sebagai pemroses data input form.URL adalah lokasi dokumen yang akan melakukan proses terhadap input dari form.
Atribut METHOD : untuk menyatakan bagaimana masukan atau input yang berasal dari form dikirimkan ke program aplikasi CGI ( program aplikasi yang dapat dijalankan oleh server web).
Dalam form terdapat beberapa tipe masukan antara lain :
Text
Radio button
Check box
Button
Text area , dllTiap-tiap jenis input atau masukan dinyatakan dengan atribut type dalam HTML.
10.1 Input T e x t
Digunakan untuk memasukkan suatu nilai untuk dikirimkan kepada server. Nilai yang dimasukkan dapat berupa angka maupun teks. Adapun format atau sintax dari input text adalah :
<FORM ACTION = “url” METHOD=”get|post” ENCTYPE=“”>
<input type =”text” name = “nama_var” size = “panjang_text”> </FORM>
atribut name : untuk membuat nama variabel sebagai tempat menyimpan teks atribut size : untuk menyatakan panjang teks
Berikut ini adalah contoh dokumen HTML tentang form dengan input text (listing 10.1). Hasilnya dapat dilihat dalam gambar 10.1
<!--form teks--> <html>
<body> <form> Nama :
<input type="text" name ="nama" size="10"> <br>
Alamat :
55 </form> </body> </html> 10.2 Input C h e c k b o x
Digunakan untuk memasukkan suatu nilai lewat beberapa pilihan. Kita bisa memilih satu atau lebih pilihan yang disediakan. Adapun format atau sintax dari input check box adalah :
<FORM ACTION = “url” METHOD=”get|post” ENCTYPE=“”>
<input type =”checkbox” name = “nama_var-1” [checked]>nama_pilihan-1 <input type =”checkbox” name = “nama_var-2” [checked]>nama_pilihan-2 <input type =”checkbox” name = “nama_var-n” [checked]>nama_pilihan-n </FORM>
atribut name : untuk membuat nama variabel sebagai tempat menyimpan pilihan
atribut checked : bersifat optional, jika kita menuliskan atribut ini maka kita memilih variabel tersebut
Berikut ini adalah contoh dokumen HTML tentang form dengan input check box (listing 10.2). Hasilnya dapat dilihat dalam gambar 10.2
<!--form checkbox--> <html>
<body> HOBI <form>
<input type="checkbox" name ="T" checked>Tenis <br>
<input type="checkbox" name ="J">Jogging <br>
<input type="checkbox" name ="R">Renang <br>
<input type="checkbox" name ="B">Basket</form> </body>
</html>
Listing 10.1 Form_text.htm
Gambar 10.1 Hasil eksekusi Form_text.htm
10.Form Pemrograman Web
56
10.3 Input R a d i o b u t t o n
Hampir sama dengan check box, radio button (tombol radio) digunakan untuk memasukkan suatu nilai lewat beberapa pilihan. Kita hanya bisa memilih satu pilihan dari beberapa pilihan. Adapun format atau sintax dari input radi o button adalah :
<FORM ACTION = “url” METHOD=”get|post” ENCTYPE=“”>
<input type =”radio” name = “nama_var” [checked]>nama_pilihan-1 <input type =”radio” name = “nama_var” [checked]>nama_pilihan-2 <input type =”radio” name = “nama_var” [checked]>nama_pilihan-n </FORM>
atribut name : untuk membuat nama variabel sebagai tempat menyimpan pilihan
atribut checked : bersifat optional, jika kita menuliskan atribut ini maka kita memilih variabel tersebut
Berikut ini adalah contoh dokumen HTML tentang form dengan input radio button (listing 10.3). Hasilnya dapat dilihat dalam gambar 10.3
<!--form checkbox--> <html>
<body> AGAMA <form>
<input type="radio" name ="agm" checked>Hindu <br>
<input type="radio" name ="agm" >Islam <br>
<input type="radio" name ="agm" >Kristen <br>
<input type="radio" name ="agm" >Budha </form>
</body> </html>
Gambar 10.2 Hasil eksekusi Form_cbox.htm
57
10.4 Input B u t t o n
Digunakan untuk mendefinisikan tombol untuk melakukan pemrosesan form. Ada 2 macam tipe button yaitu : Submit dan Reset. Tombol Submit dipakai untuk memanggil url setelah input selesai dimasukkan. Sedangkan tombol Reset digunakan untuk menginisialisasi setiap elemen pada form.Adapun format atau sintax dari input button submit dan reset
adalah :
<FORM ACTION = “url” METHOD=”get|post” ENCTYPE=“”> <input type =”submit” value = “teks” >
<input type =”reset” value = “teks” > </FORM>
atribut value : untuk menampilkan teks sebagai nama tombol teks : teks judul dari tombol
Berikut ini adalah contoh dokumen HTML tentang form dengan input button submit dan reset (listing 10.4). Hasilnya dapat dilihat dalam gambar 10.4
<!--form button--> <html>
<body>
<form action="form_action.asp" method = "get"> Masukkan nama :
<input type="text" name ="nama"> <br>
Masukkan alamat :
<input type="tex" name ="alm"> <br>
<input type="submit" value ="kirim"> <input type="reset" value ="reset"> </form>
</body> </html>
Gambar 10.3 Hasil eksekusi Form_radio.htm
10.Form Pemrograman Web
58
10.5 Input D r o p d o w n b o x
Digunakan untuk memasukkan suatu nilai lewat beberapa pilihan.Adapun format atau sintax dari input Dropdown box adalah :
<FORM ACTION = “url” METHOD=”get|post” ENCTYPE=“”> <select name = “nama_var” >
<option value = “nama_option-1” [selected]>option-1 <option value = “nama_option-2” [selected]>option-2
…
<option value = “nama_option-n” [selected]>option-n </select>
</FORM>
Berikut ini adalah contoh dokumen HTML tentang form dengan input dropdown box (listing 10.5). Hasilnya dapat dilihat dalam gambar 10.5
<!--form drop down--> <html>
<body>
Merek mobil yang anda suka : <form >
<select name ="cars"> <option value ="volvo">Volvo <option value ="toyota">toyota <option value ="fiat" selected>fiat <option value ="audi">audi </select>
</form> </body> </html>
Gambar 10.4 Hasil eksekusi Form_button.htm
59
10.6 Input t e x t a r e a
Digunakan untuk memasukkan suatu data berupa teks atau memo.Adapun format atau sintax dari input text area adalah :
<FORM ACTION = “url” METHOD=”get|post” ENCTYPE=“”> <textarea rows = “nilai” cols = “nilai” >
…teks_informasi… </textarea> </FORM>
Berikut ini adalah contoh dokumen HTML tentang form dengan input text area
(listing 10.6). Hasilnya dapat dilihat dalam gambar 10.6.
<!--form text area--> <html>
<body> Keterangan <form>
<textarea rows="5" cols="50">
Pendidikan terakhir S2 Program Magister
Ilmu komputer di Universitas Gadjah Mada Jogyakarta </textarea>
</form> </body> </html>
Gambar 10.5 Hasil eksekusi Form_dropdown.htm
10.Form Pemrograman Web
60
10.7 Input I m a g e
Digunakan untuk mengganti tombol (button), berupa tombol yang berbentuk gambar.Adapun format atau sintax dari input image adalah :
<FORM ACTION = “url” METHOD=”get|post” ENCTYPE=“”> <input type = “image” src=”url_address”>
</FORM>
s r c : alamat url dari file gambar yang akan dipakai.
Berikut ini adalah contoh dokumen HTML tentang form dengan input image (listing 10.7). Hasilnya dapat dilihat dalam gambar 10.7.
<!--form button image--> <html>
<body>
<form action="form_action.asp" method = "get"> Masukkan nama :
<input type="text" name ="nama"> <br>
Masukkan alamat :
<input type="text" name ="alm"> <br>
<input type="image" src="../gambar/usa.gif"> </form>
</body> </html>
Gambar 10.6 Hasil eksekusi Form_textarea.htm
61