Form indentik dengan Formulir, form sangat dibutuhkan pada saat kita mengijinkan atau menginginkan adanya nilai/ data yang dipilih atau dimasukkan oleh pengguna, seperti komentar tamu ke suatu situs web / blog (Guestbook) atau pilihan dari jenis suatu kelompok item tertentu.
Kapasitas dari form hanya menyediakan media entry data dan mengirimkannya ( request ) tetapi tidak untuk menerima dan mengolah. Web Scripting yang bersifat sever side akan menangani penerimaan dan pengolahan data secara lebih lanjut.
Form dalam HTML merupakan jembatan komunikasi antara client dengan server, untuk melakukan validasi pengisian elemen form dibutuhkan Javascript karena HTML tidak memiliki perintah untuk pengujian validasi dari nilai elemen form.
Tag-tag Form terletak dalam Tag BODY, yang meliputi :
<HTML>
...................dst
<BODY>
<form name=”X” method=”GET|POST” action=”y.asp”>
...(elemen-elemen tag-tag dalam form )
</form>
</BODY>
</HMTL>
| name | (optional) nama untuk form yang berlaku, digunakan untuk form handing |
| method | GET = data dikirimkan melalui URL address POST = data dikirimkan bersama HTTP header |
| action | URL / File yang digunakan untuk menangkap dan mengolah nilai (data) yan dikirimkan (server side scripting) |
Untuk membuat tampilan elemen objek form tersusun rapi maka dapat digunakan TABEL.
Metoda Pengiriman Data.
Dalam pengiriman data dikenal dengan dua istilah yaitu
1. Unidirectional (satu arah)
Data-data yang ada dalam form dikirimkan melalui Action ke sebuah file atau URL lain, agar dapat diterima dan diolah (verifikasi). Sedangkan untuk Form dibuat secara statis dengan HTML dengan format Form.htm . Hal ini dimaksudkan agr file atau URL action yaitu verifikasi.asp yang akan menentukan proses selanjutnya dari data-data yang diinputkan dapat melalui form tersebut.
Kelemahan dari pendekatan ini adalah semakin banyak file-file yang dibuat maka akan lebih sulit untuk melakukan pengembangan selanjutnya. Bahkan sering kita jumpai banyak terdapat file-file yang kodenya sama sehingga terjadi pemborosan Storage.
Kelebihan dari pendekatan ini adalah cocok sekali kalau membangun aplikasi menggunakan metode prototipe ataupun trial and error.
2. Bidirectional ( dua arah )
Data-data yang ada dalam form dikirimkan melalui action ke dirinya sendiri ( file yang sama ), untuk selanjutnya dapat diterima dan diolah (verifikasi). Sehingga file form tidak hanya untuk menampilkan form untuk diisikan datanya namun jua sebagai file untuk melakukan proses verifikasi terhadap data-data form tersebut saat dikirimkan dan dibuat dengan server side script ( contoh : ASP, PHP atau JSP ). Biasanya cara ini menerapkan onsep Object Oriented Programming, yaitu program dipisah menjadi beberapa bagian sesuai kepentingan prosesnya. Pemecahan dapat secara class, sub routine/ procedure atau function.
Kelemahan : adanya file yang berisi ribuan baris perintah, yang selanjutnya akan membawa kesulitan untuk proses pengembangan.
Kelebihan : Proses dan output akan jauh lebih cepat dibandingkan dengan menggunakan cara yang pertama.
A. ELEMEN OBJEK TAG-TAG FORM.
Setiap elemen objek dari tag-tag form merupakan media entry data, masing-masing elemen obejk memiliki dua hal yang penting yaitu nama elemen ( mutlak harus ada, serta pemberian nama tidak diperkenankan menggunakan spasi, tanda baca ataupun angka ) dan nilai ( value ).
Karakteristik daripada elemen objek forum adalah :
- INPUT. User diberikan kesempatan untuk memasukkan nilai dengan tampilan model objek form yang variatif dan juga mengirimkan ataupun mereset nilai dari form tersebut.
- SELECT atau DAFTAR. User diberikan kesempatan untuk memilih nilai dari daftar opsi atau pilihan yang diberikan.
- TEXT AREA atau Area Isian. User diberikan kesempatan untuk memasukkan nilai berupa karakter dengan kapasitas tak terbatas.
- Input. Sintaks penulisan elemen objeknya adalah : <INPUT name=”x” type=”y” value=”v”>
| name | nama untuk input yang berlaku |
| type | typenya adalah text, password, checkbox, radio, hidden, reset, submit, button, image dan file |
| checked | (optional) input yang secara default dipilih ( hanya untuk type checkbox dan radio ) |
| value | (optional) nilai default atau nilai awal dari input yang dipilih |
| size | (optional) lebar/ ukuran dari input karakter yang ditampilkan ( untuk type text dan password, sedangkan untuk image digantikan dengan width dan height ) |
| maxlenght | (optional) jumlah maksimal karakter yang dapat diinputkaan ( untuk type text dan password) |
| acceskey | merupakan shortcut ( dengan menggunakan kombinasi tombol ALT ) untuk pengisian objeknya |
| disabled | membuat agar objek tersebut dalam keadaan tidak aktif |
- Type Text. Type ini digunakan untuk data isian seperti nama orang atau alamat sesorang. Bentuk objek dari type ini adalah single line yang artinya input isian akn diberikan secara horizontal ( dala satu baris ) Contoh sintaksnya : <Input type=”TEXT” name=”Nama” size=”20” maxlenght=”20”>
- Type SUBMIT, RESET dan IMAGE Type ini digunakan untuk membuat tombol sumbit, reset dan image. Tombol submit digunakan untuk mengirimkan data-data yang telah diberikan pada form. Sedangkan tombol reset akan mengembalikan keadaan form kembali seperti keadaan awal saat form itu dipanggila untuk pertama kalinya. Khusus untuk kedua type ini value yang digunakan sebagai caption atau nama yang tertera dari tombolnya. Adapun untuk type Image memiliki karakteristik hampir sama seperti submit, perbedaannya terletak dari bentuk objeknya yaitu berupa gambar dan value yang dikirim oleh type Image ini adalah koordinat x,y dari gambar tersebut pada saat gambar tersebut diklik. Contoh sintaksnya : <INPUT type=”SUBMIT” name=”aksi” value=”kirim”> <INPUT type=”RESET” name=”aksi” value=”Undo”> <INPUT type=”IMAGE” name=”aksi”>
- Type PASSWORD. Penggunaan type ini akan menyebabkan setiap karakter yang diketikkan ke dalam objek ini akan disembunyikan dengan melakukan masking karakter ke * atau •. Yang sering digunakan untuk input account password atau pin code. Contoh sintaksnya : <INPUT type=”PASSWORD” name=”Pwd” size=”10” maxlenght=”10”>
- Type CHECKBOX. Type ini berguna untuk membuat kotak-kotak cek. Kotak cek adalah suatu bentuk masukkan yang memungkinkan user untuk memilih lebih dari satu pilihan. Setiap checkbox dapat memiliki nama yang berbeda atau nama yang sama (array). Karena sifat dari type ini hanya memilih sehingga user tidak dapat memasukkan nilai, maka untuk itu value dalam type ini wajib diberikan. Untuk memberikan default kotak yang dipilih maka diberikan atribut tak ternilai yaitu checked pada objeknya. Contoh sintaksnya : <INPUT type=”CHECKBOX” name=”binatang” value=”kucing”>Kucing <INPUT type=”CHECKBOX” name=”buah” value=”Jeruk”>Jeruk
- Type RADIO Type ini digunakan mirip dengan checkbox hanya saja Radio hanya dapat dipilih satu kali (bisa diclick tetapi tidak bisa unclick). Jika ada lebih dari satu objek dengan type ini diberikan nama yang sama, dengan vaue yang berbeda maka kumpulan objek ini akan memiliki sifat multiple choice. Contoh sintaksnya : <INPUT type=”RADIO” name=”Sex” value=”P” checked>Pria <INPUT type=”RADIO” name=”Sex” value=”W”>Wanita
- Type FILE. Bila data yang diberikan berupa upload data dokumen atau file seperti gambar atau audio, maka objek input yang digunakan harus bertypekan FILE. Tampilan objek ini akan menyertakan sebuah tombol browse untuk dapat digunakan dalam pencarian data dokumen atau file yang akan dikirimkan atau diupload. Contoh sintaksnya : <INPUT type=”FILE” name=”upload”>
- Type BUTTON Selain tombol yang bertypekan SUBMIT atau RESET, kita juga dapat membuat tombol sendiri yang memiliki fungsi yang dapat kita buat sendiri. Caranya adalah dengan menggunakan type BUTTON, karena tombol yang dibuat dengan type ini dapat memiliki fungsi eksklusif. Penambahan script untuk fungsi tersebut melibatkan Javascript atau VBscript dan diletakkan dalam atribut event seperti onclick, onchange, onmouseover dan sebagainya. Contoh sintaksnya :
<INPUT type=”BUTTON” name=”aksi” value=”TEST” onclick=”fungsiJS()”>
- Type HIDDEN Objek dengan type ini tidak dapat dilihat tampilannya secara langsung dalam web browser. Objek dengan type ini dapat digunakan untuk bertukar nilai sementara antar variabel dalam server side programming. Nilai dalam objek ini bersifat statis artinya kita tidak dapat menggantinya secara langsung. Contoh sintaksnya : <INPUT type=”HIDDEN” name=”kunci” value=”rahasia”>
B. SELECT (Daftar).
Select digunakan untuk pemilihan terhadap sebuah daftar, disajikan secara menu (combo box, spinner dan menu list ). Tag yang dipakai untuk pendifinisian daftar pilihan adalah Tag <SELECT>. Untuk daftar pilihan atau opsi didefinisikan dengan tag <OPTION> dan berada dalam tag <SELECT>.
Sintaks selengkapnya dalah sebagai berikut :
<select name=”X” size=”Y”>
<option selected value=”value1”>menu text1</option>
<option value=”value2”>menu text2</option>
</select>
| name | nama untuk select yang berlaku |
| size | tinggi/bentuk tampilan menu select 1 (default) combo box 2 spinner >2 menu list |
| selected | option yang secara default dipilih |
| value | nilai yang dikirimkan dari option yang dipilih |
| menu text-n | text/label yang ditampilkan untuk tiap option |
C. TEXT AREA
Digunakan untuk pengisian teks/ karakter yang panjang seperti komentar dan email. Bila kita menggunakannya maka sebaiknya metode pengiriman yang digunakan nantinya adalah POST agar data yang dikirimkan idak terpotong.
Sintaksnya: <textarea name=”x” rows=”y” cols=”z”>default text</textarea>
| name | nama untuk textarea yang berlaku |
| rows | banyaknya baris karakter yang ditampilkan untuk textarea |
| cols | banyaknya kolom karakter yang ditampilkan untuk textarea |
| default text | (optional) default text yang diberikan saat ditampilkan pertama kalinya, terletak diantara <textarea> dan </textarea> |
Contoh Latihan.
<HTML><BODY>
<FORM method=”get” action=”proses.asp”>
Nama:<INPUT type=”text” name=”nama”><br>
Password;<INPUT type=”password” name=”pass”><br>
Jenis kelamin:<INPUT type=”radio” name=”jk” value=”pria”>Pria
<INPUT type=”radio” name=”jk” value=”wanita”>Wanita<br>
Tingkat Pendidikan :
<SELECT name=”tp”>
<OPTION value=”SD”>Sekolah Dasar</OPTION>
<OPTION value=”SMP”>Sekolah Menengah Pertama</OPTION>
<OPTION value=”SMA”>Sekolah Menengah Atas</OPTION>
<OPTION value=”pt”>Perguruan Tinggi</OPTION>
</SELECT> Hobby :
<INPUT type=”checkbox” name=”hobby” value=”Olah raga”>Olah Raga
<INPUT type=”checkbox” name=”hobby” value=”Makan”>Makan
<INPUT type=”checkbox” name=”hobby” value=”Membaca”>Membaca<br>
Komentar :<TEXTAREA name=”komentar”></TEXTAREA><br>
<INPUT type=”submit” name=”aksi” value=”kirim”>
<INPUT type=”reset” name=”aksi” value=”reset”>
</FORM>
</BODY></HTML>
Dibawah ini hasil dari latihan di atas
