Kisahku Kisahmu Dan Kisah Mereka: BAB IX Form

Mulailah dengan membuka Notepad, kemudian tulis baris-baris di bawah ini:

<HTML>
<HEAD>
<TITLE>Membuat form html</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Simpan dengan nama form1.htm di folder khusus untuk itu. Buka browser anda (Netscape atau Internet Explorer), dan buka file form1.htm tadi. Biarkan Notepad tetap terbuka sehingga apa yang anda tuliskan di situ bisa langsung anda lihat hasilnya di browser. Klik tombol Reload atau Refresh sesudah anda menyimpan perubahan yang anda lakukan di Notepad.

Tuliskan form anda.
<HTML>
<HEAD>
<TITLE>Membuat form html</TITLE>
</HEAD>
<BODY>
<FORM>
</FORM>
</BODY>
</HTML>

Selanjutnya browser harus mempunyai cara untuk mengirim data yang didapat kepada kita. Ada dua hal yang dapat anda lakukan: 1) anda dapat mengirim data tersebut ke suatu program/script untuk diproses, atau 2) anda dapat meminta browser untuk mengirim data tersebut melalui email kepada anda. Cara pertama memerlukan pemahaman tentang pemrograman web yang lebih lanjut. Cara kedua, biasa disebut mailto form, memerlukan beberapa hal untuk ditambahkan dalam tag <FORM>.

<HTML>
<HEAD>
<TITLE>Membuat form html</TITLE>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION="mailto:xxx@xxx.xxx" ENCTYPE="application/x-www-form-urlencoded">
</FORM>
</BODY>
</HTML>

Baris ini sangat penting. Satu-satunya hal yang harus anda lakukan adalah menuliskan alamat email anda sesudah mailto: Selebihnya harus anda tuliskan persis seperti di atas. Tulisan FORM, METHOD, POST & ACTION tidak harus ditulis dalam huruf besar, tetapi harus ada spasi di antara setiap atribut tadi... di antara FORM & METHOD, di antara POST & ACTION, dan antara .xxx" & ENCTYPE.

Sayangnya, data yang akan anda terima masih dalam format komputer seperti ini...

NAMAFORM=Daftar+Anggota&NAMA=Bram+D.+Wardhana&ALAMAT=Jl.+Bali+No.+13
&KOTA=Semarang&Propinsi=Jawa+Tengah

TEXT

Untuk memudahkan, mulai sekarang saya hanya akan menuliskan apa yang ada di antara tag <FORM>. Saya tidak akan menuliskan tag head, body, title dan form itu sendiri. Sudah jelas bahwa anda harus tetap menuliskannya di dalam dokumen anda.

Bentuk masukan (TYPE of <INPUT>) yang paling umum digunakan dalam form html adalah TEXT.

Setiap masukan memerlukan nama (NAME).

Kalau anda mengetikkan alamat anda (misalkan Jl. Bali No. 13), alamat tersebut akan menjadi nilai bagi input dan dipasangkan dengan ALAMAT sehingga hasil akhirnya setelah dijalankan pada Mailto Formatter adalah ALAMAT=Jl. Bali No. 13.

Jika mau, anda bisa langsung menuliskan NILAI (VALUE) yang anda inginkan.

Maka ALAMAT secara otomatis akan langsung diberi nilai Jl. Lombok No. 31, kecuali anda mengubahnya.

Catatan - Pastikan pemakaian tanda petik seperti yang saya tuliskan di atas.

Kita dapat juga menentukan panjang kotak masukan.

Seperti yang dapat anda lihat, nilai defaultnya adalah 20. Barangkali anda sudah tahu bahwa nilai default adalah nilai yang dipakai browser jika anda tidak menentukan lain.

Kita lanjutkan, dan sekarang coba anda hapus VALUE="Jl. Lombok No. 31".

Jika kita inginkan, kita dapat menentukan berapa banyak karakter yang bisa diketikkan. Teruskan dan cobalah mengetikkan lebih dari 10 karakter!

Saya pikir pembatasan ini akan bisa bermanfaat. Tetapi, kecuali anda pikir seseorang akan menuliskan seluruh isi bab ini ke dalamnya, saya tidak akan terlalu menguatirkan hal ini.

Sangat mirip dengan TYPE=TEXT adalah TYPE=PASSWORD. Persis malah, kecuali bahwa yang ditampilkan adalah *** dan bukan apa yang diketikkan. Browser akan mengirim data sebenarnya kepada anda, hanya data ini tidak akan tampil di layar.

Ingat bahwa setiap <INPUT> harus memiliki NAME.

Atribut SIZE, VALUE, dan MAXLENGTH juga dapat digunakan di sini. Anda tentu masih ingat bahwa <TAG> memberi perintah kepada browser untuk melakukan sesuatu, sedangkan ATTRIBUTE dituliskan di dalam <TAG> dan menentukan caranya.

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>

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>

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
(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?

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>
<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....

...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

PULL DOWN LIST DAN SCROLLING LIST

Bentuk masukan selanjutnya adalah Pull Down List. Untuk masukan jenis ini anda gunakan <SELECT> sebagai pengganti <INPUT> dan anda harus tambahkan tag penutup. Mari kita coba.

Jangan lupa beri nama.

Kemudian tambahkan beberapa option.

<SELECT NAME="TEMAN BAIK">
<OPTION>Edi
<OPTION>Ricky
<OPTION>Tomi
<OPTION>Reza
</SELECT>

Dan setiap <OPTION> kita beri VALUE.

<SELECT NAME="TEMAN BAIK">
<OPTION VALUE="Edi">Edi
<OPTION VALUE="Ricky">Ricky
<OPTION VALUE="Tomi">Tomi
<OPTION VALUE="Reza">Reza
</SELECT>

Defaultnya adalah pilihan pertama dalam daftar.

Kita dapat mengubah default ini sehingga tidak harus yang tercantum paling atas dalam daftar.

<SELECT NAME="TEMAN BAIK">
<OPTION VALUE="Edi">Edi
<OPTION VALUE="Ricky">Ricky
<OPTION VALUE="Tomi" SELECTED>Tomi
<OPTION VALUE="Reza">Reza
</SELECT>

Scrolling List dibuat dengan cara yang persis sama dengan Pull Down List . Pertama-tama kita tambahkan dulu beberapa nama.

<SELECT NAME="TEMAN BAIK">
<OPTION VALUE="Edi">Edi
<OPTION VALUE="Ricky">Ricky
<OPTION VALUE="Tomi">Tomi
<OPTION VALUE="Reza">Reza
<OPTION VALUE="Arie">Arie
<OPTION VALUE="Putri">Putri
<OPTION VALUE="Maria">Maria
</SELECT>

Satu-satunya hal yang harus kita lakukan untuk mengubahnya menjadi Scrolling List adalah menambahkan atribut SIZE pada tag <SELECT>.

<SELECT NAME="TEMAN BAIK" SIZE=4>
<OPTION VALUE="Edi">Edi
<OPTION VALUE="Ricky">Ricky
<OPTION VALUE="Tomi">Tomi
<OPTION VALUE="Reza">Reza
<OPTION VALUE="Arie">Arie
<OPTION VALUE="Putri">Putri
<OPTION VALUE="Maria">Maria
</SELECT>

Atribut SIZE menunjukkan berapa banyak pilihan yang ingin anda tampilkan. Gampang, kan?

Sekali lagi, defaultnya adalah pilihan pertama pada <OPTION>, dan seperti tadi kita dapat mengubahnya dengan memilih yang lain.

<SELECT NAME="TEMAN BAIK" SIZE=4>
<OPTION VALUE="Edi">Edi
<OPTION VALUE="Ricky">Ricky
<OPTION VALUE="Tomi" SELECTED>Tomi
<OPTION VALUE="Reza">Reza
<OPTION VALUE="Arie">Arie
<OPTION VALUE="Putri">Putri
<OPTION VALUE="Maria">Maria
</SELECT>

TEXTAREA

Bentuk masukan lain yang sangat berguna adalah <TEXTAREA>.

Anda menentukan besarnya kotak masukan dengan cara....

ROWS adalah tingginya, COLS adalah lebarnya.

Satu atribut yang cukup membantu dalam <TEXTAREA> adalah WRAP. Mungkin ada browser yang tidak mengenal perintah ini, tapi jika demikian, perintah ini akan diabaikan.

Cobalah menuliskan kalimat yang cukup panjang di dalam kotak masukan....

WRAP=VIRTUAL berarti kalimat yang lebih panjang dari lebar kotak masukan akan diteruskan ke baris di bawahnya, tetapi yang disimpan oleh browser tetap satu kalimat panjang yang tidak terputus.

Lakukan hal yang sama dengan ini....

WRAP=PHYSICAL artinya kalimat panjang akan ditampilkan lebih dari satu baris, dan akan disimpan dalam bentuk itu juga.

Sekarang anda coba yang ini untuk melihat bedanya....

Ini adalah defaultnya.
WRAP=OFF artinya kalimat panjang tidak akan ditampilkan berganti baris, tetapi akan disimpan dalam bentuk persis seperti yang anda ketikkan. (Cobalah dengan mengetikkan ENTER.)

HIDDEN INPUT

Bentuk lain dari masukan adalah HIDDEN input.

HIDDEN input adalah pasangan nama/nilai yang dikirimkan kepada anda tetapi tidak akan pernah ditampilkan di halaman web. Hidden input inilah yang diperlukan oleh Mailto Formatter. Dengan cara ini Mailto Formatter mengenali form html yang akan diprosesnya.

Misalkan anda melakukan jajak pendapat melalui internet. Anda sudah merancang form html yang indah dan efektif untuk mendapatkan masukan tentang topik yang anda tanyakan. Masalahnya adalah, anda ingin menempatkan form tersebut di beberapa web site untuk menjaring sebanyak mungkin masukan. Anda perlu cara untuk mengetahui web site mana yang memberikan kontribusi terbanyak. Apa yang akan anda lakukan?

Anda bisa menambahkan HIDDEN input ke dalam form anda seperti ini....

<INPUT TYPE=HIDDEN NAME="JAJAKPENDAPAT" VALUE="Web Site 1"> ... untuk web site pertama
<INPUT TYPE=HIDDEN NAME="JAJAKPENDAPAT" VALUE="Web Site 2"> ... untuk web site kedua
<INPUT TYPE=HIDDEN NAME="JAJAKPENDAPAT" VALUE="Web Site 3"> ... untuk web site ketiga
Dan seterusnya dan selanjutnya....

Sebetulnya, anda bisa gunakan pasangan nama/nilai apapun dalam hidden input ini (bahkan dalam setiap jenis input). Saya menggunakan "JAJAKPENDAPAT" untuk memperjelas. Kalau anda pikir terlalu panjang, bisa anda gunakan "JP". Contoh berikut ini tetap merupakan HIDDEN input yang sah....

<INPUT TYPE=HIDDEN NAME="E" VALUE="Mc^2"> ... Anda akan dapatkan E=Mc^2

HIDDEN input juga sangat berguna dan banyak dipakai untuk pemrograman/cgi script.

Bentuk terakhir dari input adalah tombol SUBMIT dan RESET.

Kedua perintah ini sangat sederhana....

SUBMIT, tentu saja, dipakai untuk mengirim data yang anda masukkan ke dalam form....

...dan RESET, menghapus seluruh isi form.

Kita dapat mengubah tulisan pada tombol tersebut dengan mudah.

Bila perlu, tombol SUBMIT bisa anda beri nama/NAME. Anda akan memerlukannya jika, dengan alasan apapun, ada lebih dari satu tombol SUBMIT.

Kisahku Kisahmu Dan Kisah Mereka

Wednesday, February 12, 2014

BAB IX Form

No comments:

Post a Comment

Label

Popular Posts