(HTML Forms) Ketentuan Tata cara pembuatan formulir HTML memungkinkan kita untuk dengan mudah sederhana/menarik dan luwes membuat suatu Formulir isian yang berinteraksi dengan program CGI cukup memakai perintah TAG HTML seperti, textfields, checkbox, menu dan kelengkapan lainnya. Satu-satunya yang perlu diperhatikan adalah berinteraksi dengan program antar muka yang mana/bagaimana. Jika belum ada maka kita harus membuatnya.
Contoh Formulir isian Misalkan bila kita membuat form dalam bentuk sederhana, biasanya kita memakai perintah 2 Tag HTML seperti berikut:
Akan menghasilkan tampilan sbb: Ketik nama anda: Kirim Hapus
Dari contoh diatas terlihat Syntax-nya terdiri atas 3 bagian. Pertama Tanda pengenal Form, sehingga browser mengenalnya sebagai formulir isian yang datanya harus berinteraksi dengan program CGI hello.pl yang berada di drektori CGI-BIN. <FORM METHOD=POST ACTION="/cgi-bin/hello.pl"> Bagian kedua Disini kita tentukan variabel isiannya. perintahnya adalah seperti berikut: Ketik nama anda: <INPUT NAME="name" VALUE="TEXT" SIZE="20" MAXLENGTH="30"> Bagian Terakhir MaLerl erkullahan emrograman Web l
Dibutuhkan suatu masukkan yang menandakan formulir telah selesai di-isi yang bisa mengumpulkan data yang terisi untuk dikirim ketujuannya. Dan masukkan untuk membatalkan pengisian seluruh masukkan untuk diperbaiki. <INPUT TYPE="SUBMIT" VALUE="Kirim"> <INPUT TYPE="RESET" VALUE="Hapus">
Mari kita lihat lebih dekat lagi rincian TAGS nya Tag FORM Format: <FORM ACTION="url" METHOD=[POST| GET][ENCTYPE="..."]> ... </FORM> Tag FORM menyatakan awal dan akhir suatu masukan. Meskipun kita bisa membuat jenis masukan dalam 1 halaman tidak berarti kita bisa menggabungkannya dalam satu peryataan. Untuk itu Tag FORM bisa menggunakan atribut berikut ini: ACTION, METHOD, dan ENCTYPE. Guna atribut adalah sbb: ACTION Menentukan data masukan akan dilayani oleh CGI pada URL yang ditentukan. Bila atribut ini tidak ada, maka akan dipakai CGI URL dimana tempat dokumen tersebut berada. METHOD menentukan metoda pengiriman. Nilai METHODE. yang berlaku adalah GET dan POST Dimana: o GET -- mengirim informasi ke server melalui variabel environment. o POST -- mengirim informasi ke srver memakaimsend standard input. Metoda mana yang digunakan tergantung tata cara kerja Server. Umumnya dipakai POST. ENCTYPE adalah sebuah pilihan yang bersifat khusus. Merupakan opsi dan lazimnya ditiadakan. Digunakan untuk menentukan bagaimana informasi suatu formulir harus di encode oleh brwser. Attribute ini hanya diterapkan di metoda POST. Semua informasi yang disalurkan memakai metoda GET di encode dengan cara baku. Jenis MIME yang berlaku untuk ENCTYPE adalah application/x-www- form-urlencoded, adalah cara encode yang baku untuk CGI. Didalam tag FORM, INPUT, SELECT, dan TEXTAREA tag digunakan untuk menentukan unsur antarmuka didalam formulir. Dibawah ini adalah rinciannya.
Tag INPUT Format: <INPUT TYPE="..."[NAME="..."] [VALUE="..."] [SIZE="..."] [MAXLENGHT="..."] [SRC="..."] [CHECKED]> MaLerl erkullahan emrograman Web l
INPUT tag dipakai untuk menentukan unsur masukan sederhana didalam FORM dan merupakan tag yang berdiri sendiri; tag </input> tidak diperlukan. dan memungkin anda untuk menentukan berbagai cara data masukan. Seperti text, password, checkbox, tombol radio, submit dan reset Semua jenis masukkan kecuali submit dan reset memerlukan nama identifikasi. Semuanya diperinci sebagai berikut: TYPE=TEXT Masukan text (text field entry) yang merupakan jenis yang ditentukan. inilah sebuah masukan text field: Text : Berikut adalah sandinya: Text :<input type=text name="fieldname" size="20" maxlenght="30"> Artinya kita membuat masukan text, yang bernama "fieldname", Panjangnya text adalah 20, huruf masukan tidak boleh lebih dari 20 huruf. TYPE=PASSWORD Masukkan Text, sama seperti type=text kecuali huruf masukkan akan ditayangkan sebagai tanda asterik (*) Misalnya: Password : Dan berikut adalah sandinya: Text :<input type=password name="passwdname" size="10" maxlength="10"> TYPE=CHECKBOX Jenis Checkbox adalah untuk membuat kotak pilihan yang bisa dipilih ataupun tidak dipilih. Seperti conto berikut inni: Bahasa pemrograman mana yang anda kuasai? (Anda bisa memilih lebih dari satu.): o C o Java o Pascal Here is the code: MaLerl erkullahan emrograman Web l
Which programming language do you know? (You can select more than one.): <ul> <li><input type=checkbox name="language1" value="C">C <li><input type=checkbox name="language2" value="Java">Java <li><input type=checkbox name="language3" value="Pascal">Pascal </ul> Disini kita membuat 3 buah checkboxyang diberinama "language1", "language2" dan "language3". Jadi bila kita pilih kotak pertama dan ketiga lalu menekan tombol submit maka, data language1=c" dan "language3=Java" akan diteruskan ke server. TYPE=RADIO Tombol radio adalah mirip dengan checkbox. Bedanya adalah bila anda menentukan banyak tombol radio dengan nama yang sama, pengguna hanya bisa memilih satu tombol saja. Berikut adalah bagaimana tombol radio bekerja: Bahasa program mana yang paling anda sukai? o C o Java o Pascal Berikut adalah sandinya: Here is the code: Bahasa program mana yang paling anda sukai?
<ul> <li><input type=radio name="language" value="C">C <li><input type=radio name="language" value="Java">Java <li><input type=radio name="language" value="Pascal">Pascal </ul> TYPE=SUBMIT Adalah tombol tekan yang bila ditekan akan mengirim formulir yang bersangkutan ke server. Ini adalah tombol submit. (ini hanya contoh) Submit anything
MaLerl erkullahan emrograman Web l
Ini adalah sandinya:
<input type=submit value="Submit anything"> TYPE=RESET Adalah tombol tekan yang akan menghapus semua data masukan. Tombol Reset: Reset the value
Sandinya adalah:
<input type=reset value="Reset the value">
TAG SELECT Format: <SELECT NAME="..." [SIZE="..."] [MULTIPLE]> <OPTION [VALUE="..."] [SELECTED]> <select> Dengan tag ini kita bisa membuat menu pilihan. Pengguna bisa memilih pilihan yang beragam bila attribut MULTIPLE digunakan. Panjang daftar pilihan bisa dibatasi tayangannya dengan menggunakan Tag SIZE; Bila daftar lebih panjang dari yang dibatasi browser akan menampilkan sroll bar. Daftar pilihan biasanya ditayangkan dalam bentuk pull down menu. Bila Size tidak ditentukan maka yang berlaku adalah size=1. Syntax dari tag <select> adalah mirip dengan lists (Daftar pilihan). Setiap item pilihan ditentukan oleh tag <option>, yang merupakan tag tunggal. Yang dikurung dalam tag<select>. Bila nilainya tak ditentukan di tag <option>. Anda bisa memilih attribute untuk untuk pilihan sebagai pilihan awal. Dalam daftar pilihan dengan size 1 (pull down menu), satu pilihan dinyatakan sebagai pilihan awal, bila tidak ditentukan option sebagai pilihan awal, maka urutan pilihan pertamalah yang ditentukan sebagai pilihan awal. Namun, dalam daftar pilihan dengan size lebih besar dari 1, maka bisa dibuat <select> tanpa adanya pilihan awal. Contoh: Window NT
Tag TEXTAREA Format: <TEXTAREA NAME = "..." ROWS = number COLS = number></TEXTAREA> Tag TEXTAREA Digunakan untuk bidang (field) masukan text yang banyak dan bisa dibatasi lslnya dan bisa sudah berisi text awal, dengan menggunakan Atribute TEXTAREA sbb: NAME adalah Nama simbolik dari bidang masukan text. ROWS yang menentukan tinggi bidang masukan text dinyatakan dengan angka menurut jumlah huruf. COLS yang menentukan lebar bidang masukan text dinyatakan dengan angka menurut jumlah huruf. TEXTAREA Bidang masukan text akan ditayangkan berikut scroll bar; sembarang jumlah text bisa dimasukkan didalamnya. Unsur TEXTAREA memerlukan baik tag pembukaan maupun penutup. Berikut kita akan membuat TEXTAREA dengan 4 baris (row) dan 40 kolom.
Berikut adalah sandinya tanpa isi awal: <TEXTAREA NAME="foo" ROWS=4 COLS=40></TEXTAREA> Sandi dengan isi awal <TEXTAREA NAME="foo" ROWS=4 COLS=40> ini adalah isi awalnya. </TEXTAREA>