flas script


Aturan membuat Forms yang sesuai prinsip Web Standards

Forms merupakan bagian terpenting dalam website, hampir semua website yang ada saat ini memiliki forms, entah itu hanya form sederhana untuk melakukan pencarian ataupun forms kompleks untuk pendaftaran anggota. Tetapi kadang kita meremehkan form, disini saya akan membagikan bagaimana caranya 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:

Isilah dengan nama anda
Isilah dengan alamat anda

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:

Nama Anda:
Alamat Anda:

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:
Memasak
Memancing
Berenang

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:


KODE PROGRAM
<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.

Nama Anda:
Alamat Anda:
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:


KODE PROGRAM
<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:
KODE PROGRAM
<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 mudahkan? Selamat mencoba dan semoga bermanfaat...!!!

Tentang Website :

Kembali ke Site Map / Daftar Isi di Blog Ini, Klik Di Sini !

Diberdayakan oleh Blogger.
Twitter Delicious Facebook Digg Stumbleupon Favorites More