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
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
Berikut ini saya berikan contoh script HTML membuat
form hasil karya saya :
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
|
|
<title bgcolor="#FFFFCC">Latihan-9
: Membuat form</title>
|
|
</head>
|
|
<body>
|
|
<h1>FORM
PENDAFTARAN</h1>
|
|
<table width="600"
border="1">
|
|
<tr>
|
|
<td><p>
Nama : </td>
|
|
<td><input
type=text name=nama></td>
|
|
</tr>
|
|
<tr>
|
|
<td><p>Alamat
: </td>
|
|
<td><textarea
name="alamat" cols="25" rows="4"></textarea></td>
|
|
</tr>
|
|
<tr>
|
|
<td><p>Jenis
Kelamin :</td>
|
|
<td><input
type="radio" name="gender" value="Pria">Laki-laki
|
|
<input type="radio"
name="gender" value="Wanita">Perempuan</td>
|
|
</tr>
|
|
<tr>
|
|
<td><p>Tgl.
Lahir :</td>
|
|
<td><select
name="tgl">
|
|
<option
value="1">01
|
|
<option
value="2">02
|
|
<option
value="3">03
|
|
<option
value="4">04
|
|
<option
value="5">05
|
|
<option
value="6">06
|
|
<option
value="7">07
|
|
<option
value="8">08
|
|
<option
value="9">09
|
|
<option
value="10">10
|
|
<option
value="11">11
|
|
<option
value="12">12
|
|
<option
value="13">13
|
|
<option
value="14">14
|
|
<option
value="15">15
|
|
<option
value="16">16
|
|
<option
value="17">17
|
|
<option
value="18">18
|
|
<option
value="19">19
|
|
<option
value="20">20
|
|
<option
value="21">21
|
|
<option
value="22">22
|
|
<option
value="23">23
|
|
<option
value="24">24
|
|
<option
value="25">25
|
|
<option
value="26">26
|
|
<option
value="27">27
|
|
<option
value="28">28
|
|
<option
value="29">29
|
|
<option
value="30">30
|
|
<option
value="31">31
|
|
</select>
|
|
<select
name="bln">
|
|
<option
value="1">01
|
|
<option
value="2">02
|
|
<option
value="3">03
|
|
<option
value="4">04
|
|
<option
value="5">05
|
|
<option
value="6">06
|
|
<option
value="7">07
|
|
<option
value="8">08
|
|
<option
value="9">09
|
|
<option
value="10">10
|
|
<option
value="11">11
|
|
<option
value="12">12
|
|
</select>
-
|
|
<select
name="thn">
|
|
<option
value="1991">1991
|
|
<option
value="1992">1992
|
|
<option
value="1993">1993
|
|
<option
value="1994">1994
|
|
<option
value="1995">1995
|
|
<option
value="1996">1996
|
|
<option
value="1997">1997
|
|
<option
value="1998">1998
|
|
<option
value="1999">1999
|
|
<option
value="2000">2000
|
|
<option
value="2001">2001
|
|
</select></td>
|
|
</tr>
|
|
<tr>
|
|
<td><p>Pekerjaan
:</td>
|
|
<td><select
name="pekerjaan">
|
|
<option
value="Pelajar">Pelajar/Mahasiswa
|
|
<option
value="Pegawai Negeri">Pegawai Negeri
|
|
<option
value="Karyawan">Karyawan
|
|
<option
value="Wiraswasta">Wiraswasta
|
|
</select></td>
|
|
</tr>
|
|
<tr>
|
|
<td><p>Hobby
:</td>
|
|
<td><input
type="checkbox" name="hobby" value="Membaca">Baca
Buku
|
|
<input type="checkbox"
name="hobby" value="Kesenian">Kesenian
|
|
<input type="checkbox"
name="hobby" value="Olahraga">Olahraga
|
|
<input type="checkbox"
name="hobby" value="Shopping">Shopping</td>
|
|
</tr>
|
|
<tr>
|
|
<td><p>Komentar
: </td>
|
|
<td><textarea
name="komentar" cols="25" rows="4"></textarea>
|
|
<p><input
type="submit" value="kirim data"><input type="reset"
value="Ulangi">
|
|
</form></td>
|
|
</tr>
|
|
</table>
|
|
<form action=#
method=get>
|
|
</body>
|
|
</html>
|
|
Dan hasilnya seperti dibawah ini :
Semoga bermanfaat J
.jpg)
No comments:
Post a Comment