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:
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: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: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:Hasilnya:
Bagaimana mudah kan? Anda hanya perlu mempercantik tampilannya dengan CSS. Selamat mencoba.
0 komentar:
Posting Komentar