- Form Input Type TEXT DAN PASSWORD
- Form Input Type RADIO
- Form Input Type CHECKBOX
- Form Input Type COMBO BOX
- Form Input Type TEXTAREA
From inputan dibuat dengan tag-tag HTML. Halam yang mengandung form murni (tidak ada script php) tidak harus disimpan dalam bentuk php, bisa dalam bentuk html.
Untuk merancang sebuah form inputan, setidaknya ada 3 hal penting yaitu:
1. Method
Method dari sebuah form menentukan bagaimana data inputan form dikirim. Method ini ada dua macam, yaitu GET dan POST, method ini menentukan bagaimana data inputan dikirim dan diproses oleh PHP.
2. Action
Action dari sebuah form menetukan dimana data inputan dari form diproses. Jika action ini dikosongkan, maka dianggap proses form terjadi di halaman yang sama. Jadi halaman form dan halaman proses bisa saja dipisah atau dijadikan satu.
3. Submit Button
Submit button merupakan sebuah tombol (pada umumnya) yang berfungsi sebagai trigger pengiriman data dari form inputan. Jika tombol ini ditekan, maka data form akan dikirimkan (diproses) dihalaman yang sudah ditentukan pada atribut action.
1. BERBAGAI CARA PENANGANAN FORM
Cara 1 : Menyatukan antara Form dan Proses
Proses pengolahan form dilakukan di halaman yang sama denga form inputanya.
Nama file : INPUT01.PHP
Desk : Program contoh pengolahan form dimana antara form inputan dan proses pengolahan barada dalam satu halaman.
<html>
<head><tittle>Pengolahan Form</title></head>
<body>
<FORM ACTION="" METHOD="POST" NAME="input">
Nama Anda : <input type="text" name="nama"><br>
<input type="submit" name="input" value = "input">
</FORM>
</body>
</html>
<?php
if (isset ($_POST['input'])) {
$nama = $_POST['nama'];
echo "Nama Anda : <b><i>$nama</b>";
}
?>
Penjelasan Program 1
Beberapa hal yang perlu diperhatikan dari program 1 diantaranya mengenai nama setiap komponen form karen nama ini akan menjadi Index Aray dalam PHP. Pada program ini, value atribut action pada tag form tidak diisi (baris 4), ini berarti bahwa proses pengolahan form berada di halaman yang sama. Selanjutanya (baris 4) method yang digunakan dalam penganganan form adalah POST. Cara ini lebih disarankan dalam penanganan sebuah form inputan.
Mulai baris 11 hingga 16, terdapat script/program PHP yang akan menangani (mengolah) nilai yang diinputkan melalui form. Letak proses inputan ini boleh sebelum atau sesudah form, tergantung kebutuhan. Pada baris ke 12, terdapat pemeriksaan kondisi apakah tombol dengan nama "input" (Perhatikan index array $_POST dan d=bandingkan dengan name tombol submit pada form) benar-benar ditekan atau tidak oleh user. Selanjutnya pada baris ke 13, nilai inputan dengan nama "nama" akan diambil dan dimasukan ke variabel $nama. Index Array $_POST pada baris 13 harus sama dengan value atribut name pada baris ke 5.
Penjelasan Program 2,3,4,5
Program 2 dan program 3 pada prinsipnya sama dengan program 1. Hasilnya pun sama. Akan tetapi, proses penanganan form (PHP) terpisah dengan tampilan form inputanya (HTML). Pada program 2 dan program 3, penanganan form menggunakan method POST, sedag pada program 4 dan program 5, penanganan form dilakukan dengan method GET. Perhatikan, method ini menentukan bagaimana sebuah form diproses dan bagaimana variabel inputan diambil. Bandingkan baris ke 2 dan ke 3 pada program 3 dan program 5 !
<html>
<head><title>Pengolahan Form ~ Text</title></head>
<body>
<FORM ACTION="PROSES04.php" METHOD="POST" NAME="input">
Sahabat-Sahabat Dekatku<br>
<input type="text" name="nama1"><br>
<input type="text" name="nama2"><br>
<input type="text" name="nama3"><br>
<input type="text" name="nama4"><br>
<input type="submit" name="Input" value="Input">
</FORM>
</body>
</html>
Program 7
Nama file : PROSES04.PHP
Desk : Program penanganan form inputan untuk program 6
<?php
if (isset($_POST['Input'])) {
$nama1 = $_POST['nama1'];
$nama2 = $_POST['nama2'];
$nama3 = $_POST['nama3'];
$nama4 = $_POST['nama4'];
echo "<b>Nama Sahabat-sahabat Dekatku :</b> <br>";
echo $nama1. "<br>";
echo $nama2. "<br>";
echo $nama3. "<br>";
echo $nama4. "<br>";
}
?>
<html>
<head><title>Pilih Jurusan</title></head>
<body>
<FORM ACTION="PROSES06.PHP" METHOD="POST" NAME="Input">
<h2>Pilih Jurusan Anda :</h2>
<input type="radio" name="jurusan" value="TI" checked> Teknik Informatika<br>
<input type="radio" name="jurusan" value="SI"> Sistem Informasi<br>
<input type="radio" name="jurusan" value="SK"> Sistem Komputer<br>
<input type="radio" name="jurusan" value="KA"> Komputerisasi Akuntansi<br>
<input type="submit" name="Pilih" value="Pilih">
</FORM>
</body>
</html>
Program 11
Nama file : PROSES.PHP
Desk : Program untuk mengambil dan menampilkan jurusan yang dipilih pada program 10
<?php
if (isset($_POST['Pilih'])) {
$jurusan = $_POST['jurusan'];
echo "Jurusan Anda Adalah
<b><font color='red'> $jurusan</font></b>";
}
?>
3. Submit Button
Submit button merupakan sebuah tombol (pada umumnya) yang berfungsi sebagai trigger pengiriman data dari form inputan. Jika tombol ini ditekan, maka data form akan dikirimkan (diproses) dihalaman yang sudah ditentukan pada atribut action.
1. BERBAGAI CARA PENANGANAN FORM
Cara 1 : Menyatukan antara Form dan Proses
Proses pengolahan form dilakukan di halaman yang sama denga form inputanya.
- Program 1
Nama file : INPUT01.PHP
Desk : Program contoh pengolahan form dimana antara form inputan dan proses pengolahan barada dalam satu halaman.
<html>
<head><tittle>Pengolahan Form</title></head>
<body>
<FORM ACTION="" METHOD="POST" NAME="input">
Nama Anda : <input type="text" name="nama"><br>
<input type="submit" name="input" value = "input">
</FORM>
</body>
</html>
<?php
if (isset ($_POST['input'])) {
$nama = $_POST['nama'];
echo "Nama Anda : <b><i>$nama</b>";
}
?>
Penjelasan Program 1
Beberapa hal yang perlu diperhatikan dari program 1 diantaranya mengenai nama setiap komponen form karen nama ini akan menjadi Index Aray dalam PHP. Pada program ini, value atribut action pada tag form tidak diisi (baris 4), ini berarti bahwa proses pengolahan form berada di halaman yang sama. Selanjutanya (baris 4) method yang digunakan dalam penganganan form adalah POST. Cara ini lebih disarankan dalam penanganan sebuah form inputan.
Mulai baris 11 hingga 16, terdapat script/program PHP yang akan menangani (mengolah) nilai yang diinputkan melalui form. Letak proses inputan ini boleh sebelum atau sesudah form, tergantung kebutuhan. Pada baris ke 12, terdapat pemeriksaan kondisi apakah tombol dengan nama "input" (Perhatikan index array $_POST dan d=bandingkan dengan name tombol submit pada form) benar-benar ditekan atau tidak oleh user. Selanjutnya pada baris ke 13, nilai inputan dengan nama "nama" akan diambil dan dimasukan ke variabel $nama. Index Array $_POST pada baris 13 harus sama dengan value atribut name pada baris ke 5.
Gambar1.1 Tampilan Program 1
Cara 2 : Memisahkan antara Form dan Proses
Proses pengolahan form dilakukan di halaman yang terpisah dengan form inputanya. Jika proses penganganan form berada diilakukan di halaman yang berbeda, maka value atribut action pada tag form harus diisi dengan alamat halaman tempat proses pengolahan form.
- Program 2
Nama file : INPUT02.PHP
Desk : Program menampilkan form inputan dengan method POST
<html>
<head><title>Pengolahan Form</title></head>
<body>
<FORM ACTION="PROSES02.PHP" METHOD="POST" NAME="Input">
Nama Anda : <input type="text" name="nama"><br>
<input type="submit" name="Input" value="Input">
</FORM>
</body>
</html>
- Program 3
Nama file : PROSES02.PHP
Desk : Program penanganan form inputan untuk Program 2.
<?php
if (isset($_POST['Input'])) {
$nama = $_POST['nama'];
echo "Nama Anda : <b><i>$nama</b>";
}
?>
Gambar 2 tampilan Program 2
Gambar 3 tampialan Program 3
Program 4
Nama file : INPUT03.PHP
Desk : Program menampilkan form inputan dengan method GET
<html>
<head><title>Pengolahan Form</title></head>
<body>
<FORM ACTION="PROSES03.PHP" METHOD="GET NAME="Input">
Nama Anda : <input type="text" name="nama"><br>
<input type="Submit" name="Input" value="Input">
</FORM>
</body>
</html>
Program 5
Nama file : PROSES03.PHP
Desk : Program penanganan form inputan untuk Program 4
<?php
if (isset($_POST['Login'])) {
$user = $_POST['username'];
$pass = $_POST['password'];
if ($user == "feni apriani" && $pass == "8888"){
echo "<h2>Login Berhasil</h2>";
} else {
echo "<h2>Login Gagal</h2>";
}
}
?>
Program 2 dan program 3 pada prinsipnya sama dengan program 1. Hasilnya pun sama. Akan tetapi, proses penanganan form (PHP) terpisah dengan tampilan form inputanya (HTML). Pada program 2 dan program 3, penanganan form menggunakan method POST, sedag pada program 4 dan program 5, penanganan form dilakukan dengan method GET. Perhatikan, method ini menentukan bagaimana sebuah form diproses dan bagaimana variabel inputan diambil. Bandingkan baris ke 2 dan ke 3 pada program 3 dan program 5 !
Gambar 4 Tampilan Program 4
Gambar 5 Tampilan Program 5
2. FORM INPUTAN TEXT & PASSWORD
Program 6
Nama file : INPUT04.PHP
Desk : Program menampilkan form inputan text ddalam jumlah banyak
<head><title>Pengolahan Form ~ Text</title></head>
<body>
<FORM ACTION="PROSES04.php" METHOD="POST" NAME="input">
Sahabat-Sahabat Dekatku<br>
<input type="text" name="nama1"><br>
<input type="text" name="nama2"><br>
<input type="text" name="nama3"><br>
<input type="text" name="nama4"><br>
<input type="submit" name="Input" value="Input">
</FORM>
</body>
</html>
Program 7
Nama file : PROSES04.PHP
Desk : Program penanganan form inputan untuk program 6
<?php
if (isset($_POST['Input'])) {
$nama1 = $_POST['nama1'];
$nama2 = $_POST['nama2'];
$nama3 = $_POST['nama3'];
$nama4 = $_POST['nama4'];
echo "<b>Nama Sahabat-sahabat Dekatku :</b> <br>";
echo $nama1. "<br>";
echo $nama2. "<br>";
echo $nama3. "<br>";
echo $nama4. "<br>";
}
?>
Penjelasan Program 6 dan Program 7
Baris 3-6 pada program 7 merupakan proses pengambilan nilai dari masing-masing form inputan text yang terdapat pada program 6. Selanjutnya variabel ini ditampilkan di layar (baris 8-11 pada program 7).
Gambar 6 Tampilan Program 6
Gambar 7 Tampilan Program 7
Program 8
Nama file : INPUT05.PHP
Desk : Program menampilkan form login (Inputan text dan password)
<html>
<head><title>Login Here</title></head>
<body>
<FORM ACTION="PROSES05.php" METHOD="POST" NAME="input">
<h2> Login Here...</h2>
Username : <input type="text" name="username"><br>
Password : <input type="password" name="password"><br>
<input type="submit" name="Login" value="Login">
<input type="reset" name="reset" value="Reset">
</FORM>
</body>
</html>
Program 9
Nama file : PROSES05.PHP
Desk : Program sederhana unttuk memeriksa inputan username dan password pada program 8
<html>
<head><title>Login Here</title></head>
<body>
<FORM ACTION="PROSES05.php" METHOD="POST" NAME="input">
<h2> Login Here...</h2>
Username : <input type="text" name="username"><br>
Password : <input type="password" name="password"><br>
<input type="submit" name="Login" value="Login">
<input type="reset" name="reset" value="Reset">
</FORM>
</body>
</html>
Penjelasan Program 8 dan Program 9
Program 8 akan menampilkan form login sederhana yang terdiri dari inputan username dan password. Selanjutnya nilai yang diinput akan diproses di program 9. Jika username dan password diinput dengan benar maka akan ditampilkan pesan berhasil (lihat gambar) dan jika login salah maka akan ditampilkan pesan kesalahan (lihat gambar).
Gambar 8 Tampilan menu awal
Gambar 9 Tampilan jika login berhasil
Gambar 10 Tampilan menu awal
Gambar 11 tampilan jika login gagal
3. FORM INPUT TYPE RADIO
Pada inputan jenis radio button, user hanya bisa memilih satu pilihan di antara beberapa pilihan.
Program 10
Nama file: INPUT06.PHP
Desk : Program menampilkan form pilihan jurusan dengan radio button
<head><title>Pilih Jurusan</title></head>
<body>
<FORM ACTION="PROSES06.PHP" METHOD="POST" NAME="Input">
<h2>Pilih Jurusan Anda :</h2>
<input type="radio" name="jurusan" value="TI" checked> Teknik Informatika<br>
<input type="radio" name="jurusan" value="SI"> Sistem Informasi<br>
<input type="radio" name="jurusan" value="SK"> Sistem Komputer<br>
<input type="radio" name="jurusan" value="KA"> Komputerisasi Akuntansi<br>
<input type="submit" name="Pilih" value="Pilih">
</FORM>
</body>
</html>
Program 11
Nama file : PROSES.PHP
Desk : Program untuk mengambil dan menampilkan jurusan yang dipilih pada program 10
<?php
if (isset($_POST['Pilih'])) {
$jurusan = $_POST['jurusan'];
echo "Jurusan Anda Adalah
<b><font color='red'> $jurusan</font></b>";
}
?>
Penjelasan Program 10 dan 11
Program 10 akan menampilkan form pilihan inputan jurusan dengan radio button (lihat gambar). Pada form inputan jenis radio button, name dari masing-masing radio button harus sama, akan tetapi valuenya harus dibedakan. Perhatikan program 10 paa baris 6-9! untuk mengambil nilai (value) dari form jenis radio, bisa langsung dengan mengakses name dari form tersebut. Perhatikan program 11 baris ke 3.
Gambar 12 Tampilan Program 10
Gambar 13 Tampilan Program 11
4. FORM INPUT TYPE CHECK BOX
Pada form inputan jenis check box, user dimungkinkan memilih lebih dari satu pilihan.
Program 12
Nama file : INPUT07.PHP
Desk : Program menampilkan form inputan nama band favorit dengan check box.
<head><title>BAND FAVORITE~Inputan Checkbox</title></head>
<body>
<FORM ACTION="PROSES07.PHP" METHOD="POST" NAME="Inputan">
<h2> Pilih Band Favorite Anda :</h2>
<input type="Checkbox" name="band01" value="Padi" checked> Padi <br>
<input type="Checkbox" name="band02" value="Sheila on 7"> Sheila on 7 <br>
<input type="Checkbox" name="band03" value="Dewa 19"> Dewa 19 <br>
<input type="Checkbox" name="band04" value="Ungu"> Ungu <br>
<input type="submit" name="Pilih" value="Pilih">
</FORM>
</body>
</html>
Program 13
Nama file : PROSES07.PHP
Desk : Program untuk menampilkan nama band favorit sesuai dengan inputan pada program 12
<?php
if (isset($_POST['Pilih'])) {
echo "Band Favorite Anda Adalah : <br>";
if (isset($_POST['band01'])) {
echo "+" . $_POST['band01'] . "<br>";
}
if (isset($_POST['band02'])) {
echo "+" . $_POST['band02'] . "<br>";
}
if (isset($_POST['band03'])) {
echo "+" . $_POST['band03'] . "<br>";
}
if (isset($_POST['band04'])) {
echo "+" . $_POST['band04'] . "<br>";
}
}
?>
Penjelasan Program 12 dan 13
Program 12 akan menmpilkan form pilihan inputan check box band favorit (lihat gambar). Pada form inputan jenis check box, name dari masing-masing check box harus dibedakan. User dapat memilih lebih dari satu pilihan. Perhatikan program 12 baris 6-9! untuk mengambil nilai (value) dari form jenis check box, sebaiknya diperiksa terlebih dahulu apakah check box dipilih atau tidak, dengan menggunakan fungsi isset(). Perhatikan program 13 baris ke 4. Jika check box di cek (dipilih) maka ambil value dari check box tersebut (Baris ke 5).
Gambar 14 Tampilan Pogram 12
Gambar 15 Tampilan Program 13
5. FORM INPUT TYPE COMBO BOX
Program 14
Nama file : INPUT08.PHP
Desk : Program menampilkan form inputan film kartun favorit dengan combo box.
<html>
<head><title> Film Kartun Favorit ~ Inputan Combo Box </title></head>
<body>
<FORM ACTION="PROSES08.PHP" METHOD="POST" NAME="input">
<h2> Pilih Film Kartun Favorite Anda : </h2>
<select name="Kartun">
<option value="Sponge Bob"> Sponge Bob </option>
<option value="Caroline"> Caroline </option>
<option value="Tinker Bell"> Tinker Bell </option>
<option value="Doraemon"> Doraemon </option>
<option value="Conan"> Conan </option>
</select>
<input type="Submit" name="Pilih" value="Pilih">
</FORM>
</body>
</html>
Program 15
Nama file : PROSES08.PHP
Desk : Program untuk menampilkan nama film kartun favorit sesuai dengan inputan pada Program 14
<?php
if (isset($_POST['Pilih'])) {
$film = $_POST['Kartun'];
echo "Film Kartun Favorite Anda Adalah :
<Font Color=red><b>$film</b></font>";
}
?>
Penjelasan Program Program 14 dan 15
Program 14 akan menampilkan form pilihan inputan combo box film kartun favorit (lihat gambar). Untuk membuat inputan jenis combo box, bisa menggunakan tag <select> dan <option>. Pada form inputan jenis check box, name diletakan pada tag <select>. User hanya dapat memilih satu pilihan dari sejumlah pilihan yang ditampilkan dalam bentuk drop down list. Lihat gambar ! Untuk mengambil nilai (value) dari form jenis combo box, dapat langsung mengaksesnya sesuai dengan name-nya. Perhatikan Program 15 baris 3 !
Gambar 16 Tampilan Program 14
Gambar 17 Tampilan Program 15
Program 16
Nama file : INPUT09.PHP
Desk : Program menampilkan form inputan kritik dan saran dengan text area.
<html>
<head><title> Kritik dan Saran ~ Inputan
Textarea</title></head>
<body>
<FORM ACTION="PROSES09.PHP" METHOD="POST" NAME="Input">
<h2> Input Kritik / Saran : </h2>
<textarea name="Saran" cols="40"
rows="5"></textarea><br>
<input type="submit" name="Proses" value="Input
Saran">
</FORM>
</body>
</html>
Program 17
Nama file : PROSES09.PHP
Desk : Program untuk menampilkan isi kritik / saran sesuai dengan inputan text area pada program 16
<?php
if (isset($_POST['Proses'])) {
$saran=nl2br($_POST['Saran']);
echo "Kritik / Saran Anda Adalah : <br>";
echo "<font color=red><b>$saran</b></font>";
}
?>
Penjelasan Program 16 dan 17
Program 16 akan menampilkan form kritik saran menggunakan text area (lihat gambar). Untuk membuat inputan jenis combo box, bisa menggunak tag <textarea>. Berbeda dengan inputan type text yang hanya bisa diinput satu baris, pad text area, bisa diinput lebih dari satu baris. Lihat gambar! Untuk mengambil nilai (value) dari form jenis textarea, dapat langsung mengaksesnya sesuai dengan name-nya. Perhatikan program 17 baris ke 3.
Gambar 18 Tampilan Program 16
Gambar 19 Tampilan Program 17
SEMOGA BERMANFAAT SAHABAT ^_^
