Form merupakan formulir yang digunakan sebagai perantara untuk memasukan data inputan ke server. Form pada HTML dibuat dengan menggunakan elemen form. Elemen form harus membungkus seluruh elemen-elemen masukan form lain untuk memastikan masukan informasi pengguna dapat dibaca oleh aplikasi web.
Penulisan form dilengkapi dengan atribut. Beberapa atribut yang dimiliki oleh tag <form> adalah : Accept, Accept-charset, Action, Autocomplete, Enctype, Method, Name, Novalidate, dan Target.
1. Accept
Atribut “accept” mendefinisikan MIME yang di izinkan oleh server yang memuat script untuk memproses form. Atribut “accept” tidak support pada penerapan HTML5. Penulisan atribut “accept” dapat dituliskan sebagai berikut : <form accept="MIME_type">. MIME_type adalah satu atau lebih jenis MIME yang dapat diajukan / upload. Untuk menentukan lebih dari satu tipe MIME, memisahkan jenis dengan koma.
2. Accept-charset
Atribut “accept-charset” merupakan atribut untuk menentukan karakter tertentu yang akan digunakan untuk pengiriman formulir. Nilai default string yang diterima adalah "UNKNOWN", hal ini menunjukkan pengkodean sama dengan pengkodean dokumen yang mengandung tag elemen <form>. Format umum untuk penulisan atribut “accept-charset” adalah <form accept-charset="character_set"> Nilai dari “character_set” , biasanya dituliskan dalam bentuk ;;
- UTF-8 adalah karakter encoding untuk Unicode
- ISO-8859-1 adalah karakter encoding untuk alphabet
<!DOCTYPE html>Hasilnya adalah :
<html>
<head>
<title>atribut form</title>
</head>
<body>
<form action="demo_form.asp" accept-charset="ISO-8859-1">
Nama : <input type="text" name="nama"><br>
Sekolah: <input type="text" name="sekolah"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
3. Action
Atribut action digunakan untuk mengirimkan data form ketika form disubmit, atau dapat dikatakan Aksi yang muncul ketika pengguna menekan tombol tertentu. Action menentukan lokasi dari script yang akan memproses data dari form. Format umum penulisan atribut action adalah Nilai dari URL diatas alamat kemana data dikirimkan. Penulisan alamat URL dapat dituliskan sebagai berikut :
- URL absolut contoh action="http://www.example.com/example.htm")
- URL relatif contoh action="example.htm"
<!DOCTYPE html>
<html>
<head>
<title>atribut form</title>
</head>
<body>
<form action="demo_form.asp" accept-charset="ISO-8859-1">
Nama : <input type="text" name="nama"><br>
Sekolah: <input type="text" name="sekolah"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Tampilan adalah sebagai berikut :
4. Autocomplete
Atribut autocomplete memungkinkan form dapat menentukan memiliki autocomplete on atau off. Atribut autocomplete merupakan atribut baru di HTML5. Format penulisanya adalah sebagai berikut :<form autocomplete="on|off">. Nilai dari atribut autocomplate :
- On merupakan nilai default. Browser akan membaca data isian form sudah lengkap berdasarkan data isian sebelumnya. Sehingga user tidak perlu menuliskan semua data, bisa dibantu dengan atribut autocomplete untuk meneruskan data yang akan ditulis.
- Off browser tidak secara otomatis membaca data isian form dari data sebelumnya, sehingga user harus menuliskan data secara lengkap pada tiap field form setiap kali user akan mengisikan data.
<!DOCTYPE html>
<html>
<head>
<title>atribut form</title>
</head>
<body>
<form action="demo_form.asp" method="get"
autocomplete="on">
Nama:<input type="text" name="nama"><br>
Alamat: <input type="alamat" name="alamat"><br>
<input type="submit">
</form>
</body>
</html>
Tampilannya adalah sebagai berikut :
5. Method
Atribut method adalah atribut yang wajib dicantumkan saat penulisan <form> karena atribut method merupakan metode untuk pengiriman data ke tujuan yaitu :
- Get berfungsi mengirim data ke server dengan cara meletakan data pada bagian akhir dari Url yang dituju. Metode get digunakan oleh browser untuk meminta server untuk mengirim kembali sumber daya yang diberikan
- Post adalah metode yang datanya dikirim terpisah. Metode post meminta browser mengirimkan server untuk meminta respon yang memperhitungkan data yang tersedia dalam tubuh permintaan HTTP
Penulisan atribut autocomplete adalah sebagai berikut
<!DOCTYPE html>
<html>
<head>
<title>atribut form</title>
</head>
<body>
<form action="demo_form.asp" method="get" autocomplete="on">
Nama:<input type="text" name="nama"><br>
Alamat: <input type="alamat" name="alamat"><br>
<input type="submit">
</form>
</body>
</html>
Tampilan adalah sebagai berikut :
6. Enctype
Atribut enctype merupakan atribut yang menentukan bagaimana data form dikirim ke server. Atribut enctype hanya digunakan saat form menggunakan method=post. Format penulisanya adalah sebagai berikut : <form enctype="value"> Adapun nilai(value) yang dapat diisikan kedalam atribut enctype adalah :
| No. | Value | Description |
|---|---|---|
| 1. | application/x-www-formurlencoded | Merupakan nilai default. Semua karakter dikodekan sebelum dikirimkan. Spasi dikodekan dalam simbol +, dan spesial karakter lainya di kodekan dalam nilai ASCII HEX |
| 2. | multipart/form-data | Tidak ada karakter yang dikodekan |
| 3. | text/plain | Spasi dikodekan dalam simbol +. Spesial karakter lainya tidak di kodekan dalam nilai ASCII HEX |
7. Atribut “name”
Atribut name merupakan atribut untuk memberi nama pada form. Atribut name digunakan untuk referensi elemen dalam JavaScript, atau untuk referensi data formulir setelah formulir dikirimkan. Format umum penulisan atribut name adalah sebagai berikut : <form name="text">. Dimana nilai dari atribut name berupa text.
8. Novalidate
Atribut “novalidate” memperintahkan bahwa data form tidak divalidasi saat di submit. Atribut ini merupakan atribut baru pada HTML5 dan hanya berjalan di browser Internet Explorer 10, Firefox, Opera, dan Chrome. Atribut “novalidate” tidak support ketika dijalankan pada browser Internet Explorer versi 9 ke bawah dan safari. Format penulisan secara umum <form novalidate>.
Atribut “target” merupakan atribut yang dapat berjalan disemua browser. Atribut “target” menentukan nama atau keyword yang mengindikasikan dimana respon dari form akan ditampilkan, misanya tab, window, atau dalam frame. Format umu dari penulisan atribut target <form target="_blank|_self|_parent|_top|framename">. Catatan : target window name diisikan berupa :
| No. | Value | Description |
|---|---|---|
| 1. | _blank | Respon ditampilkan dalam new window or tab |
| 2. | _self | Respon ditampilkan dalam frame yang sama (default) |
| 3. | _parent | Respon ditampilkan dalam parent frame |
| 4. | _top | Respon ditampilkan dalam window full body |
| 5. | framename | Respon ditampilkan dalam iframe |
Format Formulir Secara Horisontal
Untuk membuat tampilan dari sebuah form menjadi lebih tertata dengan rapi, umumnya digunakan elemen HTML <table> untuk memformat form tersebut. Secara umum layout dari form adalah layout horizontal, yakni layout dimana setiap input ditempatkan di samping dari label keterangan masing- masing input tersebut.
Berikut ini adalah contoh dari penggunaan elemen <table> untuk memformat tampilan form secara horizontal :
Berikut ini adalah contoh dari penggunaan elemen <table> untuk memformat tampilan form secara horizontal :
<html>
<head><title>CONTOH TAG FORM</title></head>
<body>
<form method="Post">
<table border=0 width="75%">
<tr><td width="25%">NPM</td><td><INPUT TYPE="TEXT" Name="NPM" MAXLENGTH="10" SIZE="11"></td></tr>
<tr><td width="25%">Nama Mahasiswa</td>
<td><INPUT TYPE="TEXT" Name="NamaMHS" MAXLENGTH="25" SIZE="25"></td></tr>
<tr><td width="25%">Alamat</td><td><INPUT TYPE="TEXT" Name="Alamat" MAXLENGTH="50" SIZE="40"></td></tr>
<tr><td width="25%">Jenis Kelamin</td><td><INPUT TYPE="RADIO" Name="Jenkel" CHECKED VALUE="Laki2">Laki-laki
<INPUT TYPE="RADIO" Name="Jenkel" VALUE="Perempuan">Perempuan</td></tr>
<tr><td width="25%">Jurusan</td><td><SELECT Name="Jurusan"><OPTION VALUE="KA">Komputer Akuntansi<OPTION VALUE="MI">Manajemen Informatika<OPTION VALUE="TK">Teknik Komputer</SELECT></td></tr>
<tr><td width="25%">Fasilitas</td><td><INPUT TYPE="CHECKBOX">Flash Disk</td></tr>
<tr><td></td><td><INPUT TYPE="CHECKBOX">Bakal Baju</td></tr>
<tr><td></td><td><INPUT TYPE="CHECKBOX">Bakal Jas</td></tr>
<td></td><td><INPUT TYPE="SUBMIT" VALUE="Simpan"><INPUT TYPE="RESET" VALUE="Batal"></td></tr>
</table>
</form>
</body>
</html>
Dan berikut ini adalah tampilan dari form yang telah di tulis di atas :
Format Formulir Secara Vertikal
Sejalan dengan perkembangan teknologi mobile, halaman web yang berbasis mobile tentunya sebuah halaman web di dalam perangkat mobile akan memerlukan form di dalam menerima input dari pengguna. Untuk menyesuaikan dengan lebar layar dari perangkat mobile, misalkan handphone ataupun ipad, maka layout dari sebuah halaman web harus disesuaikan, termasuk juga untuk layout dari sebuah form. Umumnya apabila sebuah form akan digunakan pada aplikasi mobile, layout yang diterapkan adalah layout secara vertikal, sesuai dengan karakteristik layar yang tidak terlalu besar.
Berikut ini adalah contoh dari sebuah form dengan layout vertikal.
<!DOCTYPE html>
<html>
<head>
<title>cek form </title>
</head>
<body>
<FORM METHOD="POST" ACTION="mailto:teknisi@jardiknas.org">
<H4>FORM DATA SISWA</H4>
<INPUT TYPE="text" NAME="var1" SIZE="30" VALUE="Masukan nama."><BR><BR>
<B>Apakah Anda Siswa?</B><INPUT TYPE="checkbox" NAME="var2"><BR><BR>
<B>Berapa umur Anda?</B><BR>
<INPUT TYPE="radio" NAME="var3" VALUE="r1">10 - 15<BR>
<INPUT TYPE="radio" NAME="var3" VALUE="r2">16 - 20<BR>
<INPUT TYPE="radio" NAME="var3" VALUE="r3">21 - 25<BR><BR>
<INPUT TYPE="submit" NAME="var4" VALUE="Kirim"><INPUT TYPE="reset" NAME="var5" VALUE="Hapus">
</form
</body>
</html>
Dan hasil dari halaman form yang telah ditulis di atas adalah sebagai berikut :