Pemformatan Form Pada Sebuah Halaman Web
Wednesday, March 25, 2020
Edit
Form merupakan formulir yang dipakai sebagai mediator untuk memasukan data inputan ke server. Form pada HTML dibentuk dengan memakai elemen form. Elemen form harus membungkus seluruh elemen-elemen masukan form lain untuk memastikan masukan informasi pengguna sanggup dibaca oleh aplikasi web.
Penulisan form dilengkapi dengan atribut. Beberapa atribut yang dimiliki oleh tag <form> yaitu : 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” sanggup dituliskan sebagai berikut : <form accept="MIME_type">. MIME_type yaitu satu atau lebih jenis MIME yang sanggup diajukan / upload. Untuk memilih lebih dari satu tipe MIME, memisahkan jenis dengan koma.
2. Accept-charset
Atribut “accept-charset” merupakan atribut untuk memilih abjad tertentu yang akan dipakai untuk pengiriman formulir. Nilai default string yang diterima yaitu "UNKNOWN", hal ini mengatakan pengkodean sama dengan pengkodean dokumen yang mengandung tag elemen <form>. Format umum untuk penulisan atribut “accept-charset” yaitu <form accept-charset="character_set"> Nilai dari “character_set” , biasanya dituliskan dalam bentuk ;;
- UTF-8 yaitu abjad encoding untuk Unicode
- ISO-8859-1 yaitu abjad encoding untuk alphabet
<!DOCTYPE html>Hasilnya yaitu :
<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 dipakai untuk mengirimkan data form ketika form disubmit, atau sanggup dikatakan Aksi yang muncul ketika pengguna menekan tombol tertentu. Action memilih lokasi dari script yang akan memproses data dari form. Format umum penulisan atribut action yaitu Nilai dari URL diatas alamat kemana data dikirimkan. Penulisan alamat URL sanggup dituliskan sebagai berikut :
- URL adikara pola action="http://www.example.com/example.htm")
- URL relatif pola 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 yaitu sebagai berikut :
4. Autocomplete
Atribut autocomplete memungkinkan form sanggup memilih mempunyai autocomplete on atau off. Atribut autocomplete merupakan atribut gres di HTML5. Format penulisanya yaitu sebagai berikut :<form autocomplete="on|off">. Nilai dari atribut autocomplate :
- On merupakan nilai default. Browser akan membaca data isian form sudah lengkap menurut data isian sebelumnya. Sehingga user tidak perlu menuliskan semua data, sanggup 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 yaitu sebagai berikut :
5. Method
Atribut method yaitu atribut yang wajib dicantumkan dikala penulisan <form> alasannya yaitu atribut method merupakan metode untuk pengiriman data ke tujuan yaitu :
- Get berfungsi mengirim data ke server dengan cara meletakan data pada bab simpulan dari Url yang dituju. Metode get dipakai oleh browser untuk meminta server untuk mengirim kembali sumber daya yang diberikan
- Post yaitu metode yang datanya dikirim terpisah. Metode post meminta browser mengirimkan server untuk meminta respon yang memperhitungkan data yang tersedia dalam badan seruan HTTP
Penulisan atribut autocomplete yaitu 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 yaitu sebagai berikut :
6. Enctype
Atribut enctype merupakan atribut yang memilih bagaimana data form dikirim ke server. Atribut enctype hanya dipakai dikala form memakai method=post. Format penulisanya yaitu sebagai berikut : <form enctype="value"> Adapun nilai(value) yang sanggup diisikan kedalam atribut enctype yaitu :
| No. | Value | Description |
|---|---|---|
| 1. | application/x-www-formurlencoded | Merupakan nilai default. Semua karakter dikodekan sebelum dikirimkan. Spasi dikodekan dalam simbol +, dan Istimewa karakter lainya di kodekan dalam nilai ASCII HEX |
| 2. | multipart/form-data | Tidak ada abjad yang dikodekan |
| 3. | text/plain | Spasi dikodekan dalam simbol +. Spesial abjad lainya tidak di kodekan dalam nilai ASCII HEX |
7. Atribut “name”
Atribut name merupakan atribut untuk memberi nama pada form. Atribut name dipakai untuk tumpuan elemen dalam JavaScript, atau untuk tumpuan data formulir sehabis formulir dikirimkan. Format umum penulisan atribut name yaitu sebagai berikut : <form name="text">. Dimana nilai dari atribut name berupa text.
8. Novalidate
Atribut “novalidate” memperintahkan bahwa data form tidak divalidasi dikala di submit. Atribut ini merupakan atribut gres 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 sanggup berjalan disemua browser. Atribut “target” memilih nama atau keyword yang mengindikasikan dimana respon dari form akan ditampilkan, misanya tab, window, atau dalam frame. Format umu dari penulisan atribut sasaran <form target="_blank|_self|_parent|_top|framename">. Catatan : sasaran 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 menciptakan tampilan dari sebuah form menjadi lebih tertata dengan rapi, umumnya dipakai elemen HTML <table> untuk memformat form tersebut. Secara umum layout dari form yaitu layout horizontal, yakni layout dimana setiap input ditempatkan di samping dari label keterangan masing- masing input tersebut.
Berikut ini yaitu pola dari penggunaan elemen <table> untuk memformat tampilan form secara horizontal :
Berikut ini yaitu pola 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 yaitu 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 mendapatkan 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 dipakai pada aplikasi mobile, layout yang diterapkan yaitu layout secara vertikal, sesuai dengan karakteristik layar yang tidak terlalu besar.
Berikut ini yaitu pola 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 yaitu sebagai berikut :