Mengidentifasi Anatomi dan Cara Kerja Form

1)     Definisi dan fungsi form

Form merupakan salah satu bentuk halaman web yang digunakan untuk menerima masukan dari pengguna, untuk selanjutnya masukan dari pengguna tersebut diolah menggunakan bahasa pemrograman web, baik secara server side scripting(misalkan PHP, JSP)  ataupun client-side scripting (javascript).Form dapat digunakan untuk berbagai keperluan seperti keperluan login, transaksi penjualan,  mengumpulkan informasi atau meminta umpan balik dari pengguna, menawarkan barang/jasa secara on-line dan sebagainya. Form sangat sering kita jumpai dalam satu aplikasi sistem informasi berbasis web.

2)     Anatomi dari form

Standard atau format umum penulisan dari form  adalah sebagai berikut :

<Form metode=”post/get” action=”….”> …… …… …… </form>

Berikut ini adalah beberapa variasi yang dapat diterapkan pada atribut<form> :

<FORM ACTION=action base> form tags </FORM> <FORM METHOD=method> form tags </FORM> <FORM ENCTYPE=media type> form tags </FORM> <FORM ACTION=action base TARGET="target window name"> form tags </FORM><FORM SCRIPT=URL> form tags </FORM>

Catatan : target window name diisikan berupa:

_blank

_self

_parent

_top

Di antara elemen <form> dan </form> digunakan elemen – elemen HTML <input>yang berfungsi untuk mendefinisikan input yang akan dimasukkan oleh pengguna. Format umum dari penulisan elemen HTML <input>adalah sebagai berikut :

<input       name="name"       size="number"       type="text"|"checkbox"|"radio"|"submit"|"reset"       value="value"       checked >

Pada jenis masukan (input) dari halaman web minimal harus mempunyai atribut jenis (type),nama (name) dan nilai (value) default. Disamping atribut type,masing-masing elemen input memiliki atribut-atribut yang lain dan beberapa atribut tersebut berlaku untuk beberapa jenis elemen input. Sebagai contoh adalah elemen <input> yang atribut TYPE-nya adalah text memiliki atribut antara lain :

Name	: untuk menamai kotak
Value	: untuk menandai atau menampung teks
Size	: mengatur ukuran teks pada kotak
maxlength	: menentukan panjang maksimum teks

Masing-masing jenis input memiliki karakteristik yang berbeda, dan pemilihan penggunaannya disesuaikan dengan kesesuaian nilai dari input data yang dikelola.

3)    Cara Kerja Form

Form HTMLdigunakanuntuk melewatkan datadari klien ke server. Kerja Web bekerja didasarkan pada arsitektur client / server yang sangat dasar yang dapat diringkas sebagai berikut : klien (web browser ) mengirim permintaan ke server (misalnya apache , nginx , IIS , Tomcat , dan lain sebagainya ) , menggunakan protokol HTTP . Server menjawab requets dari form dengan  menggunakan protokol yang sama .

A.    Sisi Klien

Server akan memproses data dan kemudian mengirim respon kepada pengguna. Disisi klien memastikan data mana yang dkirim melalui  elemen form. Di sisi klien , HTML untuk mengkonfigurasi permintaan HTTP untuk mengirim data ke server . Hal ini memungkinkan pengguna untuk memberikan informasi yang akan disampaikan dalam permintaan HTTP .

Atribut yang sangat peran saat pengiriman data adalah action dan method. Atribut –atribut dari elemen HTML <form>adalah sebagai berikut  :

Atribut	Keterangan
Method	Metode untuk pengiriman data ke tujuan yaitu : a.            Get : mengirim data ke server dengan cara meletakan data pada bagian akhir dari Url yang dituju b.            Post : datanya dikirim terpisah
Action	Aksi yang muncul ketika pengguna meneka tombol tertentu

Atribut Action

Atribut ini mendefinisikan mana data akan dikirim . Nilainya harus merupakan URL yang valid . Jika atribut ini tidak menyediakan , data akan dikirim ke URL halaman ini berisi formulir. Contoh penggunaan atribut action

1.data dikirim ke http://foo.com

<form action="http://foo.com">

2.Data dikirim ke server yang sama bahwa itu host halaman form , tapi ke URL yang berbeda pada server :

<form action="/somewhere_else">

3.Tanpa atribut , seperti di bawah , atribut <form> menyebabkan data yang akan dikirim ke halaman yang meliputi bentuk:

<form>

4. Notasi berikut untuk menunjukkan bahwa data harus dikirim ke halaman yang sama yang berisi formulir , ini diperlukan karena sampai HTML5 , atribut tindakan yang diperlukan .

<form action="#">

Atribut Method

Atribut metode untuk pengiriman data menggunakan post dan get.  Atribut ini mendefinisikan bagaimana data dikirim . Protokol HTTP menyediakan beberapa cara untuk melakukan permintaan , data bentuk HTML dapat dikirim melalui setidaknya dua dari mereka : metode GET dan metode POST . Permintaan HTTP terdiri dari dua bagian : sebuah header yang berisi sekumpulan metadata global mengenai kemampuan browser , dan body yang dapat berisi informasi yang diperlukan ke server untuk memproses permintaan khusus .

Methode GET

Metode GET adalah metode yang digunakan oleh browser untuk meminta server untuk mengirim kembali resource yang diberikan : " hey , server, kirimkan resource ini . " Dalam hal ini , browser mengirimkan sebuah body kosong . Karena body kosong , jika formulir dikirim menggunakan metode ini , data yang dikirim ke server ditambahkan ke URL .

Contoh penerapan mehode get pada elemen <form>

<!DOCTYPE html> <html> <head> <title>cek form </title> </head> <body> <form action="http://foo.com" method="get"> <input name="say" value="Hallo"> <input name="to" value="Semua"> <button>kirimkan salam</button> </form </body> </html>

Methode POST

Metode POST sedikit berbeda , POST mengirimkan server untuk meminta respon yang memperhitungkan data yang tersedia dalam request. HTTP : " hey Server , lihatlah data ini dan saya mengirimkan kembali hasil yang baik . " Jika form yang dikirim dengan menggunakan data metod POST akan ditambahkan dalam bodydari HTTP yang request .

Contoh penerapan mehode POST pada elemen <form>

<!DOCTYPE html> <html> <head> <title>cek form </title> </head> <body> <form action="http://foo.com" method="post"> <input name="say" value="Hall"> <input name="to" value="Semua"> <button>kirim POST</button> </form> </form </body> </html>

Dengan menggunakan method post, request HTTP akan terlihat sebagai berikut:

POST / HTTP/1.1 Host: foo.com Content-Type: application/x-www-form-urlencoded Content-Length: 13 say=Hall&to=Semua

Content-Length mengindikasikan ukuran dari body sedangkan Content-Type merupakan type data resource dari si pengirim ke server.

A.    Sisi Server

Apapun metode HTTP yabg digunakan (get atau post), server menerima string yang akan di order untuk mendapatkan data list sebagai key atau nilai pasangan. Cara mengakses list/daftar tergantung pada platform pengembangan yang digunakan.

3)    Elemenform html

Form HTML digunakan untuk memilih pelbagai macam inputan yang disediakan.  Data bisa diinputan dalam bentuk input teks , pilihan radio button, check box dan lain sebagainya. Bentuk inputan tersebut dikemas elemen dalam tag-tag form. Berikut adalah elemen-elemen yang disediakan oleh html

Tag	Deskripsi	Format umum tag
<form>	Mendefinisikan untuk form bagi user	<form> </form>
<input>	Mendefinisikan kontrol input pada form	<form> <input type="submit" value="Submit"> </form>
<textarea>	Mendefinisikan kontrol input berupa area teks pada form	<textarea rows="4" cols="50">       teks yang akanditampilkan </textarea>
<label>	Mendefinisikan  label pada tag elemen <input>	<form action="demo_form.asp"> <label for="buku">Buku</label> <input type="radio" name="barang" id="buku" value="buku"><br> </form>
<fieldset>	Group  dengan element yang berhubungan satu sama lain didalam form	<form>   <fieldset>     <legend>Personalia:</legend>     Name: <input type="text"><br>     Email: <input type="text"><br>     Date of birth: <input type="text">   </fieldset> </form
<legend>	Mendefinisikan judul untuk elemen <fieldset>	<fieldset>     <legend>Personalia:</legend>     Name: <input type="text"><br>     Email: <input type="text"><br>     Date of birth: <input type="text">   </fieldset> </form
<select>	Merupakan daftar secara drop-down	<select>   <option value="volvo">Volvo</option>    <option value="mercedes">Mercedes</option>   <option value="audi">Audi</option> </select
<optgroup>	Mendefinisikan  group options yang berhubungan satu sama lain dalam bentuk drop-down list, merupakan bagian dari tag elemen <select>	<select>   <optgroup label="Swedish Cars">     <option value="volvo">Volvo</option>     <option value="saab">Saab</option>   </optgroup>   <optgroup label="German Cars">     <option value="mercedes">Mercedes</option>     <option value="audi">Audi</option>   </optgroup> </select>
<option>	mendefinisikan option pilihan dalam bentuk drop-down list, merupakan bagian dari tag elemen <select>	<select>   <option value="volvo">Volvo</option>    <option value="mercedes">Mercedes</option>   <option value="audi">Audi</option> </select
<button>	Merupakan tombol yang dapat diklik	<button type="button">Klik disini!</button>
<datalist>à elemen baru di html5	Daftar/list khusus yang didefinisikan dalam elemen tag <input>	<input list="browsers"> <datalist id="browsers">   <option value="Internet Explorer">   <option value="Firefox">   <option value="Chrome">   <option value="Opera">   <option value="Safari"> </datalist>
<keygen>à elemen baru di html5	Merupakan  generator key-pair field untuk form	<form action="demo_keygen.asp" method="get">   Username: <input type="text" name="usr_name">   Encryption: <keygen name="security">   <input type="submit"> </form>
<output>à elemen baru di html5	Merupakan hasil dari suatu perhitungan	<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0   <input type="range" id="a" value="50">100   +<input type="number" id="b" value="50">   =<output name="x" for="a b"></output> </form>

4)    Elemen form button

Format umum penulisan input button pada tag <form> adalah sebagai berikut :

< button type=button> < button type=button name=name> < button type=button value=value>

Berikut contoh listing programnya

<!doctype html> <html> <body>           <button type="button" onclick="alert('hallo selamat datang')"> klik mulai !</button> </body> </html>

3)    Contoh form sederhana

Berikut ini adalah contoh dari sebuah halaman web yang berisi form yang sederhana :

<html> <head> <title> Form 1 </title> </head> <body> <form name=”form1” method=”POST” action=”inputdata.php”>      Nama : <input type="text" name="nama"><br><br>      Kelas: <input type="text" name="kelas" maxlength="2"><br><br>      No   : <input type="text" name="nomor" value="10"><br><br>      Hobby: <input type="text" name="hobby" size="8"><br><br>      Password: <input type="password" name="password"> <br><br> <input type="submit" name="submit" value="Submit">&nbsp;&nbsp;&nbsp;<input type="reset" name="reset" value="Reset"> </form> </body> </html>

a.    Rangkuman

Dari kegiatan belajar ini dapat dibuat rangkuman sebagai berikut :

§  Form adalah salah satu bentuk halaman web yang digunakan untuk menerima masukan dari pengguna, untuk selanjutnya masukan dari pengguna tersebut diolah menggunakan bahasa pemrograman web, baik secara server side scripting(misalkan PHP, JSP)  ataupun client-side scripting (javascript).

§  Form dapat digunakan untuk berbagai keperluan seperti keperluan login, transaksi penjualan,  mengumpulkan informasi atau meminta umpan balik dari pengguna, menawarkan barang/jasa secara on-line dan sebagainya.

§  Disamping atribut type,masing-masing elemen input memiliki atribut-atribut yang lain dan beberapa atribut tersebut berlaku untuk beberapa jenis elemen input. Sebagai contoh adalah elemen <input> yang atribut TYPE-nya adalah text memiliki atribut antara lain :

-       NAME, digunakan untuk menamai kotak

-       VALUE, digunakan untuk menandai atau menampung teks

-       SIZE, digunakan untuk mengatur ukuran teks pada kotak

-       MAXLENGTH, digunakan untuk menentukan panjang maksimum teks

§  Form HTMLdigunakanuntuk melewatkan datadari klien ke server.

§  Elemen – elemen tag form HTML , yaitu <form>, <input>, <texarea>, <label>, <fieldset>, <legend>, <select>, <optgroup>, <option>, <button>, <datalist>, <keygen>, <output>.