Inilah Biodataku
RADIO BUTTONS DAN CHECK BOXES
Selanjutnya adalah Radio Buttons dan Check Boxes. Radio Buttons memungkinkan kita memilih satu dari beberapa pilihan. Check Boxes memungkinkan kita memilih satu atau lebih atau semua pilihan. Pertama-tama kita lihat Radio Buttons.
<INPUT TYPE=RADIO NAME="TEMAN BAIK">
Tambahkan 2 lagi.
<INPUT TYPE=RADIO NAME="TEMAN BAIK"> <INPUT TYPE=RADIO NAME="TEMAN BAIK"> <INPUT TYPE=RADIO NAME="TEMAN BAIK">
Hmmm... saya pikir kita perlu memberi baris baru untuk mereka masing-masing. <INPUT TYPE=RADIO NAME="TEMAN BAIK"><BR>
<INPUT TYPE=RADIO NAME="TEMAN BAIK"><BR> <INPUT TYPE=RADIO NAME="TEMAN BAIK"><P>
Perhatikan bahwa setiap masukan menggunakan nama yang sama. Alasannya akan segera tampak berikut ini.
Setiap Radio Buttons harus diberi VALUE.
<INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Ed"><BR> <INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Rick"><BR> <INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Tom"><P>
Bab IX – Form
Susanto, S.Kom
Sekarang beri nama masing-masing.
<INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Ed"> Edi Hasibuan<BR> <INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Rick"> Ricky Martanto<BR> <INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Tom"> Tomi Sudarto<P> Edi Hasibuan
Ricky Martanto Tomi Sudarto
Anda dapat gunakan tag html yang lain di sini.
Pada prinsipnya Radio Buttons anda sudah selesai. Anda dapat memperjelas pilihan ini dengan menambahkan suatu kalimat di atasnya dan, jika anda mau, memilih satu di antaranya sebagai default (optional).
Siapakah TEMAN BAIK anda?<BR>
<INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Ed" CHECKED> Edi Hasibuan<BR> <INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Rick"> Ricky Martanto<BR> <INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Tom"> Tomi Sudarto<P> Siapakah TEMAN BAIK anda?
Edi Hasibuan Ricky Martanto Tomi Sudarto
Kita tentu saja hanya dapat memilih satu di antaranya. Pilihan ini akan menghasilkan pasangan nama/nilai seperti TEMAN BAIK=Ed (atau siapa pun yang dipilih).
Untuk membuat Check Boxes kita lakukan hal yang sama dengan tadi. Mulailah dengan ini...
<INPUT TYPE=CHECKBOX NAME="Ed">
Tambahkan 3 lagi, tapi kali ini beri masing-masing NAME yang berbeda. (Gunakan juga baris baru untuk setiap pilihan.)
<INPUT TYPE=CHECKBOX NAME="Ed"><BR> <INPUT TYPE=CHECKBOX NAME="Rick"><BR> <INPUT TYPE=CHECKBOX NAME="Tom"><BR> <INPUT TYPE=CHECKBOX NAME="BM"><P>
Bab IX – Form
Susanto, S.Kom
Setiap Check Box kita beri VALUE yang sama. <INPUT TYPE=CHECKBOX NAME="Ed" VALUE="YA"><BR> <INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YA"><BR> <INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YA"><BR> <INPUT TYPE=CHECKBOX NAME="BM" VALUE="YA"><P>
Catatan - Untuk Check Boxes NAME yang dipakai harus berbeda, tetapi VALUE nya tetap. Sedangkan untuk Radio Buttons VALUE berbeda tetapi NAME nya tetap.
OK, masing-masing kita beri label/nama.
<INPUT TYPE=CHECKBOX NAME="Ed" VALUE="YA"> Edi Hasibuan<BR> <INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YA"> Ricky Martanto<BR> <INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YA"> Tomi Sudarto<BR> <INPUT TYPE=CHECKBOX NAME="BM" VALUE="YA"> Baramuli<P>
Edi Hasibuan Ricky Martanto Tomi Sudarto Baramuli
Dan terakhir, anda mungkin ingin menambahkan sesuatu di atasnya serta memilih beberapa di antaranya sebagai default. Kalau anda mau, tentu saja.
Siapakah di antara mereka yang merupakan sahabat anda?<BR>
<INPUT TYPE=CHECKBOX NAME="ED" VALUE="YA" CHECKED> Edi Hasibuan<BR> <INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YA"> Ricky Martanto<BR> <INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YA" CHECKED> Tomi Sudarto<BR> <INPUT TYPE=CHECKBOX NAME="BM" VALUE="YA"> Baramuli<P>
Siapakah di antara mereka yang merupakan sahabat anda? Edi Hasibuan
Ricky Martanto Tomi Sudarto Baramuli
Kita dapat memilih 1, 2, tidak ada atau semuanya. Pilihan tersebut akan kita dapatkan dalam bentuk pasangan nama/nilai....
Ed=YA Tom=YA
Bab IX – Form
Susanto, S.Kom
(atau apapun yang dipilih... jika tidak ada yang yang dipilih, browser tidak akan memberi apapun)
Anda mungkin bertanya-tanya....Bagaimana jika saya ingin mengajukan 3 pertanyaan berbeda untuk kelompok yang sama?? Bagaimana saya bisa melakukannya?
Siapakah di antara mereka yang merupakan sahabat anda?
Edi Hasibuan Ricky Martanto Tomi Sudarto Baramuli
Siapakah di antara mereka yang akan anda pinjami uang? Edi Hasibuan
Ricky Martanto Tomi Sudarto Baramuli
Siapakah yang anda ijinkan berkencan dengan adik anda? Edi Hasibuan
Ricky Martanto Tomi Sudarto Baramuli
Ingat! Dalam sebuah form html tidak boleh ada NAME yang sama. Jadi, kita harus menggunakan nama yang berbeda untuk setiap pertanyaan. Yang saya maksud dengan tidak boleh, bukan berarti komputer anda bisa rusak.... paling-paling hal ini akan membingungkan browser, atau program parser (Mailto Formatter adalah program parser), atau cgi script yang memprosesnya. Paling tidak ini akan membingungkan anda dalam mengartikan data dari form tersebut.
Berikut ini adalah perintah html untuk 3 pertanyaan tadi. Tag untuk membuat <TABLE> ditampilkan dalam warna hijau. Ini hanya untuk memudahkan anda, warna tersebut tidak ada pengaruhnya terhadap jalannya form.
<CENTER>
<TABLE WIDTH=600 BORDER=1 CELLSPACING=1><TR> <TD WIDTH=199>
Siapakah di antara mereka yang merupakan sahabat anda?<BR>
<INPUT TYPE=CHECKBOX NAME="Teman?..Ed" VALUE="YA"> Edi Hasibuan<BR> <INPUT TYPE=CHECKBOX NAME="Teman?..Rick" VALUE="YA"> Ricky Martanto<BR> <INPUT TYPE=CHECKBOX NAME="Teman?..Tom" VALUE="YA"> Tomi Sudarto<BR> <INPUT TYPE=CHECKBOX NAME="Teman?..BM" VALUE="YA"> Baramuli<P>
</TD>
<TD WIDTH=200>
Siapakah di antara mereka yang akan anda pinjami uang?<BR>
<INPUT TYPE=CHECKBOX NAME="Utang?...Ed" VALUE="YA"> Edi Hasibuan<BR> <INPUT TYPE=CHECKBOX NAME="Utang?...Rick" VALUE="YA"> Ricky Martanto<BR> <INPUT TYPE=CHECKBOX NAME="Utang?...Tom" VALUE="YA"> Tomi Sudarto<BR> <INPUT TYPE=CHECKBOX NAME="Utang?...BM" VALUE="YA"> Baramuli<P>
</TD>
<TD WIDTH=199>
Siapakah yang anda ijinkan berkencan dengan adik anda?<BR>
<INPUT TYPE=CHECKBOX NAME="Kencan?...Ed" VALUE="YA"> Edi Hasibuan<BR> <INPUT TYPE=CHECKBOX NAME="Kencan?...Rick" VALUE="YA"> Ricky Martanto<BR>
Bab IX – Form
Susanto, S.Kom
<INPUT TYPE=CHECKBOX NAME="Kencan?...Tom" VALUE="YA"> Tomi Sudarto<BR> <INPUT TYPE=CHECKBOX NAME="Kencan?...BM" VALUE="YA"> Baramuli<P>
</TD>
</TR></TABLE> </CENTER>
Misalkan anda memilih seperti berikut.... Siapakah di antara mereka
yang merupakan sahabat anda?
Edi Hasibuan Ricky Martanto Tomi Sudarto Baramuli
Siapakah di antara mereka yang akan anda pinjami uang? Edi Hasibuan
Ricky Martanto Tomi Sudarto Baramuli
Siapakah yang anda ijinkan kencan dengan adik anda? Edi Hasibuan
Ricky Martanto Tomi Sudarto Baramuli ...maka anda akan mendapatkan hasil pasangan nama/nilai berikut. Teman?..Ed=YES Teman?..Rick=YES Teman?..Tom=YES Utang?...Tom=YES Utang?...BM=YES Kencan?...Ed=YES Kencan?...Tom=YES Kencan?...BM=YES