XHTML (Web Standards) - Aturan membuat Forms dan bagaimana membuat Forms yang sesuai prinsip Web Standards

Artikel XHTML (Web Standards)

• Home
  • » XHTML (Web Standards)
    • » Aturan membuat Forms dan bagaimana membuat Forms yang sesuai prinsip Web Standards

Aturan membuat Forms dan bagaimana membuat Forms yang sesuai prinsip Web Standards

Ditulis oleh Dhimas Ronggobramantyo
Kategori: XHTML (Web Standards)
Dibaca 5126 kali

Langsung lihat komentar

Forms merupakan bagian terpenting dalam website, hampir semua website yang ada saat ini memiliki forms, entah itu hanya form sederhana untuk melakukan pencarian ataupu forms kompleks untuk pendaftaran anggota. Tetapi kadang kita meremehkan form, disini saya akan mengajarkan cara membuat form yang baik dan benar.

Yang terpenting adalah bagaimana kita memberitahu pengunjung apa maksud dari suatu form, dan apa yang harus diisi untuk tiap-tiap field. Untuk itu kita perlu menyusun suatu form yang baik dan benar agar pengunjung website tidak kesulitan. Kenapa kita perlu melakukan ini? Karena kita tidak tahu bagaimana pengunjung melihat website kita, dengan komputer, dengan WebTV atau mungkin mengakses web kita melalui handphone. Karena itu kita perlu membuat Form yang mudah diakses oleh media apa saja.

Informasi disebelah kanan field = Salah

Coba anda perhatikan form berikut ini:

Menurut anda dimana kesalahannya? ya, informasi seharusnya berada disebelah kiri field bukan disebelah kanannya. Mungkin jika anda mengaksesnya melalui komputer terlihat tidak ada masalah. Tetapi seperti inilah hasilnya ketika anda mengaksesnya melaui handphone.

Anda bingung tidak jika melihat form seperti itu? Kenapa bisa seperti itu? Karena lebar layar handphone yang terbatas sehingga jika ada teks panjang maka informasinya akan turun kebawahnya. Jadi yang benar seharusnya seperti ini:

Nah, form seperti itu jelas jauh lebih baik. Tetapi untuk suatu kasus, informasi dikanan akan lebih baik yaitu jika anda menggunakan radiobutton atau checkbox. Seperti contoh berikut ini:

Gunakan title untuk memberikan informasi

Jika anda ingin memberikan informasi tambahan untuk field, maka anda dapat menggunakan atribut title dan isilah dengan informasi yang diinginkan. Seperti inilah kodenya:

<form method="get" action="">

Nama Anda: <input type="text" name="nama" size="30" title="Isilah dengan nama 
anda" /><br />

Alamat Anda: <input type="text" name="alamat" size="30" title="Isilah dengan 
alamat anda" /><br />

</form>

Hasilnya seperti ini.

Jika anda perhatikan hasilnya, maka ketika mouse anda lewatkan keatas field maka akan muncul teks yang berisi title pada field tersebut.

Wajib menggunakan label

Apa sih gunanya <label>? Kalau diibaratkan, maka <label> akan memberitahu browser bahwa ada form disitu dan ada field yang harus diisi dengan nama, jadi jangan sampai isinya salah. Ya <label> berguna agar browser mengerti bahwa suatu teks mengacu pada suatu field. Silahkan coba contoh berikut ini:

<form method="get" action="">

<label for="formnama">Nama Anda:</label> <input type="text" name="nama" 
size="30" title="Isilah dengan nama anda" id="formnama"/><br />

<label for="formalamat">Alamat Anda:</label> <input type="text" name="alamat" 
size="30" title="Isilah dengan alamat anda" id="formalamat"/><br />

<input type="checkbox" name="masak" id="formmasak" /> <label for="formmasak">Memasak</label><br 
/>

<input type="checkbox" name="mancing" id="formmancing"/> <label for="formmancing">Memancing</label><br 
/>

</form>

Hasilnya seperti ini.

Jika anda perhatikan kode diatas, pada teks "Nama Anda:" diapit oleh <label>. Dan pada <label> tersebut ada atribut for, nah isi dari atribut for mengacu pada field yang dituju, jika anda perhatikan pada field disampingnya ada atribut id yang sama dengan for. Ini berarti bahwa teks "Nama Anda:" mengacu pada field yang id nya formnama.

Semua browser memungkinkan <label> untuk diklik dan pointer akan otomatis menuju ke tujuan <label>. Jadi jika anda coba klik teks "Nama Anda:" maka pointer akan menuju ke field disebelahnya. Jika anda perhatikan untuk checkboxnya, anda dapat mengklik textnya saja maka checkboxnya akan terisi. Ini tentu saja akan memudahkan pengunjung website anda.

Kelompokkan field-field anda

Jika form anda memiliki banyak field, maka anda perlu mengelompokkannya agar terlihat lebih teratur. Bagaimana caranya? anda tidak perlu menggunakan <table> atau lainnya, gunakan saja <fieldset>. Silahkan coba contoh berikut ini:

<form method="get" action="">

<fieldset>

<legend>Informasi Anda</legend>

<label for="formnama">Nama Anda:</label> <input type="text" name="nama" 
size="30" title="Isilah dengan nama anda" id="formnama"/><br />

<label for="formalamat">Alamat Anda:</label> <input type="text" name="alamat" 
size="30" title="Isilah dengan alamat anda" id="formalamat"/><br />

</fieldset>

<fieldset>

<legend>Hobi Anda</legend>

<input type="checkbox" name="masak" id="formmasak" /> <label for="formmasak">Memasak</label><br 
/>

<input type="checkbox" name="mancing" id="formmancing"/> <label for="formmancing">Memancing</label><br 
/>

</fieldset>

</form>

Hasilnya:

Bagaimana mudah kan? Anda hanya perlu mempercantik tampilannya dengan CSS. Selamat mencoba.

Simpan artikel ini ke:

Komentar [15]

Kirim Komentar: