Untuk mendapatkan umpan balik dari pengunjung website,
biasanya dalam sebuah halaman website perlu ditambahkan fasilitas untuk
mengirimkan data yang berbentuk form masukan.
Penggunaan form yang hanya menggunakan HTML saja tidak
akan terlalu berguna. Form biasanya hanya berupa interface yang disediakan untuk mengumpulkan data dari user, dan akan diproses dengan bahasa
pemrograman web, seperti JavaScript atau PHP, dan disimpan didalam database
MySQL.
Perintah atau tag yang digunakan adalah <form> dan
diakhiri dengan tag </form>. Field-field
yang berada diantaranya digunakan untuk menentukan ukuran dan jenis dari
masing-masing input field. Berikut
ini adalah beberapa elemen yang dapat disertakan dalam suatu form.
Elemen input menentukan informasi pengguna, sedangkan
atribut-atribut untuk tag input diantaranya adalah :
- Checked digunakan untuk checkboxes dan radio button. Atribut ini dapat ditentukan nilai TRUE (checked) atau unchecked/false.
- Maxlength digunakan untuk menentukan jumlah maksimum karakter yang dapat dimasukan dalam suatu textbox.
- Name digunakan untuk menentukan nama form control. Hal ini digunakan untuk menentukan elemen data pada form ke resource yang memproses elemen ini.
- Size digunakan untuk menentukan ukuran form control. Ini dapat berupa nilai tunggal yang menentukan lebar kontrol dalam karakter, atau dalam pasangan lebar dan panjang.
- Src digunakan untuk menentukan gambar yang akan ditampilkan dengan kontrol.
- Type digunakan untuk menentukan jenis kontrol yang akan digunakan.
- Select digunakan untuk menandai awal dan akhir dari data dalam suatu list box atau suatu daftar pilihan drop-down.
- Option digunakan untuk membentuk masing-masing pilihan dalam text box atau list box
- Perintah Form
Untuk membuat form
atau formulir, ada beberapa objek yang sering dipakai, diantaranya :
- Objek Text
- Objek Radio
- Objek Checkbox
- Objek Select
- Objek Textarea
Contoh formulir HTML untuk memasukan data mahasiswa :
<!DOCTYPE
html>
<html>
<head>
<title>Form
Data Mahasiswa</title>
</head>
<body>
<h2>
<b>Form
Data Mahasiswa<br></b></font>
<form
name="form">
<hr>
<table>
<tr><td>Nama
Mahasiswa<td>: <input type="text" name="nama"
size="20">
<tr><td>Jenis
Kelamin<td>: <input type="radio" name="kelamin"
value="Pria">Pria <input type="radio"
name="kelamin" value="Wanita">Wanita
<tr><td>Hobi<td>:
<input type="checkbox" name="jalan"
value="Jalan">jalan
<tr><td><td>:
<input type="checkbox" name="musik"
value="Musik">Musik
<tr><td><td>:
<input type="checkbox" name="baca"
value="Baca">Baca
<tr><td>Agama<td>:
<select size="1" name="agama">
<option>Islam</option>
<option>Budha</option>
<option>Hindu</option>
<option>Kristen</option>
</select>
<tr><td>Asal
Sekolah<td>: <input type="text" name="asalsma"
size="35">
<tr><td>Keterangan<td>:
<textarea name="keterangan" cols="40" rows="5"></textarea>
</table>
<hr>
<input
type="submit" value="Kirim"> <input
type="reset" value="Reset">
</form>
</body>
</html>
 |
| Form Masukan |
- Method POST dan GET
Method POST dan GET adalah method yang digunakan dalam halaman HTML untuk mengirimkan parameter/data
dari halaman masukan ke halaman keluaran.
Ada perbedaan antara method pengiriman menggunakan method GET dan
POST. Jika dengan method GET maka
parameter akan ditampilkan di URL. Sedangkan POST tidak akan ditampilkan di
URL. Untuk data yang banyak, biasanya digunakan POST, atau data yang tidak
ingin dilihat misalkan data untuk login,
yang dikirimkan username dan password. Jika menggunakan GET maka username dan password-nya bisa terlihat sehingga untuk login autentifikasi digunakan method POST.
Berikut contoh bagaimana menangani
data yang dikirim dari halaman HTML kemudian diproses menggunakan bahasa lain,
misalnya dengan javascript ataupun dengan PHP.
A. Penanganan Form dengan JavaScript
Untuk menangani proses masukan form
menggunakan JavaScript dengan method POST dan method GET dapat dilakukan dengan
cara seperti berikut.
<!DOCTYPE html>
<html>
<form name="form" method="post">
<script
type="text/javascript">
function
proses()
{
var
nama=document.form.namaanda.value;
alert("Nama
Anda : "+nama");
}
</script>
<h2>Contoh
Masukan Data</h2>
<hr>
Nama
Anda : <input type="text" name="namaanda">
<input
type="button" value="Proses"
onclick="proses()">
</form>
</html>
 |
| Menangani Form dengan JavaScript |
B. Penanganan Form dengan PHP
Untuk menangani proses masukan form menggnunakan PHP,
sebelumnya di komputer anda harus sudah terpasang Web Server dengan PHP
Scripting yang sudah terinstal. Anda dapat menggunakan software XAMPP yang
tersedia secara gratis dan dapat di download disini.
1. Menggunakan Method POST
Untuk menangani proses masukan menggunakan method POST,
dapat dilakukan dengan contoh kode seperti berikut.
<html>
<form action="proses.php" method="POST">
<h2>Contoh
Masukan Data</h2>
<hr>
Nama
Anda : <input type="text" name="namaanda">
<input
type="submit" value="Proses">
</form>
</html>
 |
| Form Masuk Data |
Sedangkan untuk menangani action masukan data tersebut dapat ditangani dengan kode sebagai
berikut.
<?php
$namaanda
= $_POST["namaanda"];
echo
"Hallo Nama Anda : " . $namaanda; //atau print
$data
?>
2. Menggunakan Method GET
Untuk memahami proses masukan menggunakan method GET,
dapat dilakukan dengan contoh kode seperti berikut.
<html>
<form action="proses2.php" method="GET">
<h2>Contoh
Masukan Data</h2>
<hr>
Nama
Anda : <input type="text" name="namaanda">
<input
type="submit" value="Proses">
</form>
</html>
Sedangkan untuk menangani action masukan data tersebut, dapat ditangani dengan kode seperti
berikut.
<?php
$namaanda
= $_GET["namaanda"];
echo
"Hallo Nama Anda : " . $namaanda; //atau print
$data
?>
C. Menangani Beberapa Objek dalam Form
Untuk lebih memahami lagi bahasan dalam form dan objek
yang digunakan dalam pembuatan formulir, berikut akan diberikan contoh masukan
dengan beberapa objek dan cara penanganannya dalam PHP.
<!DOCTYPE
html>
<html>
<h2><b>Form
Registrasi Kuliah Online<br></b></h2></font>
<form
action="registrasi.php" method="post">
<hr>
<table>
<tr><td>Nama
Mahasiswa<td>: <input type="text" name="nama"
size="30">
<tr><td>Username<td>:
<input type="text" name="username"
size="20">
<tr><td>Password<td>:
<input type="password" name="password"
size="20">
<tr><td>Email<td>:
<input type="text" name="email" size="30">
<tr><td>Jenis
Kelamin<td>: <input type="radio" name="kelamin"
value="Pria">Pria
<input
type="radio" name="kelamin"
value="Wanita">Wanita
<tr><td>Hobi<td>:
<input type="checkbox" name="musik"
value="Musik">Musik
<tr><td><td>:
<input type="checkbox" name="jalan"
value="Jalan">Jalan
<tr><td><td>:
<input type="checkbox" name="baca"
value="Baca">Baca
<tr><td>Jurusan<td>:
<select size="1" name="jurusan">
<option>Sistem
Informasi</option>
<option>Akuntansi</option>
<option>Ilmu
Komunikasi</option>
<option>Teknik
Informatika</option>
</select>
<tr><td>Keterangan<td>:
<textarea name="keterangan" cols="40"
rows="5"></textarea>
</table>
<hr>
<input type="submit"
value="Kirim"> <input type="reset"
value="Reset">
</form>
</html>
 |
| Form dengan Berbagai Objek |
Untuk
menangani beberapa objek yang dikirim dari halaman HTML ke dalam PHP, dapat
dilakukan dengan cara berikut.
<!DOCTYPE
html>
<html>
<h3>Output
Registrasi</h3>
<hr>
<table>
<?php
echo
"<tr><td>Nama Mahasiswa<td>:
".$_POST["nama"];
echo
"<tr><td>Username<td>:
".$_POST["username"];
echo
"<tr><td>Password<td>:
".$_POST["password"];
echo
"<tr><td>Kelamin<td>:
".$_POST["kelamin"];
echo
"<tr><td>Hobi<td>:
".$_POST["musik"].$_POST["jalan"].$_POST["baca"];
echo
"<tr><td>Jurusan<td>:
".$_POST["jurusan"];
echo
"<tr><td>Keterangan<td>:
".$_POST["keterangan"];
?>
</html>
0 Comments