Tentu pernah bukan, pada umumnya form adalah suatu lembaran yang kita gunakan untuk urusan-urusan administrasi. Contohnya ketika kita mendaftar ke suatu instansi ( sekolah, melamar kerja atau mengajukan cuti ke lembaga kita ).
Mengutip dari web Rifki Mulyawan, dijelaskan bahwa :
Dokumen yang berisi spasi (disebut juga bidang atau tempat penampung) yang digunakan untuk mengetik atau memilih dan memasukkan informasi. Dokumen biasanya memiliki bagian cetakan yang sama, kecuali mungkin nomor seri atau digital.
Nah kalau dalam HTML, form digunakan untuk mengelola data yang kita punya. Layaknya sebuah dokumen, jika nanti kita submit / kirim menggunakan <input type="submit"> maka data yang kita tuliskan nanti bisa kita olah menggunakan bahasa php.
Tag <table> atau tag <p> merupakan salah satu dari beberapa tag yang dapat kita lihat langsung hasilnya, seperti :
<table style="width:100%">
<tr> // membuat baris ke-1
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr> // membuat baris ke-2
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Maka akan tampil :
Sedangkan untuk tag <form> ini tidak bisa kita lihat langsung. Karena secara UI tidak terlihat. Untuk menggunakan form, kita hanya perlu menambahkan tagnya, yaitu :
<form>
< ... input ... >
</form>
Bisanya form ini digunakan untuk input data seperti login, kirim data untuk disimpan maupun untuk pencarian. Bagian-bagian yang digunakan dalam form yaitu :
Kelompok Button
- <input type="button">
- <input type="reset">
- <input type="submit">
- <input type="checkbox">
- <input type="email">
- <input type="number">
- <input type="password">
- <input type="radio">
- <input type="text">
- <input type="color">
- <input type="date">
- <input type="datetime-local">
- <input type="file">
- <input type="hidden">
- <input type="image">
- <input type="month">
- <input type="range">
- <input type="search">
- <input type="tel">
- <input type="time">
- <input type="url">
- <input type="week">
Pertama kita buat nama file index.php dengan isi 2 input type untuk username dan password.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Log In Yuk!</title>
</head>
<body>
<form name = "formLogin" action = "cekLogin.php" method = "post">
<table>
<tr>
<td>Username</td>
<td><input type = "text" name = "textUser">
</tr>
<tr>
<td>Password</td>
<td><input type = "password" name = "textPass">
</tr>
<tr>
<td><input type = "submit"></td>
</tr>
</table>
</form>
</body>
</html>
Pada bagian
<form name = "formLogin" action = "cekLogin.php" method = "post">
Kita memulai membuat tag form dengan nama frmLogin, kemudian pada bagian action merupakan lokasi kemana setelah nanti tombol submit di-klik. Disini kita arahkan ke halaman cekLogin.php dengan metode post yang ditandai dengan method = "post".
Lalu pada bagian :
<input type = "text" name = "textUser">
Membuat tempat input untuk teks ( username ) dengan nama textUser. Begitu juga dengan yang ada di bagian password, kita buat dengan nama textPass.
Di bagian :
<input type = "submit">
Membuat sebuah tombol dengan label tulisan Submit. Menghasilkan tampilan :
Kemudian kita buat satu file lagi dengan nama cekLogin.php sebagai lokasi tempat setelah tombol Submit ditekan.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
</head>
<body>
<p align = "center">
<b>Selamat Datang!</b>
</p>
<?php //awal pembuka php
$nama = $_POST['textUser'];
$pass = $_POST['textPass'];
echo "Nama pengguna anda : <b>".$nama."</b><br>";
echo "Kata sandi anda : ".$pass;
?> // tutup php
</body>
</html>
Pada bagian ini kita menerima data dari input yang dilakukan di index.php, kita membuat variabel $nama dan $pass yang digunakan untuk menampung value yang telah di input melalui file index.php.
Perhatikan tulisan :
$_POST['textUser'];
textUser tersebut harus sama dengan name yang kita tuliskan di index.php, baik bagian :
<input type = "text" name = "textUser">
dan
<input type = "password" name = "textPass">
Jadi, variabel $nama dan $pass bisa menampung nilai atau value-nya.
Selanjutnya mari kita coba input username secara acak dengan password acak juga. Akses file index.php
Ex :
Username : belajarPHP
Password : 123
localhost/<nama_folder>/index.php
Akan tampil :
Inputkan username dan password-nya kemudian klik tombol Submit, akan menampilkan :
Horray, berhasil! 👌
Kita telah sukses belajar tentang form dalam HTML - PHP 😎
Tags:
HTML