Formulir Isian HTML

(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 perintah2 Tag HTML seperti berikut:
<FORM METHOD=POST ACTION="/cgi-bin/hello.pl">
Ketik nama anda: <INPUT NAME="name" TYPE="TEXT" SIZE="20"
MAXLENGTH="30">
<INPUT TYPE="SUBMIT" VALUE="Kirim"> <INPUT TYPE="RESET"
VALUE="Hapus">
</FORM>

Akan menghasilkan tampilan sbb:

Kirim Hapus
Ketik nama anda:

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
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]>
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:

 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
 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
Sandinya:

<select name="platform" size="1">

<option selected value=""> Select your platform
<option value="NT">Window NT
<option value="95"> Window 95
<option value="Ultrix">Ultrix
<option value="AIX"> AIX
<option value="MacOS">MacOS
</select>

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>
akan terlihat sbb:

ini adalah isi aw alnya.