Ada beberapa
contoh kasus yang mengharuskan kita membagi form dalam beberapa halaman, agar
proses input lebih mudah dan dapat memunculkan pilihan sesuai dengan inputan
awal. Berikut ini saya akan berbagi trick bagaimana membuat beberapa form yang
terpisah halaman bisa saling terhubung dalam sebuah proses.
Contoh kasus
yang mengharuskan kita membagi form dalam beberapa halaman adalah pendataan
dengan inputan yang cukup banyak. Misal data yang harus diinput lebih dari 20
atau 30 field input. Jika anda paksakan dimasukkan dalam satu halaman, maka
kemungkinan penyusunan textbox maupun objek lainnya akan sangat sulit. Apalagi
dengan keterbatasan layar yang mengakibatkan faktor keindahanya berkurang
karena kepenuhan. Disamping itu kadang kala form yang memiliki inputan yang
banyak dalam satu halaman akan sedikit menyulitkan bagi sebagian pengguna.
Contoh kasus
lain, seperti inputan yang dilakukan secara bertahap dan bercabang. Proses
inputan awal akan mempengaruhi form berikutnya yang mungkin saja berbeda. Misal
anda membuat sistem survei yang terdiri dari serangkaian pertanyaan yang berbeda.
Saya akan
contohkan yang sederhana pada kasus pendaftaran keanggotaan dengan skenario :
Form awal
akan menampilkan nama, alamat dan pilihan jenis keanggotaan yang terdiri dari
gratis dan berbayar. Setelah form awal dikirim dan jenis keanggotaan yang
dipilih adalah gratis, maka akan memunculkan form isian nama teman yang
direkomendasikan. Dan jika memilih jenis keanggotaan berbayar, maka akan
memunculkan form jenis pembayaran dll.
Tahap
terakhir dari proses tersebut akan kita simpan dalam database.
Membuat form tahap 1
Form utama
tahap 1 akan saya rancang seperti berikut :
Dengan
susunan html :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<form id="Form1" name="Form1" method="post" action="form2.php">
<table
width="500" border="0" align="center" cellpadding="10" cellspacing="0" bgcolor="#336600">
<tr>
<td
height="50" colspan="3" align="center">PENDAFTARAN
ANGGOTA</td>
</tr>
<tr>
<td
width="132">NAMA</td>
<td
width="3">:</td>
<td
width="305"><input name="nama" type="text" id="nama" size="30" maxlength="30" required="true" /></td>
</tr>
<tr>
<td>ALAMAT</td>
<td>:</td>
<td><input
name="alamat" type="text" id="alamat" size="50" maxlength="100" required="true" /></td>
</tr>
<tr>
<td>KEANGGOTAAN</td>
<td>:</td>
<td><select
name="jenis_anggota" id="jenis_anggota">
<option
value="1">Gratis</option>
<option
value="2">Berbayar</option>
</select>
</td>
</tr>
<tr>
<td
height="50" colspan="3" align="center"><input type="submit" name="btnLanjut" id="btnLanjut" value="Lanjut" />
<input
type="reset" name="Reset" id="button" value="Ulangi" /></td>
</tr>
</table>
</form>
|
Form diatas,
akan dikirim ke form lanjutan yaitu form 2 yang akan menampilkan form sesuai
dengan pilihan jenis anggota.
Membuat form tahap 2
Form tahap
kedua, akan melakukan proses lanjutan dengan mengambil nilai dari form tahap
pertama. Jika pada form pertama jenis keanggotaan dipilih gratis maka akan
dimanculkan form 2 dengan tampilan seperti berikut :
Dana jika
dipilih berbayar maka akan tampil form seperti berikut :
Kode html
form 2 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
<?php
if($_POST['jenis_anggota']==1) { ?>
<form id="Form2" name="Form2" method="post" action="form3.php">
<table
width="500" border="0" align="center" cellpadding="10" cellspacing="0" bgcolor="#336600">
<tr>
<td
height="50" colspan="3" align="center">REKOMENDASI
TEMAN</td>
</tr>
<tr>
<td>NAMA</td>
<td>:</td>
<td><?php
echo $_POST['nama']?><input
name="nama" type="hidden" id="nama" value="<?php echo $_POST['nama']?>" /></td>
</tr>
<tr>
<td>ALAMAT</td>
<td>:</td>
<td><?php
echo $_POST['alamat']?><input
name="alamat" type="hidden" id="alamat" value="<?php echo $_POST['alamat']?>" /><input name="jenis_anggota" type="hidden" id="jenis_anggota" value="<?php echo
$_POST['jenis_anggota']?>" /></td>
</tr>
<tr>
<td
width="132">EMAIL 1</td>
<td
width="3">:</td>
<td
width="305"><input name="email1" type="email" id="email1" size="30" maxlength="100" required="true" /></td>
</tr>
<tr>
<td>EMAIL
2</td>
<td>:</td>
<td><input
name="email2" type="email" id="email2" size="30" maxlength="100" required="true" /></td>
</tr>
<tr>
<td
height="50" colspan="3" align="center"><input
type="submit" name="btnSimpan" id="btnSimpan" value="Simpan" />
<input
type="button" name="btnKembali" id="btnKembali" value="Kembali" onclick="javascript:window.back()" />
<input
type="reset" name="Reset" id="button" value="Ulangi" /></td>
</tr>
</table>
</form>
<?php } else { ?>
<form id="Form2" name="Form2" method="post" action="form3.php">
<table
width="500" border="0" align="center" cellpadding="10" cellspacing="0" bgcolor="#336600">
<tr>
<td
height="50" colspan="3" align="center">JENIS
PEMBAYARAN</td>
</tr>
<tr>
<td>NAMA</td>
<td>:</td>
<td><?php
echo $_POST['nama']?><input
name="nama" type="hidden" id="nama" value="<?php echo $_POST['nama']?>" /></td>
</tr>
<tr>
<td>ALAMAT</td>
<td>:</td>
<td><?php
echo $_POST['alamat']?><input
name="alamat" type="hidden" id="alamat" value="<?php echo $_POST['alamat']?>" />
<input
name="jenis_anggota" type="hidden" id="jenis_anggota" value="<?php echo $_POST['jenis_anggota']?>" /></td>
</tr>
<tr>
<td
width="132">NAMA BANK</td>
<td
width="3">:</td>
<td
width="305"><input name="nama_bank" type="text" id="nama_bank" size="30" maxlength="30" required="true" /></td>
</tr>
<tr>
<td>PEMILIK</td>
<td>:</td>
<td><input
name="nama_pemilik" type="text" id="nama_pemilik" size="30" maxlength="50" required="true" /></td>
</tr>
<tr>
<td>NOMOR</td>
<td> </td>
<td><input
name="nomor_rekening" type="text" id="nomor_rekening" size="30" maxlength="30" required="true" /></td>
</tr>
<tr>
<td
height="50" colspan="3" align="center"><input
type="submit" name="btnSimpan" id="btnSimpan" value="Simpan" />
<input
type="button" name="btnKembali" id="btnKembali" value="Kembali" onclick="javascript:window.back()" />
<input
type="reset" name="Reset" id="button" value="Ulangi" /></td>
</tr>
</table>
</form>
<?php } ?>
|
Pada form ke
2, jika anda amati lebih detail pada perintah htmlnya, ada beberapa objek form
yang tersembunyi type="hidden" yang ditanamkan dan akan dibawa ke
tahap selanjutnya. Objek form yang tersembunyi tersebut diberi nilai sesuai dengan
inputan awal dengan perintah $_POST['nama_objek']. Amati pada perintah :
1
|
<input name="nama" type="hidden" id="nama" value="<?php echo $_POST['nama']?>" />
|
Halaman tahap 3
Halaman ke 3
pada tahapan proses ini adalah bagian proses selanjutnya, bisa menyimpan atau
melanjutkan form setelahnya.
Nilai yang
dikirim ke halaman 3 tergantung inputan pada tahap dua. Jika tahap ke 2 yang muncul
pembayaran maka nilai yang bisa diambil pada halaman 3 yaitu : nama, alamat,
jenis_anggota, nama_bank, pemilik dan nomor. Dan jika yang muncul rekomendasi
teman maka halaman 3 akan menerima nilai : nama, alamatm jenis_anggota, email1
dan email2.
Berikut ini
file contoh membagi form dalam beberapa halaman
Semoga
bermanfaat
Zainal Hakim
