Form adalah beberapa perintah dalam HTML yang digunakan untuk berinteraksi dengan pengguna situs, misalnya Anda menginginkan data mengenai Nama, Alamat dan nomor telepon dari seorang pengguna situs Anda yang mungkin nanti akan berguna untuk berhubungan lebih lanjut antara Anda dengan orang tersebut, atau mungkin Anda ingin berkomuniksi melalui surat elektronik (email) dengan seseorang yang nun jauh disana atau mungkin Anda juga hanya sekedar ingin mengetahui pendapat dari pengguna situs mengenai suatu masalah yang berhubungan dengan situs Anda, misalnya Anda menginginkan pendapat mengenai isi materi yang akan dibahas selanjutnya di situs Anda dengan meminta pendapat dari pengguna situs Anda. Maka semua hal itu dilakukan dengan perantaraan form.
Pada awal perkembangan sebuah website, tidak dikenal adanya form. Pada saat itu tampilan website hanya monoton menampilkan teks dan images saja yang walaupun seindah apapun membuat tampilan website menjadi pasif, karena pengguna hanya disajikan informasi yang tidak informatif artinya walaupun tampilan web dapat berpindah-pindah halaman karena adanya hyperlink yang dapat menghubungkan halaman satu dengan yang lainnya, tetapi pengguna dan penyaji tidak dapat berinteraksi satu dengan yang lainnya. Pengguna hanya dilakukan sebagai pembaca seperti layaknya orang membaca buku ditengah hutan belantara tanpa ada orang lain disampingnya untuk menyatakan ketidak mengertian nya atau pendapatnya tentang buku tersebut. Setelah ditemukan nya FORM, maka tampilan website menjadi lebih hidup dan Informatif. Satu hal lagi yang sangat menggembirakan setelah ditemukan nya pembuatan FORM dalam website, maka bermunculan lah program-program yang mengkhususkan untuk mengelola FORM seperti PERL, PHP, ASP dan sebagainya, dan mulai saat itu pulalah sebutan website Dynamis dikenal.
Sekarang kita langsung saja pada pembahasan mengenai perintah pembuatan Form pada dokumen HTML. Ada beberapa perintah yang harus Anda kuasai untuk membuat sebuah form ini yaitu :
<form> dan </form> - Perintah ini adalah pembuka dan penutup untuk membuat sebuah form, perintah ini mempunyai beberapa atribut yaitu :
name - artinya apa nama form yang akan dibuat. - Penamaan form ini bebas akan tetapi tidak boleh ada spasi. Saya sarankan untuk memberi nama form ini tidak lebih dari 8 karakter agar mudah diingat.
action - artinya melalui apa dan kemana form itu akan dikerjakan lebih lanjut untuk memprosesnya. - Misalnya Anda punya sebuah program yang akan memproses penanganan form ini, maka alamat atau nama program tersebut dituliskan disini. contoh : <form action=
"prosesform.php">, <form action="http://www.ujiform.com/
ujilagi.php">
method - artinya dengan cara apa form ini dikirim. - Ada dua pilihan pada atribut ini yaitu : get atau post bila Anda memilih get maka form akan dikirim langsung ke alamat yang dituju, bila Anda memilih post maka form akan ditransfer melalui paket yang lain misalnya email.
enctype - artinya berbentuk apa form yang akan dikirim. - Dalam hal ini kita akan mengirim form ke tempat tujuan dengan sarana ENCRYPTE agar form yang kita kirim dapat dibuka oleh suatu program yang mendukungnya, hal ini untuk menjaga keamanan data dalam proses pengiriman (security). Banyak metode encrypte yang dipakai oleh designer dalam pengiriman form agar nantinya sebuah data yang akan dikirim tidak dapat dibaca oleh orang lain atau disadap oleh orang yang tidak berhubungan. contoh : <form enctype="multipart/form-data">
target - artinya Pada halaman ini juga, halaman yang lain, atau dalam suatu frame Proses pengerjaan form tersebut. - Setelah dilakukan submit maka ada program lain yang akan mengerjakan proses tersebut, nah proses tersebut dilakukan pada halaman yang sama (self), halaman baru (blank), atau pada suatu frame pengerjaan proses programnya.
onsubmit - artinya ketika form dikerjakan program atau aplikasi apa lagi yang harus dikerjakan. - Misalkan Anda mempunyai sebuah program eksekusi yang dijalankan setelah kondisi form sudah di submit, maka program ini dicantumkan pada keterangan onsubmit.
contoh penulisan nya:
<form name="pesan" target="blank" action="http://suryascience.co.nr/senddata.php" method="post" enctype="multipart/form-data" onsubmit="cek.js">
contoh dalam program, klik lah tombol ini
Dan masih banyak lagi atribut-atribut yang lainnya, tetapi ini sudah cukup untuk menambah bekal pengetahuan Anda mengenai FORM
<input name="nn" type="teks" size="xx"> - Perintah ini adalah untuk menampilkan type masukan berupa teks. - Form ini banyak digunakan untuk meminta pengguna memasukan sesuatu yang berbentuk teks, misalnya di website ada pertanyaan : Siapa nama Anda : ? , maka user menjawabnya dengan memasukan input berupa teks. Panjang form ini dapat diatur dengan merubah nilai size nya yang berupa jumlah karakter misalkan size="12", maka panjang form ini adalah 12 karakter. Untuk penamaan sebaiknya jangan lebih dari 8 karakter dan tidak boleh ada spasi. Contoh penulisan nya :
<input name="email" type="teks" size="12"> Contoh dalam program :
<input name="nn" type="password" size="xx"> - Perintah ini sama seperti perintah teks di atas, hanya input yang dimasukan ditampilkan dengan tanda bintang ( * ). - Biasanya jenis perintah ini digunakan untuk memasukan password atau suatu input yang rahasia, sehingga hanya orang yang berkepentingan yang tahu isinya.
Contoh penulisan nya : <input name="rahasia" type="password" size="12">
Contoh dalam Program :
<input name="nn" type="radio" value="cc"> - Perintah radio ini digunakan untuk menampilkan pilihan yang berbentuk lingkaran yang ditandai. - Form ini banyak digunakan untuk meminta pengguna memilih salah satu pilihan yang sudah ditentukan, misalkan Anda ingin meminta pendapat dari pengguna dengan pertanyaan : Apakah Anda setuju bila Pacar Anda berjalan bersama saya..?, dan pilihan jawaban nya adalah :Setuju, tidak setuju, tidak tahu atau dengan syarat. Maka form Radio ini bisa Anda gunakan untuk memilihnya. Disini user hanya bisa memilih salah satu pilihan yang Anda tentukan sebagai pengaju pertanyaan. Isi atau content pertanyaan yang akan diproses dituliskan pada atribut value, atribut checked dapat Anda gunakan untuk menentukan pilihan default yang sudah ditandai, jadi walaupun user tidak memilih salah satu pilihan bila Anda menggunakan atribut ini disalah satu pilihan nya, maka form akan memilih pilihan yang memakai atribut ini. Contoh penulisan nya :
<input name="radio" type="radio" value="Tidak Setuju"> Contoh dalam Program :
Dari mana Anda mengetahui keberadaan situs ini..?
<input name="nn" type="checkbox" value="cc"> - Perintah checkbox ini hampir sama dengan perintah radio diatas, akan tetapi user bisa memilih lebih dari satu pilihan yang dikehendaki.
contoh penulisan nya :
Dari Daftar dibawah ini, Makanan mana saja yang Anda sukai...?<br> <form name="test">
<input name="pilih1" type="checkbox" value="tempe" checked>
Tempe Goreng.<br>
<input name="pilih1" type="checkbox" value="sayur_Asam">
Sayur Asam<br>
<input name="pilih1" type="checkbox" value="ayam_goreng">
Ayam Goreng Mentega.<br>
<input name="pilih1" type="checkbox" value="semur_jengkol">
Semur Jengkol Spesial.
</form>
Perhatikan pilihan yang diberi atribut checked, pilihan itu akan otomatis ditandai walaupun tidak dipilih. Bila dijalankan pada Browser maka perintah diatas akan ditampilkan sebagai berikut:
Dari Daftar dibawah ini, Makanan mana saja yang Anda sukai...?
<select> dan <option> - Perintah select ini digunakan untuk menampilkan suatu pilihan berbentuk menu pulldown. - Form ini banyak digunakan untuk meminta pengguna memilih salah satu pilihan yang banyak alternatif nya, akan tetapi karena terbatasnya ruangan halaman web maka menu pilihan pulldown ini digunakan. Selain itu tampilan menu puldown ini juga dapat memungkinkan pilihan yang majemuk yang menarik, sebagai contoh Anda lihat di pilar kiri website ini di bagian Pilih Halaman. perintah <select> ini harus diikuti oleh perintah <option>, seperti halnya perintah <ol> dan <li>
Bila dijalankan pada browser maka akan nampak seperti ini:
Bulan Apa Anda dilahirkan...?
Perhatikan.., setiap pilihan <option> diakhiri oleh penutupnya yaitu </option>, isi atau content yang akan diproses oleh form adalah yang terdapat dalam atribut value. Pada contoh diatas, nilai value untuk pilihanSeptember adalah pil9, maka yang diproses oleh form bukan Septembertetapi pil9. Kata September bisa Anda rubah sesuka hati Anda, misal :Saya lahir bulan September. Ada beberapa atribut yang dapat Anda gunakan dalam perintah <select> maupun <option> antara lain :
I. Untuk perintah <select>
name - Atribut ini digunakan untuk memberikan nama pada form select.
multiple - Atribut ini digunakan untuk menampilkan keseluruhan pilihan yang ada di perintah <option> dalam satu kotak, jadi bila Anda memakai atribut ini, maka pilihan option akan ditampikan semuanya nya, user tidak perlu menekan tab untuk melihat pilihan yang lain nya.
size - Atribut ini digunakan untuk menampilkan beberapa pilihan yang terlihat. Nilainya diisi dengan angka, misalkan Anda mengisinya dengan angka 2 / <select size="2">, maka pilihan yang terlihat akan tampak 2 baris.
disabled - Atribut ini digunakan untuk me-non aktifkan pilihan tetapi tetap akan ditampilkan, untuk lebih jelas lihat keterangan mengenai atribut yang sama pada perintah <option>, bedanya adalah bila atribut ini diletakkan pada perintah <select>, maka keseluruhan pilihan akan non-aktif.
tabindex - Atribut ini digunakan untuk menampilkan posisi index dari pilihan yang ditentukan, nilainya diisi dengan Angka.
onfocus - Atribut ini digunakan untuk mengeksekusi pilihan yang disorot oleh kursor, misalkan Anda mempunyai sebuah program yang akan dijalankan bila pilihan dari option disorot oleh kursor maka program itu secara otomatis dikerjakan. Program ini biasanya berupa program JAVASCRIPT.
Masih ada beberapa atribut lain dalam perintah select ini, akan tetapi ini sudah cukup buat bekal Anda dalam mempelajari dasar dari pembuatan form.
II. Untuk perintah <option>
value - Atribut ini digunakan sebagai content yang akan diproses oleh form. - jadi setelah di submit maka nilai value ini yang akan diproses.
selected - Atribut ini digunakan sebagai pilihan initial. - bila pilihan option diberi atribut ini maka pilihan ini tidak dijadikan suatu pilihan yang akan diproses oleh form karena merupakan initial. Sebagai contoh Anda lihat pada contoh penulisan diatas, kata-kata " Pilihan Anda.. " diberi atribut ini, sehingga bila user memilih pilihan ini maka dianggap user belum memilih artinya pilihan ini bukan suatu pilihan yang diharuskan untuk dipilih.
disabled - Atribut ini digunakan untuk me-non aktifkan suatu pilihan. - bila user menggunakan browser FIREFOX/MOZILLA dan Anda menggunakan atribut ini maka pilihan tersebut tidak akan bisa disorot oleh kursor sehingga tidak bisa dipilih akan tetapi pilihan ini tetap eksis dalam form. Sebagai contoh, coba Anda pilih bulan Juni pada contoh diatas, bulan juni tidak akan bisa Anda pilih. Atribut ini tidak berfungsi di browser Internet Explorer.
label - Atribut ini digunakan untuk memberi label pada suatu pilihan. - bila user tidak memilih salah satu pilihan yang disarankan, maka form akan memilih pilihan yang diberi atribut ini sebagai pilihan nya.
<textarea> - Perintah textarea ini digunakan untuk meminta user untuk memasukan suatu input berupa text yang panjang. - Perintah ini banyak digunakan untuk memasukan input berupa teks yang panjang, misalnya Anda ingin meminta saran atau pendapat dari pengguna situs Anda, yang mungkin pendapat atau saran itu bisa jadi akan memerlukan kalimat yang panjang. Maka perintah ini dapat Anda gunakan untuk keperluan tersebut. Perintah ini harus ditutup dengan perintah </textarea>.
Perintah ini mempunyai beberapa atribut antara lain :
name - Atribut ini digunakan untuk penamaan text area yang akan diproses oleh form.
rows - Atribut ini digunakan untuk menentukan banyaknya baris yang akan ditampilkan di browser, nilainya diisi dengan angka. contoh : bila Anda ingin membuat text area sebanyak 3 baris maka perintah nya adalah : <textarea rows="3">.
cols - Atribut ini digunakan untuk menentukan banyaknya kolom yang akan ditampilkan di browser, nilainya diisi dengan angka (perbandingan nya dilihat dari banyaknya karakter). contoh : bila Anda ingin membuat text area sebanyak 20 kolom / karakter maka perintahnya adalah : <textarea cols="20">.
Masih ada beberapa atribut untuk text area ini, akan tetapi itu sudah cukup untuk bekal Anda dalam mempelajari dasar design web ini, Anda dapat mencari referensi dari media lain mengenai atribut text area yang lainnya karena disini saya tidak akan menerangkan nya satu persatu dikarenakan terbatasnya halaman dan bandwith space yang kami miliki.
Contoh penulisan nya : <textarea name="pesansaya" rows="5" cols="20">
</textarea>
Bila dijalankan pada browser maka perintah diatas akan ditampilkan sebagai berikut :
Cobalah Anda masukan kata-kata apa saja pada text area diatas, bila kata-kata tersebut melebihi ukuran text area yang disediakan maka secara otomatis tab scroll akan muncul.
<input name="nn" type="submit" value="xx"> - Perintah submit ini digunakan untuk mengakhiri atau menuntaskan sebuah deretan form. - Setelah semua daftar form dibuat, maka harus ada sebuah tombol yang akan meng-eksekusi suatu rancangan form. Perintah ini sama halnya dengan perintah " GRAK " dalam " baris berbaris " di Pramuka dan Militer, misalkan seorang Komandan memberi aba-aba "Balik kanaaaan...!", para prajurit yang ikut dalam barisan itu tidak akan bereaksi apa-apa sebelum komandan yang memberi perintah itu memberikan lagi perintah "Grak" ( bisa Anda bayangkan, andai saja komandan itu baru memberikan perintah "grak" selama dua hari berturut-turut.., apa yang terjadi..? ).
Perintah submit ini mempunyai beberapa atribut antara lain :
name - Atribut ini digunakan untuk menamakan form submit.
value - Atribut ini digunakan untuk menampilkan teks yang terdapat dalam content nya. - Misalkan Anda memberi isi atau content value ini dengan " Kirim ", maka tombol submit ini akan bertuliskan kata tersebut.
onclick - Atribut ini digunakan untuk menjalankan sebuah program yang akan dieksekusi sebelum form itu benar-benar di submit. - Misalkan Anda mempunyai suatu program yang akan mengingatkan user untuk mengecek kembali isian form agar tidak terdapat kesalahan sebelum form itu benar-benar dikirim yang berisi sebuah peringatan berikut : " Apakah Anda yakin untuk mengirim form isian ini..?, tekan OK untuk melanjutkan tekan CANCEL untuk membatalkan. ". Dengan adanya program ini, maka sebuah form yang dikirim akan dapat di cek ulang oleh user, bila user yakin tidak terdapat kesalahan dalam mengisi form maka user dapat menekan tombol OK seperti yang diberitahukan, bila user tidak yakin atau ingin memeriksa ulang isian form nya maka user dapat menekan tombol CANCEL untuk memperbaiki nya.
Contoh penulisan nya :
<center>
Silahkan tekan tombol ini untuk mengirim form yang telah Anda isi..
<form name="testsubmit" action="#">
<input name="submita" type="submit" value="Kirim" onclick="confirm('Apakah Anda yakin Untuk mengirim Form ini..?')">
</form>
</center>
Setelah dijalankan di Browser maka akan ditampilkan seperti berikut ini :
Silahkan tekan tombol ini untuk mengirim form yang telah Anda isi..
<input name="nn" type="reset" value="xx"> - Perintah reset ini digunakan untuk membersihkan isian form menjadi sepert ke-adaan semula sebelum diisi. - Dengan perintah reset ini maka user dapat mengulang pengisian form yang mungkin terdapat kesalahan dan perlu diperbaiki. Contoh dari perintah reset ini dapat Anda lihat di perintah " type teks " diatas yang berupa tombol " Hapus Isian ". Kata-kata yang akan ditampilkan dapat Anda isi di atribut value.
<fieldset> dan <legend> - Perintah fieldset ini digunakan untuk memberikan tampilan kotak yang mengelilingi sebuah kelompok Form, sedangkan perintah legend adalah untuk menampilkan teks penjelas sebuah kelompok Form yang dikurung oleh perintah fieldset. Perintah legend harus dituliskan diantara perintah fieldset dan ditutup dengan perintah </legend> , sebelum perintah penutup dari fieldset yaitu</fieldset> dituliskan.
Contoh penulisan nya :
<fieldset>
<legend>Ini contoh legend</legend>
Kata-kata dalam kurung fieldset ini sebagai contoh saja, anggap saja ini merupakan kelompok dari suatu form.
</fieldset>
Setelah dijalankan di browser maka akan tampak seperti dibawah ini.
Catatan : Perintah fieldset hanya berfungsi bila kelompok form yang akan dikelilingi oleh kotak fieldset ini terdapat dalam satu space atau ruangan yang tidak terhalangi oleh perintah <TR> dalam pembuatan tabel.
Dari ke sepuluh perintah pembuatan FORM diatas, saya berharap Anda sudah mempunyai bekal yang cukup untuk men-design sebuah tampilan website yang sederhana tapi profesional. Untuk contoh penulisan FORM yang lengkap beserta tampilan nya, dapat Anda lihat di Halaman berikutnya.
Sampai dengan pembahasan ini, bila Anda menguasai semua yang telah saya tuturkan dari halaman ke-1 sampai halaman ke-5 ini berarti Anda saya anggap telah menguasai semua basic atau dasar dari HTML. Bila Anda tidak paham sampai dengan pembahasan ini saya menyarankan untuk membuka kembali bab-bab sebelumnya, karena dihalaman berikutnya saya tidak akan menjelaskan lagi secara detail mengenai maksud dari sebuah tag atau perintah HTML, karena pada halaman berikutnya Anda akan dihadapkan pada pelajaran yang bersifat INTERMEDIATE atau kelas menengah. Bila Anda ingin menanyakan materi yang mungkin masih sulit Anda Pahami atau Anda punya kritik mengenai materi yang telah saya uraikan. Anda dapat menyatakan nya melalui FORUM SSC yang kami sediakan. Klik link ini untuk menuju ke Forum SSC .... SSC FORUM...
Pada Pembahasan berikutnya Anda akan diperkenalkan dengan beberapa script pendukung dari pemrograman HTML, seperti CSS , JavaScript dan PHP. Bila Anda sudah yakin untuk melanjutkan silahkan ke Halaman Berikutnya, Bila belum yakin saya sarankan untuk kembali ke Halaman sebelumnya.
7:53 AM
Seputar Informasi Internet Pilihan
).
Posted in: 
0 komentar:
Post a Comment