Penggunaan
Form pada HTML
Form adalah salah
satu elemen HTML yang sangat sering dijumpai bagi anda pengguna layanan
internet. Hampir seluruh halaman web yang anda kunjungi mengandung unsur form
didalamnya. Form dapat ditemukan pada halaman web yang memiliki fungsi
komunikasi, bukan hanya komunikasi antar pengguna internet seperti
chatting, social network, dan email, tetapi juga komunikasi antara pengguna
internet dengan web server seperti format pendaftaran untuk membuat account
sebuah situs. Saat seseorang hendak membuat account sebuah situs, dia
memberikan informasi kepada web server yang biasanya berupa identitas diri.
Identitas tersebut diinputkan melalui form kemudian dikirim ke database web
server.
Jadi, form biasanya digunakan untuk halaman web yang bersifat dinamis sehingga memungkinkan terjadinya komunikasi antara user dengan web server atau user lain. Form memungkinkan suatu web server untuk menerima informasi dari user melalui sejumlah elemen kontrol. Elemen kontrol yang dapat digunakan untuk membuat form yaitu :
Jadi, form biasanya digunakan untuk halaman web yang bersifat dinamis sehingga memungkinkan terjadinya komunikasi antara user dengan web server atau user lain. Form memungkinkan suatu web server untuk menerima informasi dari user melalui sejumlah elemen kontrol. Elemen kontrol yang dapat digunakan untuk membuat form yaitu :
1.
Teks baris tunggal
2.
Teks baris jamak
3.
Teks password
4.
Tombol submit dan reset
5.
Checkbox
6.
Radio button
7.
Menu pop-up
Sebelum mempelajari cara
membuat elemen-elemen kontrol di atas, anda sebaiknya mengetahui terlebih
dahulu struktur tag yang digunakan untuk membuat
form. Berikut strukturnya Dari struktur di atas dapat diketahui bahwa cara pembuatan form dalam HTML adalah dengan menambahkan tag <form> ... </form>, kemudian ditambahkan dengan atribut tag METHOD danACTION.
Fungsi atribut METHOD adalah untuk menentukan metoda apa yang digunakan untuk mengirim data ke script tujuan. Dalam hal ini ada 2 cara yang dapat digunakan yaitu GET dan POST. Keduanya tentu memiliki perbedaan dari cara mengirimkan data. Sedangkan untuk fungsi dari atribut ACTIONadalah untuk menentukan URL tujuan dari script yang akan menerima data dari form.
Sebagai contoh perhatikan tag berikut :
Atribut Elemen Form
action = lokasi dan nama file "yang menangani form"
method = [ get | post ] "metode HTTP untuk men-submit form"
Properti Masukan Pada Elemen Form
a. Text Box <input type=”text” />
Digunakan untuk memasukkan input berupa text.
size = ukuran dari textbox dalam karakter, default 20
maxsize = maksimal banyaknya karakter yang dapat diterima
name = nama dari variabel yang dikirim ke suatu aplikasi
value = akan menampilkan isinya sebagai nilai default
b. Password<input type=”password” />
Digunakan untuk memasukkan password.
size = ukuran dari textbox dalam karakter, default 20
maxsize = maksimal banyaknya karakter yang dapat diterima
name = nama dari variabel yang dikirim ke suatu aplikasi
c. Hidden<input type=”hidden” />
Digunakan untuk mengirim data ke suatu aplikasi yang tidak diinginkan untuk
dilihat oleh browser.
name = nama dari variabel yang dikirim ke suatu aplikasi
value = nilai dari variabel
d. Check Box<input type=”checkbox” />
Check box digunakan untuk dapat memilih lebih dari satu pilihan.
name = nama dari variabel yang dikirim ke suatu aplikasi
value = nilai dari variable
checked = ( checkbox yang sudah ditandai )
e. Radio Button<input type=”radio” />
Radio Button digunakan untuk dapat memilih hanya satu pilihan.
name = nama dari variabel yang dikirim ke suatu aplikasi
value = nilai dari variabel
checked = ( checkbox yang sudah ditandai )
f. Push Button<input type=”button” />
Elemen ini biasanya digunakan dengan JavaScript atau VBScript untuk
menghasilkan suatu aksi.
name = nama dari variabel yang dikirim ke suatu aplikasi
value = label teks diatas tombol
g. Submit<input type=”submit” />
Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan
nilainya ke suatu aplikasi yang ditentukan dalam atribut ACTION dalam elemen
FORM.
name = nama dari variabel yang dikirim ke suatu aplikasi.
value = label teks diatas tombol
h. Image Submit Button<input type=”image” src=”url” />
Digunakan untuk menggantikan tombol standar submit dengan image.
name = nama dari variabel yang dikirim ke suatu aplikasi
i. Reset<input type=”reset” />
Digunakan untuk mereset semua masukan form.
value = text label on the button
j. Text Area<textarea>…</textarea>
Elemen untuk memasukkan teks secara leluasa seperti notepad.
name = nama dari varibel yang dikirim ke suatu aplikasi
rows = panjang baris dalam karakter
cols = tinggi dalam karakter
k. Select<select>…</select>
Daftar isi dalam property select menggunakan tag <option>
size = jumlah pilihan yang dapat terlihat
name = nama dari suatu variabel yang terkirim ke suatu aplikasi
form. Berikut strukturnya Dari struktur di atas dapat diketahui bahwa cara pembuatan form dalam HTML adalah dengan menambahkan tag <form> ... </form>, kemudian ditambahkan dengan atribut tag METHOD danACTION.
Fungsi atribut METHOD adalah untuk menentukan metoda apa yang digunakan untuk mengirim data ke script tujuan. Dalam hal ini ada 2 cara yang dapat digunakan yaitu GET dan POST. Keduanya tentu memiliki perbedaan dari cara mengirimkan data. Sedangkan untuk fungsi dari atribut ACTIONadalah untuk menentukan URL tujuan dari script yang akan menerima data dari form.
Sebagai contoh perhatikan tag berikut :
<form
method="post" action="identitas.php">
... elemen kontrol ...
</form>
... elemen kontrol ...
</form>
Dari tag di atas
dapat diketahui bahwa pada form tersebut, data yang diinputkan oleh user akan
dikirimkan dengan cara post ke sebuah file PHP dengan
nama identitas.php yang letaknya ada di direktori
tempat dimana file HTML (yang berisi form tersebut) berada.
Setelah mengetahui struktur dari tag form, selanjutnya akan dibahas mengenai elemen kontrol pada form. Ada 3 tag yang digunakan untuk membuat elemen kontrol pada form yaitu :
Setelah mengetahui struktur dari tag form, selanjutnya akan dibahas mengenai elemen kontrol pada form. Ada 3 tag yang digunakan untuk membuat elemen kontrol pada form yaitu :
1.
Tag <input>, untuk membuat elemen text, checkbox, radio button, tombol submit, dan
tombol reset.
2.
Tag <select>, untuk membuat menu pop-up.
3.
Tag <textarea>, untuk membuat kolom isian teks panjang.
Atribut Elemen Form
action = lokasi dan nama file "yang menangani form"
method = [ get | post ] "metode HTTP untuk men-submit form"
Properti Masukan Pada Elemen Form
a. Text Box <input type=”text” />
Digunakan untuk memasukkan input berupa text.
size = ukuran dari textbox dalam karakter, default 20
maxsize = maksimal banyaknya karakter yang dapat diterima
name = nama dari variabel yang dikirim ke suatu aplikasi
value = akan menampilkan isinya sebagai nilai default
b. Password<input type=”password” />
Digunakan untuk memasukkan password.
size = ukuran dari textbox dalam karakter, default 20
maxsize = maksimal banyaknya karakter yang dapat diterima
name = nama dari variabel yang dikirim ke suatu aplikasi
c. Hidden<input type=”hidden” />
Digunakan untuk mengirim data ke suatu aplikasi yang tidak diinginkan untuk
dilihat oleh browser.
name = nama dari variabel yang dikirim ke suatu aplikasi
value = nilai dari variabel
d. Check Box<input type=”checkbox” />
Check box digunakan untuk dapat memilih lebih dari satu pilihan.
name = nama dari variabel yang dikirim ke suatu aplikasi
value = nilai dari variable
checked = ( checkbox yang sudah ditandai )
e. Radio Button<input type=”radio” />
Radio Button digunakan untuk dapat memilih hanya satu pilihan.
name = nama dari variabel yang dikirim ke suatu aplikasi
value = nilai dari variabel
checked = ( checkbox yang sudah ditandai )
f. Push Button<input type=”button” />
Elemen ini biasanya digunakan dengan JavaScript atau VBScript untuk
menghasilkan suatu aksi.
name = nama dari variabel yang dikirim ke suatu aplikasi
value = label teks diatas tombol
g. Submit<input type=”submit” />
Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan
nilainya ke suatu aplikasi yang ditentukan dalam atribut ACTION dalam elemen
FORM.
name = nama dari variabel yang dikirim ke suatu aplikasi.
value = label teks diatas tombol
h. Image Submit Button<input type=”image” src=”url” />
Digunakan untuk menggantikan tombol standar submit dengan image.
name = nama dari variabel yang dikirim ke suatu aplikasi
i. Reset<input type=”reset” />
Digunakan untuk mereset semua masukan form.
value = text label on the button
j. Text Area<textarea>…</textarea>
Elemen untuk memasukkan teks secara leluasa seperti notepad.
name = nama dari varibel yang dikirim ke suatu aplikasi
rows = panjang baris dalam karakter
cols = tinggi dalam karakter
k. Select<select>…</select>
Daftar isi dalam property select menggunakan tag <option>
size = jumlah pilihan yang dapat terlihat
name = nama dari suatu variabel yang terkirim ke suatu aplikasi
