RSS Feed
Twitter
1:58:00 PM
Tantri Setya Mustika
Form HTML merupakan tag yang paling penting khususnya dalam
membuat
aplikasi berbasis web. Form menyediakan properti masukan
yang
dapat berupa textbox, checkbox, radio button, dan button.
Untuk
mendeklarasikan sebuah form digunakan tag <form>.....</form>.
Di
dalam tag ini akan mendefinisikan
elemen-elemen form seperti yang
telah
disebutkan di atas. Selain tag elemen, form juga dapat menuliskan
sembarang teks, tag, image.
Atribut Elemen Form
Action = lokasi
dan nama file (file yang menangani form)
Method =
[ get | post ] (metode HTTP untuk men-submit form)
Properti Masukan Pada Elemen Form
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
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
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
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 variabel
checked (checkbox yang ditandai)
Radio button <input type=”radio”>
Radio button
digunakan untuk dapat memilih hanya salah satu pilihan.
Name = nama dari variabel yang dikirim ke suatu aplikasi
Value = nilai dari variable
checked (radio button yang ditandai)
Push button <input type=”button”>
Elemen ini
biasanya digunakan untuk JavaScript, VBScript, atau script lain untuk
menghasilkan
suatu aksi.
Name = nama dari variabel yang dikirim ke suatu aplikasi
Value = label teks di atas tombol.
Submit <input type=”submit”>
Setiap elemen
form membutuhkan tombol submit untuk mengirimkan nama variabel 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 di atas tombol
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
Reset <input type=”reset”>
Digunakan untuk
mereset (menghapus) semua masukan dalam form dengan cepat.
Value = label teks di atas tombol.
Text area <textarea> . . . </textarea>
Elemen untuk
memasukkan teks secara leluasa seperti pada notepad.
Name = nama dari variabel yang dikirim ke suatu aplikasi
Rows = panjang baris dalam karakter
cols = tinggi
(jumlah baris)
Select <select> . . . </select>
Daftar isi dalam
properti select menggunakan tag <option>
Name = nama dari variabel yang dikirim ke suatu aplikasi
Size = jumlah pilihan yang dapat terlihat
Contoh Form
Pada Html :
<html>
<head>
<title
bgcolor="#FFFFCC">Latihan-9: Membuat Form</title>
</head>
<body>
<form action=#
method=get>
<p>Nama : <input type=text name=nama>
<p>Alamat : <textarea name=alamat cols=25
rows=4></textarea>
<p>Jenis kelamin:
<input type=radio name=gender
value=Pria>Laki-laki
<input type=radio name=gender
value=Wanita>Perempuan
<p>Tgl. Lahir:
<select name=tgl>
<option value=1>01
<option value=2>02
<option value=3>03
<option value=31>31
</select> -
<select name=bln>
<option value=1>01
<option value=2>02
<option value=3>03
<option value=12>12
</select> -
<select name=thn>
<option
value=1901>1901
<option
value=1902>1902
<option
value=1903>1903
<option
value=2000>2000
</select>
<p>Pekerjaan :
<select name=pekerjaan>
<option value=Pelajar>Pelajar/Mahasiswa
<option value="Pegawai
Negeri">Pegawai negeri
<option value=Karyawan>Karyawan
<option value=Wiraswasta>Wiraswasta
</select>
<p>Hobby :
<input type=checkbox
name=hobby value=Membaca>Baca buku
<input type=checkbox
name=hobby value=Kesenian>Kesenian
<input type=checkbox
name=hobby value=Olahraga>Olah raga
<input type=checkbox
name=hobby value=Belanja>Shopping
<p>Komentar : <textarea name=komentar
cols=25 rows=4></textarea>
<p><input type=submit value=Kirim
data><input type=reset value=Ulangi>
</form>
</body>
</html>
