Form dan Modulasi
Pengertian 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.
Penulisannya : 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 :
Tidak ada komentar:
Posting Komentar