From HTML merupakan tag penting dalam pemerograman HTML. Form menyediakan property
masukan yang dapat berupa textbox, check box, radio button, dan button.
Untuk membuat sebuah from digunakan tag <form>…</form>. Selain tag, elemen form
juga dapat menuliskan sembarang teks, tag, maupun image.
# Atribut elemen form :
• Action =
lokasi dan nama file (file yang berisi data – data form)
• Method =
[get | post] metode HTTP untuk men-submit form
# Properti elemen form:
1.Text box <input type=”text”>
Digunakan untuk memasukan input yang berupa teks.• Size = ukuran dari textbox dalam karakter• Maxsize = maksimal jumlah karakter yang dapat di input• Nama = nama variable yang dikirim ke suatu aplikasi• Value = akan menampilkan isinya sebagai nilai default
2.Password <input type=”password”>
Di gunakan untuk memasukan password• Size = ukuran textbox dalam karakter• Maxsize = maksimal jumlah karakter yang dapat di input• Name = nama variable yang dikirim ke suatu aplikasi
1.Text box <input type=”text”>
Digunakan untuk memasukan input yang berupa teks.• Size = ukuran dari textbox dalam karakter• Maxsize = maksimal jumlah karakter yang dapat di input• Nama = nama variable yang dikirim ke suatu aplikasi• Value = akan menampilkan isinya sebagai nilai default
2.Password <input type=”password”>
Di gunakan untuk memasukan password• Size = ukuran textbox dalam karakter• Maxsize = maksimal jumlah karakter yang dapat di input• Name = nama variable yang dikirim ke suatu aplikasi
3.Hidden<input type”hidden”>
Digunkan untuk mengirim data ke suatu aplikasi yang tidak dingginkan untuk dilihat oleh browser.• Name = nama dari variable yang dikirim ke suatu aplikasi• Value = nilai dari variable
4.Check Box <input type=”checkbox”>
Check box digunakan untuk dapat memilih lebih dari satu pilihan.• Name = nama dari variable yang dikirim ke suatu aplikasi• Value = nilai dari variable
5.Radio Button <input type=”radio”>
Radio button digunakan agar dapat memilih ahnya salah satu pilihan.• Name = nama veriabel yang dikirim ke suatu aplikasi• Value = nilai dari variable
6.Push Button <input type=”button”>
Elemen ini biasanya digunakan dengan JavaScript atau VBScript untuk menghasilkan suatu aksi.• Name = nama dari variable yang dikirim ke suatu aplikasi• Value = label teks di atas tombol
7.Submit <input type=”submit”>
Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan nilinya ke suatu aplikasi yang di tentukan dlam atribut ACTION dlam elemen FORM.• Name = nama dari variable yang dikirim ke suatu aplikasi• Value = label teks di atas tombol
8.Image Submit Button <input type=”image” src=”url”>
Digunakan untuk menggantikan tombol standar submit dengan image.• Name = nama dari variable ayng dikirim ke suatu aplikasi
9.Reset <input type=”reset”>
Digunakan untuk mereset semua masukan dalam form.• Value = label teks di button
10.Text Area <textarea>…</textarea>
Elemen untuk memasukan teks secara leluasa seperti notepad.• Nama = nama dari veriabel yang dikirim ke suatu aplikasi• Rows = panjang baris dalam karakter• Cols = tiggi kotak
11.Select <select>…</select>
Daftar isi dalam property select menggunakan tag <option>• Size = jumlah pilihan yang dapat terlihat• Name = nama dari veriabel yang dikirim ke suatu aplikasi
Contoh 1:
<html>
<head>
<title>Contoh Form</title>
<body>
<h1><center>Contoh Form</center></h1>
<form>
<table width="400" border="0">
<tr>
<td>Nama</td>
<td>:</td>
<td><input type="text"></td>
</tr>
<tr>
<td>TTL</td>
<td>:</td>
<td><input type="text" size="2"> / <input type="text" size="2"> / <input type="text" size="3"></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><textarea rows="3"></textarea></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td><input name="radiobutton" type="radio">Laki-laki
<input name="radiobutton" type="radio">Perempuan</td>
</tr>
</form>
</body>
</head>
</html>
Hasilnya:
Contoh 2:
<html><head><title>Form Survei</title></head>
<body>
<form action="#" method="get">
<p>Nama : <input type="text">
<p>Alamat : <input type="text">
<p>TTL : <input type="text" size="7"> / <input type="text" size="2"> / <input type="text" size="2"> / <input type="text" size="3">
<p>Jenis Kelamin :
<input type="radio" value="Laki-laki">Laki-laki
<input type="radio" value="Perempuan">Perempuan
<input type="radio" value="Gk punya kelamin XD">Gk punya kelamin XD
<p>Pekerjaan :
<select name="pekerjaan">
<option value="Nganggur">Nganggur</option>
<option value="pelajar">Pelajar</option>
<option value="Pegawai">PNS</option>
<option value="Wiraswasta">Wiraswasta</option>
</select>
<p>Hobby :
<input type="checkbox" name="hobby" value="Internetan">Internetan
<input type="checkbox" name="hobby" value="Main Game">Main Game
<input type="checkbox" name="hobby" value="Nongkrong">Nongkrong
<input type="checkbox" name="hobby" value="Maen Y!A">Maen Y!A
<input type="checkbox" name="hobby" value="Ngaskus">Ngaskus
<p>
<input type="submit" value="Kirim">
<input type="reset" value="Reset">
</form>
</body>
</html>
Hasilnya:
