Pertemuan
ke-2
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.
Atribut Elemen Form
·
action
= lokasi dan nama file (file yang menangani form)
·
method
= [ get | post ] (metode HTTP untuk men-submit form)
2.1.9. 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 variable
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 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
Script 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>
Hasilnya/outputnya
Tidak ada komentar:
Posting Komentar