Anatomi Dan Cara Kerja Form
Wednesday, March 25, 2020
Edit
Form merupakan salah satu bentuk halaman web yang dipakai untuk mendapatkan masukan dari pengguna, untuk selanjutnya masukan dari pengguna tersebut diolah memakai bahasa pemrograman web, baik secara server side scripting(misalkan PHP, JSP) ataupun client-side scripting (javascript).
Form sanggup dipakai untuk banyak sekali keperluan ibarat keperluan login, transaksi penjualan, mengumpulkan isu atau meminta umpan balik dari pengguna, menunjukkan barang/jasa secara on-line dan sebagainya. Form sangat sering kita jumpai dalam satu aplikasi sistem isu berbasis web. Standard atau format umum penulisan dari form yakni sebagai berikut :
<Form metode=”post/get” action=”….”>
……
……
……
</form>
Berikut ini yakni beberapa variasi yang sanggup 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>
Di antara elemen <form> dan </form> dipakai elemen – elemen HTML <input> yang berfungsi untuk mendefinisikan input yang akan dimasukkan oleh pengguna. Format umum dari penulisan elemen HTML <input> yakni sebagai berikut :
<input name="name" size="number" type="text"|"checkbox"|"radio"|"submit"|"reset" value="value"
checked ></input>
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 mempunyai atribut-atribut yang lain dan beberapa atribut tersebut berlaku untuk beberapa jenis elemen input. Sebagai teladan yakni elemen <input> yang atribut TYPE-nya yakni text mempunyai atribut
antara lain :- Name : untuk menamai kotak
- Value : untuk menandai atau menampung teks
- Size : mengatur ukuran teks pada kotak
- maxlength : menentukan panjang maksimum teks
A. Cara Kerja Form
Form HTML dipakai untuk melewatkan data dari klien ke server. Kerja Web bekerja didasarkan pada arsitektur client / server yang sangat dasar yang sanggup diringkas sebagai berikut : klien (web browser ) mengirim seruan ke server (misalnya apache , nginx , IIS , Tomcat , dan lain sebagainya ) , memakai protokol HTTP . Server menjawab requets dari form dengan memakai protokol yang sama .
1. Sisi Klien
Server akan memproses data dan kemudian mengirim respon kepada pengguna. Disisi klien memastikan data mana yang dikirim melalui elemen form. Di sisi klien, HTML untuk mengkonfigurasi seruan HTTP untuk mengirim data ke server . Hal ini memungkinkan pengguna untuk mengatakan isu yang akan disampaikan dalam seruan HTTP . Atribut yang sangat tugas dikala pengiriman data yakni action dan method. Atribut – atribut dari elemen HTML <form> yakni sebagai berikut :
a. Atribut Action
Atribut Action 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://mikirbae.com <form action="http://mikirbae.com">.
Atribut metode untuk pengiriman data memakai post dan get. Atribut ini mendefinisikan bagaimana data dikirim . Protokol HTTP menyediakan beberapa cara untuk melaksanakan seruan , data bentuk HTML sanggup dikirim melalui setidaknya dua dari mereka : metode GET dan metode POST. Permintaan HTTP terdiri dari dua bab : sebuah header yang berisi sekumpulan metadata global menenai kemampuan browser , dan body yang sanggup berisi isu yang diharapkan ke server untuk memproses seruan khusus.
Metode GET yakni metode yang dipakai oleh browser untuk meminta server untuk mengirim kembali resource yang dib erikan : " hey , server, kirimkan resource ini . " Dalam hal ini , browser mengirimkan sebuah body kosong . Karena body kosong, jikalau formulir dikirim memakai 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://www.mikirbae.com" method="get"><input name="say" value="Hallo"><input name="to" value="Semua"><button>kirimkan salam</button>
</form
</body>
</html>
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 memakai data metod POST akan ditambahkan dalam body dari HTTP yang request . Contoh penerapan mehode POST pada elemen <form>.
<!DOCTYPE html>
<html>
<head>
<title>cek form </title>
</head>
<body>
<form action="http://www.mikirbae.com" method="post"><input name="say" value="Hallo"><input name="to" value="Semua"><button>kirim POST</button>
</form>
</body>
</html>
2. Sisi Server
Apapun metode HTTP yabg dipakai (get atau post), server mendapatkan string yang akan di order untuk mendapatkan data list sebagai key atau nilai pasangan. Cara mengakses list/daftar tergantung pada platform pengembangan yang digunakan.
B. Elemen form html
Form HTML dipakai untuk menentukan pelbagai macam inputan yang disediakan. Data bisa diinputkan dalam bentuk input teks , pilihan radio button, check box dan lain sebagainya. Bentuk inputan tersebut dikemas elemen dalam tag-tag form. Berikut yakni elemen-elemen yang disediakan oleh html
| Tag | Deskripsi | Format umum tag |
|---|---|---|
| <form> | Mendefinisikan untuk form bagi user | <form>.....</form> |
| <input> | Mendefinisikankontrol input pada form | <form><input type="submit" value="Submit"> </form> |
| <textare a> | Mendefinisikankontrol input berupa area teks pada form | <textarea rows="4" cols="50"> teks yang akanditampilkan</textarea> |
| <label> | Mendefinisikanlabel pada tag elemen <input> | <form action="demo_form.asp"> <label for="buku">Buku</label> <input type="radio" name="barang" id="buku" value="buku"> </form> |
| <fieldse t> | Group dengan element yang bekerjasama 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> |
| <optgrou p> | Mendefinisikangroup options yang bekerjasama satu sama lain dalam bentuk drop-down list, merupakan bab 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 pilihandalam bentuk dropdown list, merupakan bab 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 sanggup diklik | <button type="button">Klik disini!</button> |
| <datalist> | Elemen gres di html5 | <input list="browsers"> <datalist id="browsers"> <option value="InternetExplorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> |
| <keygen> | Elemen gres di html5 | <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="ab"> </output> </form> |
Elemen Form Button
Format umum penulisan input button pada tag <form> yakni sebagai berikut :
< button type=button>
< button type=button name=name>
< button type=button value=value>
Berikut teladan listing programnya
<!doctype html>
<html>
<body>
<button type="button" onclick="alert('hallo selamat datang')">
klik mulai !</button>
</body>
</html>
Elemen Form Input Submit
Format tag HTML-nya yakni sebagai berikut :
<input type=submit>
<input type=submit name=name>
<input type=submit value=value>
Contoh bentuk tampilannya yakni sebagai berikut :
<!doctype html>
<html>
<head>
<title>reset </title>
</head>
<body>
---- Indentitas diri ----
<form >
Nama : <input type="text" name="nama"><br>
NIM: <input type="text" name="kelas" maxlength="8"><br>
<input type="reset" value="Reset">
<input type="submit" name=”submit” value="Submit">
</form>
</body>
</html>
Format tag HTML-nya yakni sebagai berikut :
<INPUT TYPE=RESET>
Berikut yakni teladan form input yang dilengkapi tombol reset
<!doctype html>
<html>
<head>
<title>reset </title>
</head>
<body>
---- Indentitas diri ----
<form >
Nama : <input type="text" name="nama"><br>
NIM: <input type="text" name="kelas" maxlength="8"><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>
</body>
</html>