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 :
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 :
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 |
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 |
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
Sekedar coretan untuk belajar bersam. disini saya tidak untuk bersaing, namun saya disini untuk melengkapi dan aling belajar bersama
Layanan RSS Vivanews.com dapat diakses pada URL-URL berikut:
http://rss.vivanews.com/ Free Download Movie :