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 variabel 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
<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>
HASILNYA :
SELAMAT MENCOBA~
Tidak ada komentar:
Posting Komentar