Dokumen tersebut memberikan penjelasan tentang penggunaan form dalam membuat halaman web menjadi lebih interaktif dengan mendapatkan umpan balik dari pengunjung. Termasuk penjelasan tentang tag dan atribut yang digunakan untuk membuat form seperti <FORM>, METHOD, ACTION, serta berbagai jenis input seperti text, submit, radio, checkbox, select, textarea dan password.
2. Form adalah suatu cara untuk mejadikan
halaman web menjadi lebih interaktif , karena
akan mendaptakan umpan balik dari
pengunjung situs web.
Form dapat digunakan untuk membuat buku
tamu, formulir pemesanan, survey, meminta
komentar dan lain sebagianya.
3. Untuk membuat sebuah form, Tag yang
digunakan adalah <FORM> … </FORM>.
Sedangkan Atribut yang paling umum
dipakai adalah METHOD= dan ACTION=.
5. Di mana METHOD adalah atribut yang
digunakan untuk menunjukkan metode
pengiriman informasi ke web server.
Dalam hal ini ada 2 pilihan, POST yang
digunakan untuk mengirimkan data yang
dimasukkan oleh user dan GET digunakan
untuk mendapatkan data dari halaman lain.
Metode GET ini hampir tidak pernah
digunakan.
6. Sedangkan atribut ACTION digunakan untuk
menentukan ke mana informasi form akan
diserahkan. Jika Anda menggunakan CGI
SCRIPT pada web server, maka tentukanlah
URL-Script nya.
Pada bab ini semua contoh akan
menggunakan metode POST ke sebuah
alamat e-mail. Ini adalah cara yang paling
mudah karena kita tidak perlu mempelajari
script apapun.
7. Digunakan untuk mendapatkan informasi dari
pengunjung.
Penulisan :
<INPUT TYPE=”text” NAME=”nama” VALUE=”isi item”
SIZE=”angka” MAXLENGTH=”angka”>
8. Atribut Fungsi
Type = “text | hidden |
check box | radio | image |
submit | reset “
Digunakan untuk memilih tipe
informasi yang ingin didapatkan
dari pengunjung.
Name=”nama” Untuk memberi nama item
informasi.
Value= “isi item” Untuk mengisi item informasi
default.
Size=” Angka” Untuk menentukan panjang
kolom.
Maxlength=”angka” Untuk menentukan panjang isian
yang dapat diketik oleh
pengunjung.
9. Untuk mendapatkan informasi-informasi kecil dari pengunjung, misalnya
nama, dan alamatnya, kita dapat menggunakan tipe input text.
Penulisan :
<INPUT TYPE=”text” NAME=”nama” SIZE=”angka”>
10. Source HTML gambar 8.1.
<html>
<head>
<title>Form dengan Text</title>
<body>
<FORM METHOD="postt" ACTION="mero@plasa.com">
Nama Anda : <INPUT TYPE="text" NAME="nama"
SIZE="35"><br>
</FORM>
</body>
</html>
11. Tombol Submit dan Reset biasanya selalu kita
sertakan dalam sebuah form.
Tombol submit ini digunakan untuk mengirimkan
informasi yang telah dimasukkan.
Sedangkan tombol Reset digunakan untuk
mambatalkan seluruh pengisian. Jika tombol ini
ditekan maka semua data atau informasi yang
telah diisikan akan dihapus semua.
Penulisan :
<INPUT TYPE=”submit” VALUE=”isi item”>
<INPUT TYPE=”reset” VALUE=”isi item”>
12.
13. Source HTML gambar 8.2.
<html>
<head>
<title>Form dengan Submit dan Reset</title>
<body>
<FORM METHOD="postt" ACTION="mero@plasa.com">
<INPUT TYPE="Submit" value="kirim">
<INPUT TYPE="reset" value="batal"SIZE="35">
</FORM>
</body>
</html>
14. Dalam form, pengunjung juga diberi
kesempatan untuk memilih dalah satu dari
sejumlah pilihan dengan menggunakan tombol
radio button atau check box.
Penulisan:
<INPUT TYPE=”radio” NAME=”nama” VALUE=”isi
item”>Teks
<INPUT TYPE=”checkbox” NAME=”nama” VALUE=”isi
item”>Teks
Di mana VALUE adalah nilai yang akan dikirim ke
server bersama dengan NAME. Sedangkan Teks
adalah teks yang ditampilkan pada browser.
15.
16. <html>
<head>
<title>Form dengan Radio Button dan Checkbox</title>
<body>
<FORM METHOD="postt" ACTION="mero@plasa.com">
Jenis Kelamin : <br>
<INPUT TYPE="radio" NAME="jenis">Pria<br>
<INPUT TYPE="radio" NAME="jenis">Wanita <br><br>
Hobby Anda :<br>
<INPUT TYPE="checkbox" NAME="hobby">Makan<br>
<INPUT TYPE="checkbox" NAME="hobby">Belajar<br>
<INPUT TYPE="checkbox" NAME="hobby">Chatting<br>
<INPUT TYPE="checkbox" NAME="hobby">Browsing<br>
</FORM>
</body>
</html>
17.
18. Dengan menu drop down, pemakai memilih informasi
dari sekumpulan pilihan yang telah ditentukan.
Pada saat pemakai memilih menu, daftar pilihan akan
muncul sebagai menu drop down. Menu dinyatakan
dalam Tag <SELECT>…</SELECT> sedangkan daftar
pilihannya dinyatakan dengan <OPTION> yang
diletakkan di antara kedua tag tersebut.
Penulisan :
<SELECT NAME=”nama” SIZE=”angka”>
<OPTION SELECTED>…
<OPTION>…
<OPTION>…
</SELECT>
19.
20. Atribut SIZE pada tag <SELECT> di atas
digunakan untuk mengatur ukuran tampilan
menu drop down-nya.
Sebagai contoh, jika kita mengisikan angka 3
pada atribut SIZE, maka akan ditampilkan ke
layar secara default adalah tiga pilihan
pertama.
Sedangkan atribut SELECTED pada tag
<OPTION> digunakan untuk memilih suatu
item yang akan ditampilkan secara default.
21.
22. Untuk mendapatkan suatu komentar dari
pengunjung, kita harus menyediakan suatu
area yang cukup untuk menulis komentar.
Untuk keperluan ini digunakan tag
<TEXTAREA>…</TEXTAREA>.
Penulisan:
<TEXTAREA NAME=”nama” ROWS=”jumlah_baris”
COLS=”jumlah_kolom”>
23.
24. Kita dapat menggunakan kotak password
untuk mengumpulkan informasi dari
seseorang. Pada saat pemakai memasukkan
informasi ke dalam kotak
password, informasi disembunyikan dari
pemakai dan akan diganti dengan asteriks (*)
atau bullet. Fasilitas ini digunakan dalam web
site yang memerlukan password untuk
memasukkan kode-kode tertentu seperti
Credit Card dan lain-lain.