Menyajikan Hasil Pemformatan Form pada Sebuah Halaman Web

1)  Format umum formulir
<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.
Setiap elemen form dalam suatu halaman web harus memiliki atribut name, yang digunakan sebagai pengenal dari nama elemen tersebut. Setiap data yang dimasukkan ke dalam elemen form, akan dikirimkan kepada server.
Browser web akan mengirimkan data dari form ke server dengan mengacu kepada name dari elemen. Browser akan mengambil semua data dari elemen input yang memiliki atribut name. Jika suatu input tidak memiliki name, maka data yang ada dalam elemen input tersebut tidak dikirimkan kepada server.
Tag <form> digunakan untuk membuat form dalam document HTML.Penulisan format umum penulisan dari form  adalah sebagai berikut :
<Form atribut=”atribut”>
……
……
……
</form>
Terlihat pada format umum formulir diatas, bahwa penulisan form dilengkapi dengan atribut. Beberapa atribut yang dimiliki oleh tag <form> adalah :
§  Accept
§  Accept-charset
§  Action
§  Autocomplete
§  Enctype
§  Method
§  Name
§  Novalidate
§  target
Dari sembilan atribut diatas, atribut “accept” tidak support pada penerapan HTML5. Pada HTML juga menyediakan atribut baru yaitu : “autocomplete” dan “novalidate”.
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 àsatu atau lebih jenisMIMEyang dapat diajukan/upload. Untukmenentukan lebih dari satutipe MIME, memisahkanjenisdengan koma.Contoh penerapan  Atribut “accept”
<!DOCTYPE html>
<html>
<head>
<title>atribut form</title>
</head>
<body>
<form action="demo_form.asp" accept="image/gif, image/jpeg">
  Nama : <input type="text" name="nama"><br>
  No.KTP: <input type="text" name="noKtp"><br>
  File KTP: <input type="file" name="pic" id="pic"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Pada listing kode diatas dituliskan <form accept="image/gif, image/jpeg"> hal ini berarti file gambar yang bisa diterima oleh server adalah gif dan jpeg.
Bila Listing kode tersebut dijalankan maka akan menghasilkan outp  ut 
Accept-charset
Atribut “accept-charset” merupakan atribut untuk menentukan karakter tertentu yang akandigunakan untukpengiriman formulir. Nilai defaultstring yang diterima adalah"UNKNOWN", hal ini menunjukkan pengkodeansama denganpengkodeandokumenyang mengandungtag 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 - à karakter encoding untuk Unicode
  • ISO-8859-1 - karakter encoding untuk alphabet
Secara teori setiappengkodean karakterdapat digunakan, tetapipada kenyataanya tidak semua browserdapat membacanya. Semakinbanyakpengkodeankarakteryang digunakan, semakin besar kesempatanbahwabrowserdapat membaca karakter tesebut.

<!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>
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
<form action="URL">
Nilai dari URL diatas alamat kemana data dikirimkan. Penulisan alamat URL dapat dituliskan sebagai berikut  :
§  URL absolut àaction="http://www.example.com/example.htm")
§  URL relatif à action="example.htm"
Penulisan atribut action adalah sebagai berikut :

<!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>
Autocomplete
Dengan 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.
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>
Bila listing kode diatas dengan atribut  autocomplete =
 Method
Atribut method adalah atribut yang wajib dicantumkan saat penulisan <form> karena atribut method merupakan metode untuk pengiriman data ke tujuan yaitu :
Get :
-       mengirim data ke server dengan cara meletakan data pada bagian akhir dari Url yang dituju
-       metode yang digunakan oleh browser untuk meminta server untuk mengirim kembali sumber daya yang diberikan
Post
-       datanya dikirim terpisah
-       metode browser mengirimkan server untuk meminta respon yang memperhitungkan data yang tersedia dalam tubuh permintaan HTTP
Format penulisanya adalah sebagai berikut :
<form method="get|post">
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>
Bila listing kode diatas dengan atribut  dijalankan maka akan method="get" 
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 anctype adalah :
Value
Description
application/x-www-form-urlencoded
Merupakan nilai default. Semua karakter dikodekan sebelum dikirimkan. Spasi dikodekan dalam simbol +, dan spesial karakter lainya di kodekan dalam nilai ASCII HEX
multipart/form-data
Tidak ada karakter yang dikodekan.
text/plain
Spasi dikodekan dalam simbol +.  Spesial karakter lainya tidak di kodekan dalam nilai ASCII HEX

Penulisan atribut enctype adalah sebagai berikut
<!DOCTYPE html>
<html>
<head>
<title>atribut form</title>
</head>
<body>

<form action="demo_post_enctype.asp"
method="post" enctype="multipart/form-data">
  Nama:<input type="text" name="nama"><br>
  Alamat: <input type="alamat" name="alamat"><br>
<input type="submit">
</form>
</body>
</html>
Bila listing kode diatas dengan atribut  dijalankan maka akan enctype="multipart/form-data"
Name
Atribut “name” merupakan atribut untuk memberi nama pada form. Atribut namedigunakanuntuk referensielemen dalamJavaScript, atauuntuk referensidata formulirsetelahformulir dikirimkan. Format umum penulisan atribut name adalah sebagai berikut :
<form name="text">
Dimana nilai dari atribut name berupa text. Berikut adalah penerapan dari atribut name
<!DOCTYPE html>
<html>
<head>
<script>
function formSubmit()
{
document.forms["myForm"].submit();
}
</script>
</head>
<body>

<form name="fromSaya" action="form_submit.asp" method="get">
Nama: <input type="text" name="nama"><br>
Alamat: <input type="text" name="alamat"><br><br>
<input type="button" onclick="formSubmit()" value="kirim data!">
</form>
</body>
</html>
Dari listing kode diatas dapat dilihat bahwa <form name="fromSaya">yang artinya form yang dibuat bernama “formSaya”.nama form = formSaya tersebut akan diberitahukan ke elemen Javascript.
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>
Berkut adalah salah satu penerapan dari atribut “novalidate”.
<!doctype html>
<html>
<head>
<title>cek form </title>
</head>
<body>
<form action="demo_form.asp" novalidate>
e-mail: <input type="email" name="user_email">
<input type="submit">
</form>
</body>
</html>
target
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
Catatan : target window name diisikan berupa:
Value
Description
_blank
Respon ditampilkan dalam new window or tab
_self
Respon ditampilkan dalam frame yang sama (default)
_parent
Respon ditampilkan dalam parent frame
_top
Respon ditampilkan dalam  window full body
framename
Respon ditampilkan dalam  iframe
Format umu dari penulisan atribut target
<form target="_blank|_self|_parent|_top|framename">
Berikut adalah listing kode atribut target menggunakan value _blank
<!DOCTYPE html>
<html>
<head>
<title>cek form </title>
</head>
<body>

<form action="demo_form.asp" method="get" target="_blank">
  Nama   : <input type="text" name="fname"><br>
  Alamat : <input type="text" name="lname"><br>
<input type="submit" value="Submit">

</form
</body>
</html>
1)     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 :
<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>
<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>

  Rangkuman

Dari kegiatan belajar menyajikan form pada halaman web dapat dibuat kesimpulan sebagai berikut :
§  <Form> merupakan formulir yang digunakan sebagai perantara  untuk memasukan data inputan ke server.
§  Browser web akan mengirimkan data dari form ke server dengan mengacu kepada name dari elemen.
§  Beberapa atribut yang dimiliki oleh tag <form> adalah :
-       Accept
-       Accept-charset
-       Action
-       Autocomplete
-       Enctype
-       Method
-       Name
-       Novalidate
-       target
Untuk mengimbangi  perkembangan teknologi mobile adakalanya form dilayout secara vertikal

Komentar

Posting Komentar

Postingan populer dari blog ini

: Jenis – Jenis Link dalam HTML

1)  Jenis-jenis Link dalam HTML Dalam HTML, link dibedakan menjadi 3 jenis, yaitu : ·       Link absolut ·       Link relatif ·       Link ke bagian dokumen tertentu HTML membedakan ketiga jenis link diatas berdasarkan lokasi atau alamat dokumen yang akan diakses. Dengan demikian, perbedaannya hanya terletak pada nilai atribut HREF-nya saja. Link Absolut Link Absolut adalah link yang akan menunjuk ke halaman dari situs web lain. Penulisan alamatnya pun harus ditulis secara lengkap. Sebagai contoh, jika tema atau isi dari situs web yang kita buat adalah pemrograman HTML, maka kita dapat membuat link ke situs web lain yang memiliki tema yang sama atau relevan. Tujuannya adalah agar pengunjung bisa memperoleh informasi lebih tentang tema tersebut yang ‘mungkin’ tidak/belum kita bahas pada situs web kita. Contoh : <a href= http://www.w3.org/ >W3</a> Pada contoh diatas, tujuan link yang dibuat akan mengarah ke situs web http://www.w3.org/
Baca selengkapnya

Biodata Atau Profil Cristiano Ronaldo CR7

Gambar
Profil Cristiano Ronaldo. Kali ini saya akan mengulas secara lengkap profil / biodata Cristiano Ronaldo , sang bintang Real madrid yang sudah mengoleksi puluhan trophy di sepanjang karirnya. Berikut ini Profil Cristiano Ronaldo: Nama Lengkap : Cristiano Ronaldo Dos Santos Aveiro Nama Beken : Cristiano Ronaldo, CR7 Tempat Lahir : Funchal, Madeira - Portugal Tanggal Lahir : 05 Februari 1985 Profesi : Selebritis, Sepak bola (atlet) Tinggi Badan : 185,5 cm Berat Badan : 69 kg Agama : Kristen Zodiak : Aquarius Kebangsaan : Portugal Hobi : Travelling, Olahraga Nama Ayah : Jose Dinis Aveiro (Pengurus kebun, Pegawai pemerintah) Nama Ibu : Maria Dolores Dos Santos Aveiro (Koki) Saudara : Hugo (kakak), Elma (kakak), Liliana Catia (kakak) Kekasih / Mantan : Daniela Martins (mantan), Merche Romero (mantan), Gemma Atkinson (mantan), Alice Goodwin (mantan), Raffaella Fico (mantan), Nereida Gallardo (mantan), Irina Shayk (mantan) Ana
Baca selengkapnya

Fungsi tata letak pada typografi

Fungsi tata letak pada typografi Fungsi tata letak menurut Freddy Adiono Basuki (2000) adalah untuk mencapai keharmonisan, nilai estetis, ekonomis, dan komunikatif. Freddy Adiono Basuki juga membagi tahapan tata letak menjadi tiga, yaitu : 1. Membuat tata letak miniature atau sketsa kecil (thumbnail), merupakan tahap perancangan dalam menentukan komposisi unsur-unsur yang akan ditempatkan. Visualisasinya masih berupa sket kolom teks dan kolom gambar. 2. Membuat tata letak kasar (abrupt lay out), merupakan tahapan rancangan yang sudah berwujud gambar dan teks. 3. Membuat tata letak komprehensif, merupakan tahapan rancangan dimana keseluruhan unsur sudah disusun dengan baik dan benar yang sudah siap cetak.
Baca selengkapnya