BAB-12 MEMBUAT FORM HTML 12.1. Form HTML Form HTML digunakan untuk mendapatkan masukan (input) dari pengguna Web. Pengguna Web dapat memasukkan input melalui halaman-halaman HTML. Elemen/tag Form digunakan untuk membatasi input. Dalam satu form dapat terdiri dari beberapa form, akan tetapi hanya satu form yang dapat dikirimkan ke server dalam satu saat. Dengan Form kita dapat berinteraksi langsung dengan pengunjung, misalnya menerima komentar mereka, membuat pooling pertanyaan, membuat registrasi online, serta aneka kegunaan lainnya. Namun hingga saat ini HTML belumlah mendukung interface yang memungkinkan Form bekerja sesuai fungsinya. Form baru bisa bekerja jika kita menggabungkannya dengan bahasa pemrograman lainnya yang mendukung CGI (Common Gateway Interface). Bahasa pemrograman yang telah mendukung CGI misalnya : ASP, Perl, JAVA, Python, JSP, PHP, C/C++, dan Visual Basic. Adapun sintaks dari form adalah : <form action= url method= get/post > </form> Atribut Action tempat menspesifikasikan URL yang akan digunakan sebagai pemroses field input form. URL adalah lokasi dokumen yang akan melakukan proses terhadap input dari form. Method merupakan atribut yang digunakan untuk menyatakan bagaimana masukanmasukan berasal dari form dikirimkan ke server. 12.2. Jenis Masukan dalam Form Jenis-jenis masukan dalam satu formulir dapat dibedakan : Jenis Masukan Text Bentuk Tag/perintah Keterangan <input type= text name= var1 size=# maxlenght=#> Digunakan untuk memasukkan suatu nilai untuk dikirimkan ke server. Nilai yang dimasukkan dapat berupa angka atau teks. Merancang Halaman Website dengan Script HTML 88
Radio Checkbox List/Select Button Textarea Password Image <input type= radio name= var2 >pilihan <input type= checkbox name= var3 >pilihan <select name= var4> <option>pilihan1 <option>pilihan2 <input type= submit value= var5 > <input type= reset value= var6 > <textarea cols= 55 rows= 3 </textarea> <input type= password name= vpass > <input type= image src= nama_image height=30 width=75> berupa beberapa pilihan, hanya satu pilihan yang bisa dipilih. berupa beberapa pilihan, bisa memilih lebih dari satu pilihan. berupa List dari beberapa pilihan, dan hanya satu pilihan yang bisa dipilih. Digunakan untuk mendefinisikan tombol untuk melakukan pemrosesan form. Ada beberapa macam tombol yaitu Submit (untuk memanggil URL, setelah dimasuk-kan data. Reset (untuk menginisialisasi setiap form). dalam bentuk teks yang panjang (berupa memo). berupa password Image (sebagai pengganti button yang berbentuk gambar). 12.3. Method Post dan Get Method Post dan Get adalah suatu proses untuk mengirimkan data dari halaman input ke halaman output. Berikut adalah contoh bagaimana data yang dikirim dari halaman yang dibuat oleh HTML kemudian diproses oleh PHP. a. Contoh Method Get File-1 : input-1.html <html> <body> <form action="output-1.php" method="get"> Nama Anda : <input type=text name=vnama><br> Umur Anda : <input type=text name=vumur><br> <input type=submit value=submit> <p>jika data telah diisi, lalu tekan tombol "Submit", maka data akan dikirimkan ke page baru yaitu file output-1.php</p> </form> </body> </html> Merancang Halaman Website dengan Script HTML 89
b. Contoh Method Post File-2 : input-2.html <html> <body> <form action="output-2.php" method="post"> Nama Anda : <input type=text name=vnama><br> Umur Anda : <input type=text name=vumur><br> <input type=submit value=submit> <p>jika data telah diisi, lalu tekan tombol "Submit", maka data akan dikirimkan ke page baru yaitu file output-2.php</p> </form> </body> </html> Catatan : Jika Anda menggunakan parameter method Get, maka paramater akan ditampilkan di URL, namun apabila Anda menggunakan method Post, tidak akan ditampilkan di URL. Untuk data yang banyak, biasanya digunakan parameter method Post atau data yang tidak ingin dilihat, misalkan data untuk login, yang dikirimkan adalah Username dan Password, jika menggunakan Get, maka Username dan Passwordnya bisa terlihat. Merancang Halaman Website dengan Script HTML 90
PRAKTEK MODUL-12 : 1. Buat Form Registrasi berikut di bawah ini, lalu simpan dengan nama fie MODUL-12 : 2. Ketikkan script HTML berikut untuk membuat Form Registrasi di atas : <html> <body bgcolor=pink> <h1><center>form REGISTRASI</h1></center> <form> <table border=1 width=100%> <td width=25%>nama Lengkap<td colspan=3><input type=text name=nama size=80> <td>tempat Lahir<td colspan=3><input type=text name=lahir size=80> <td>tanggal Lahir<td>Tanggal<td>Bulan<td>Tahun <td><br> Merancang Halaman Website dengan Script HTML 91
<td><select name=tanggal> <option>1 <option>2 <option>3 <option>4 <option>5 <option>6 <option>7 <option>8 <option>9 <option>10 <option>11 <option>12 <option>13 <option>14 <option>15 <option>16 <option>17 <option>18 <option>19 <option>20 <option>21 <option>22 <option>23 <option>24 <option>25 <option>26 <option>27 <option>28 <option>29 <option>30 <option>31 <td><select name=bulan> <option>januari <option>februari <option>maret <option>april <option>mei <option>juni <option>juli <option>agustus <option>september <option>oktober <option>november <option>desember <td><input type=text name=tahun> <td>jenis Kelamin<td><input type=radio name=sex>pria<td colspan=2><input type=radio name=sex> Wanita Merancang Halaman Website dengan Script HTML 92
<td>agama<td colspan=3> <select name=agama> <option>islam <option>kristen Protestan <option>kristen Katolik <option>hindu <option>budha <option>kong Hu Tzu <td>pekerjaan<td colspan=3> <select name=kerja> <option>pegawai Negeri <option>pegawai Swasta <option>buruh/tani <option>mahasiswa/pelajar <option>tni / Polri <option>ibu Rumah Tangga <td>hobby<td><input type=checkbox name=hobby>nonton <td><input type=checkbox name=hobby>game Online <td><input type=checkbox name=hobby>shopping <td><br> <td><input type=checkbox name=hobby>jalan-jalan <td><input type=checkbox name=hobby>baca Buku <td><input type=checkbox name=hobby>main Komputer <td>alamat Lengkap<td colspan=3><textarea cols=55 rows=2></textarea> <td>no. Telp. / No. HP<td><input type=text name=tlp><td colspan=2><input type=text name=hp> <td>password Anda<td colspan=3><input type=password name=sandi> </table> <input type=submit value=kirim><input type=reset value=batal> Merancang Halaman Website dengan Script HTML 93
DAFTAR PUSTAKA Betha dan Husni I. Pohan. (2001) Pemrograman WEB dengan HTML, Informatika, Bandung. Mico Pardosi. (2001) Bahasa Pemrograman Internet HTML dan JavaScript, Indah, Surabaya. Taryana S. dan Jonathan S. (2007) Membuat Web Pribadi dan Bisnis dengan HTML, Gava Media, Yogyakarta. http://www.ilmu-komputer.com Merancang Halaman Website dengan Script HTML 94