FORM
Form merupakan salah
satu elemen dalam HTML yang digunakan untuk menerima input dari pengunjung.
Melalui form pengunjung sebuah halaman web dapat melakukan interaksi dengan
web. Pengunjung dapat memasukan data melalui elemen-elemen input seperti
textfield, checkbox, radio button, textarea, submit button, dropdown dan
lain-lain. Selain itu pengunjung juga dapat melakukan pemilihan data mengunakan
elemen select list atau dengan istilah lain combo box atau drop-down list. Form
membuat sebuah halaman web menjadi web interaktif dan dinamis, karena form
merupakan satu-satunya sarana bagi pengembang website untuk mendapatkan
informasi dari pengguna.
Berikut perintah
dasar Form :
<form>
Input elements
</form>
Ada dua atribut yang
digunakan pada elemen form yaitu method dan action.
Method yang berfungsi
sebagai pengiriman data pada server dengan cara ke tujuan yaitu :
- Get: mengirim data
pada server dengan cara meletakan data pada bagian akhir URL yang ditunjuk.
- Post : mengirim
datanya secara terpisah.
Perbedaannya, jika
kita mengisi atribut method dengan get (dimana ini adalah nilai default
seandainya kita tidak menuliskannya) maka isian form akan terlihat pada url
browser. Method get ini biasanya digunakan untuk query pencarian. Method post
biasanya digunakan untuk data yang lebih sensitif seperti yang berisi password,
atau registrasi user. Data hasil form tidak akan terlihat pada browser.
Action yang berfungsi
menentukan lokasi dari script yang akan memproses data dari form.
Struktur dasar form
akan terlihat sebagai berikut:
<form action="logindata.php" method="post">
...isi form...
</form>
Elemen yang paling penting dalam form adalah elemen
input. Elemen ini memungkinkan pengunjung memasukan data melalui halaman form
yang datanya kemudian akan dikirimkan keserver. Ada banyak elemen-elemen input
pada form, yang dapat digunakan oleh pengguna untuk mengisikan data dengan yang
berbeda-beda jenisnya. Berikut ini saya akan membahas tiap-tiap elemen input
form, beserta dengan cara pembuatannya.
1. Text
Field
Elemen yang digunakan untuk memasukan text dalam satu
baris. Lebar karakter defaultnya adalah 20 karakter.
Penulisan :< input type=”text” />
Berikut contohnya :
<form>
First name : <input type=”text” name=”first name”
/><br/>
Last name :< input type=”text” name=”last name”
/>
</form>
2. Password
Field
Untuk memasukan datu baris teks dengan format
chiphertext/password. Dengan karakter yang disamarkan dengan bulatan atau tanda
“*”.
Penulisan :< input type=”password” />
Berikut contohnya :
<form>
Password : <input type=”password”
name=”password”/>
</form>
3. Radio
Button
Radio button digunakan agar dapat memilih salah satu
pilihan. Contoh jenis kelamin (male or female).
Penulisannya : Radio Button<input
type="radio">
Berikut contohnya :
<form>
Jenis kelamin <input type =”radio” name=”sex
value=”male”/> Male<br/>
<input type =”radio” name=”sex value=”female”/>
Female
</form>
4. Text
Area
Digunakan sebagai input kontrol form untuk memasukan
teks lebih dari satu baris. Elemen ini mempunyai atribut yaitu name, cols, dan
rows.
Seperti dijelaskan berikut :
Nama
= nama dari veriabel yang dikirim ke suatu aplikasi
Rows
= panjang baris dalam karakter
Cols
= tinggi kotak
Penulisannya : <text area>
Name=”name”
Cols=”number”
Row=”number”
...........
</text area>
Berikut contohnya:
Alamat : <textarea name="Alamat"
cols="25" rows="4"></textarea>
5. Check
Box
Check Box digunakan untuk dapat memilih lebih dari
satu pilihan.
Penulisannya: Check Box<input
type="checkbox">
Berikut contohnya :
Hobi :
<form>
<input
type=checkbox name=hobi value=Membaca>Baca Buku
<input
type=checkbox name=hobi value=Kesenian>kesenian
<input
type=checkbox name=hobi value=olahraga>Olahraga
<input
type=checkbox name=hobi value=Traveling>Jalan Jalan
</form>
6. Select
List
Digunakan untuk menampilkan daftar pilihan dalam
bentuk drop-down list.
Penulisannya :
<select>
......
</select>
Berikut contohnya:
Pekerjaan :
<select
name=Pekerjaan>
<option
value=Pelajar>Pelajar/Mahasiswa
<option
value=PNS>Pegawai Negeri Sipil
<option
value=Karyawan>Karyawan
<option
value=Wiraswasta>Wiraswasta
</select>
7. Submit
Button
Digunakan untuk mengirimkan data dari halaman web ke
server. Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan
nilinya ke suatu aplikasi yang di tentukan dalam atribut ACTION dlam
elemen FORM.
Penulisan nya : Submit<input
type="submit">
Berikut contohnya :
<form name=”input”
action=”proses input.php” method=”get’>
....................
..................
<input type=submit value=kirim data/>
</form>
8. Reset
Button
Digunakan untuk membatalkan semua proses ata mereset
proses pengisian data yang dilakukan di elemen input form.
Penulisannya : Reset<input
type="reset">
Berikut contohnya :
<form name=”input” action=”proses input.php”
method=”get’>
....................
..................
<input type=submit value=kirim data/>
<input type=reset value=reset data/>
</form>
Jadi beberapa contoh
elemen tadi digabungkan akan menjadi seperti berikut :
<html>
<head>
<title bgcolor="Black">Contoh
pembuatan Form</title>
</head>
<body>
<form action="prosesinput.php"
method="get">
<p> First name :
<input type=”text” name=”first name” /><br/>
Last name :< input type=”text” name=”last
name” />
<p> Password : <input type=”password”
name=”password”/>
<p> Jenis kelamin : <input type =radio
name=”sex value=”male”/> Male
<input type
=radio name=”sex value=”female”/> Female
<p> Alamat : <textarea
name="Alamat" cols="25"
rows="4"></textarea>
<p>
Hobi : <input type=checkbox name=hobi
value=Membaca>Baca Buku
<input type=checkbox name=hobi value=Kesenian>kesenian
<input type=checkbox name=hobi value=olahraga>Olahraga
<input type=checkbox name=hobi value=Traveling>Jalan Jalan
<p> Pekerjaan :
<select name=Pekerjaan>
<option
value=Pelajar>Pelajar/Mahasiswa
<option
value=PNS>Pegawai Negeri Sipil
<option
value=Karyawan>Karyawan
<option
value=Wiraswasta>Wiraswasta
</select>
<p>Komentar
: <textarea name="komentar" cols="25"
rows="4"></textarea>
<p><input
type=submit value=kirim data/><input type=reset value=ulang>
</form>
</body>
</html>
Berikut picturenya :
Sekian terimakasih,
semoga bermanfaat.
