Materi 11 Membuat Form Hai. Saya akan menunjukkan bagaimana membuat web page yang bersifat interaktif dengan penggunaan tag. Dengan tag ini anda dapat.

Presentasi berjudul: "Materi 11 Membuat Form Hai. Saya akan menunjukkan bagaimana membuat web page yang bersifat interaktif dengan penggunaan tag. Dengan tag ini anda dapat."— Transcript presentasi:

1

2 Materi 11 Membuat Form Hai. Saya akan menunjukkan bagaimana membuat web page yang bersifat interaktif dengan penggunaan tag. Dengan tag ini anda dapat membuat buku tamu, formulir pemesanan, survey, meminta komentar atau apa pun di web site anda. Pada dasarnya, form html mempunyai bentuk seperti ini.... awal form minta masukan menggunakan salah satu dari beberapa cara........anda bisa gunakan berapa pun input yang anda inginkan akhir form Itulah form html secara garis besar. Dengan ini anda siap membuat form untuk web site anda. Perlu saya tekankan bahwa kalau anda berkeinginan untuk membuat dokumen html yang baik, maka anda harus menyediakan waktu untuk mempelajari tag-tag yang bersangkutan. Kalau anda menggantungkan diri pada fasilitas "table wizard" yang ada di dalam "editor html canggih yang amat sangat mudah dipakai" yang banyak tersedia di pasaran, fleksibilitas anda akan sangat terbatas. Dan hasil akhirnya mungkin tidak akan seperti yang anda harapkan. Menurut pendapat saya, editor html terbaik untuk dipakai adalah editor berbasis teks. Program-program ini akan mempermudah penulisan dokumen html anda, tetapi tidak mengerjakannya untuk anda. Meskipun tutorial ini tidak dikhususkan untuk browser tertentu, tampilan yang anda lihat mungkin sedikit berbeda tergantung browser yang anda pilih.

3 Pelajaran 1 Mulailah dengan membuka Notepad, kemudian copykan baris-baris di bawah ini: Membuat form html Simpan dengan nama form1.html di folder khusus untuk itu. Buka browser anda (Netscape atau Internet Explorer), dan buka file form1.html 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. 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/cgi 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 ada di luar cakupan tutorial ini (saya akan coba jelaskan dalam tulisan-tulisan selanjutnya). Cara kedua, biasa disebut mailto form, memerlukan beberapa hal untuk ditambahkan dalam tag. Membuat form html

4 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 Padahal yang anda inginkan adalah format yang lebih mudah kita pahami seperti ini... NAMAFORM=Daftar Anggota NAMA=Bram D. Wardhana ALAMAT=Jl. Bali No. 13 KOTA=Semarang PROPINSI=Jawa Tengah Ada beberapa program yang dapat digunakan untuk mengubah format tersebut, misalnya Mailto Formatter Program kecil ini sangat bagus dan bisa anda dapatkan secara gratis (freeware) di internet. Contoh di atas menunjukkan bahwa form html tidak lebih dari nama masukan (NAMA, ALAMAT, dll) yang dipasangkan dengan nilai masukan (Bram D. Wardhana, Jl. Bali No. 13, dll). Satu-satunya variabel adalah bagaimana cara kita mendapatkan data-data tersebut.

5 Pelajaran 2 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. 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.

6 Pelajaran 3 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.

7 Catatan - Untuk Check Boxes NAME yang dipakai harus berbeda, tetapi VALUE nya tetap. Sedangkan untuk Radio Buttons VALUE berbeda tetapi NAME nya tetap. Jangan frustasi, saya sendiri sering merasa bingung. Itulah sebabnya saya sangat mengandalkan catatan/referensi tentang html. (Anda pikir saya menyimpan semuanya di kepala saya??) OK, masing-masing kita beri label/nama. 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

8 Bentuk masukan selanjutnya adalah Pull Down List. Untuk masukan jenis ini anda gunakan sebagai pengganti dan anda harus tambahkan tag penutup. Mari kita coba. Jangan lupa beri nama. Kemudian tambahkan beberapa option. Edi Ricky Tomi Reza Dan setiap kita beri VALUE. Edi Ricky Tomi Reza Defaultnya adalah pilihan pertama dalam daftar. Kita dapat mengubah default ini sehingga tidak harus yang tercantum paling atas dalam daftar. Edi Ricky Tomi Reza

9 Scrolling List dibuat dengan cara yang persis sama dengan Pull Down List. Pertama-tama kita tambahkan dulu beberapa nama. Edi Ricky Tomi Reza Arie Putri Maria Satu-satunya hal yang harus kita lakukan untuk mengubahnya menjadi Scrolling List adalah menambahkan atribut SIZE pada tag. Edi Ricky Tomi Reza Arie Putri Maria Atribut SIZE menunjukkan berapa banyak pilihan yang ingin anda tampilkan. Gampang, kan?

10 Saya tidak punya alasan mengapa anda akan mengubah default pada Scrolling List ini, tetapi karena memang bisa diubah saya rasa saya harus menjelaskannya. Bentuk masukan lain yang sangat berguna adalah. Anda menentukan besarnya kotak masukan dengan cara.... ROWS adalah tingginya, COLS adalah lebarnya. Satu atribut yang cukup membantu dalam 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....

11 Pelajaran 5 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....... untuk web site pertama... untuk web site kedua... 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....... 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.