BAB IX Form. Mulailah dengan membuka Notepad, kemudian tulis baris-baris di bawah ini:

Susanto, S.Kom

Bab IX – Form

BAB IX Form Mulailah dengan membuka Notepad, kemudian tulis baris-baris di bawah ini: <TITLE>Membuat form 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. <TITLE>Membuat form 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
. <TITLE>Membuat form html

40

Bab IX – Form

Susanto, S.Kom

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

41

Bab IX – Form

Susanto, S.Kom

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 harus memiliki NAME. 42

Bab IX – Form

Susanto, S.Kom

Atribut SIZE, VALUE, dan MAXLENGTH juga dapat digunakan di sini. Anda tentu masih ingat bahwa memberi perintah kepada browser untuk melakukan sesuatu, sedangkan ATTRIBUTE dituliskan di dalam 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.

Tambahkan 2 lagi.

Hmmm... saya pikir kita perlu memberi baris baru untuk mereka masing-masing.

Perhatikan bahwa setiap masukan menggunakan nama yang sama. Alasannya akan segera tampak berikut ini. Setiap Radio Buttons harus diberi VALUE.

43

Susanto, S.Kom

Bab IX – Form Sekarang beri nama masing-masing.

Edi Hasibuan
Ricky Martanto
Tomi Sudarto

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?
Edi Hasibuan
Ricky Martanto
Tomi Sudarto

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

Tambahkan 3 lagi, tapi kali ini beri masing-masing NAME yang berbeda. (Gunakan juga baris baru untuk setiap pilihan.)
TYPE=CHECKBOX TYPE=CHECKBOX TYPE=CHECKBOX TYPE=CHECKBOX

NAME="Ed">
NAME="Rick">
NAME="Tom">
NAME="BM">

44

Susanto, S.Kom

Bab IX – Form Setiap Check Box kita beri VALUE yang sama.

NAME="Ed" VALUE="YA">
NAME="Rick" VALUE="YA">
NAME="Tom" VALUE="YA">
NAME="BM" VALUE="YA">

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.

NAME="Ed" VALUE="YA"> Edi Hasibuan
NAME="Rick" VALUE="YA"> Ricky Martanto
NAME="Tom" VALUE="YA"> Tomi Sudarto
NAME="BM" VALUE="YA"> Baramuli

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?
Edi Hasibuan
Ricky Martanto
Tomi Sudarto
Baramuli

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

45

Susanto, S.Kom

Bab IX – Form

(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 Siapakah yang anda ijinkan yang akan anda pinjami uang? berkencan dengan adik anda? Edi Hasibuan Edi Hasibuan Ricky Martanto Ricky Martanto Tomi Sudarto Tomi Sudarto Baramuli 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
ditampilkan dalam warna hijau. Ini hanya untuk memudahkan anda, warna tersebut tidak ada pengaruhnya terhadap jalannya form.
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

46

Bab IX – Form

Susanto, S.Kom

Tomi Sudarto
Baramuli

Misalkan anda memilih seperti berikut.... Siapakah di antara mereka Siapakah di antara mereka Siapakah yang anda ijinkan yang merupakan sahabat yang akan anda pinjami uang? kencan dengan adik anda? anda? Edi Hasibuan Edi Hasibuan Edi Hasibuan Ricky Martanto Ricky Martanto Ricky Martanto Tomi Sudarto Tomi Sudarto Tomi Sudarto Baramuli Baramuli 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

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

Jangan lupa beri nama. <SELECT NAME="TEMAN BAIK">

Kemudian tambahkan beberapa option.

47

Bab IX – Form

Susanto, S.Kom

<SELECT NAME="TEMAN BAIK">

BAB IX Form. Mulailah dengan membuka Notepad, kemudian tulis baris-baris di bawah ini:

Recommend Documents