http://www.zainalhakim.web.id/posting/mengatur-urutan-pengisian-form.html
http://www.zainalhakim.web.id/posting/mengatur-format-tabel-dengan-css.html
http://www.zainalhakim.web.id/posting/mengatur-format-tabel-dengan-css.html
Sebagian orang mengabaikan urutan
pengisian form karena proses input data masih bisa dibantu dengan adanya mouse,
sehingga bisa dengan leluasa berpindah dari isian satu ke lainya. Tapi sebagian
orang yang terbiasa hanya menggunakan keyboard, tentunya lebih memilih
menggunakan tombol tab untuk berpindah dari inputan satu ke lainya.
Untuk form yang sederhana tentunya
tidak akan bermasalah karena urutan posisi pengisian form akan otomatis bisa
dipindah dengan tombol keyboard tab dari objek input yang paling atas ke objek
input dibawahnya. Lihat form berikut :
Jika pertama kali kursor keyboard
sudah berada pada posisi nomor 1, maka untuk berpindah ke inputan berikutnya
anda bisa menekan tab, sampai pada tombol simpan. Untuk kasus seperti diatas
mungkin form masih bisa ditampilkan secara penuh satu halaman tanpa ada scroll
kebawah sehingga masih memungkinkan diisi secara vertikal.
Untuk beberapa kasus yang melibatkan
inputan yang banyak tentunya akan sedikit bermasalah jika kita rancang secara
vertical ke bawah, sehingga harus disajikan secara horizontal ke kanan agar
proses input lebih mudah. Lihat contoh form berikut :
Jika anda buat form menurun, pasti
akan membutuhkan scroll yang agak panjang ke bawah. Akan tetapi dengan
rancangan form seperti itu akan muncul masalah baru yaitu : urutan tab
perpindahan isian dimulai dari kiri, ke kanan, ke kiri bawah, ke kanan sampai
ke inputan paling akhir dibawah. Lihat ilustrasi gambar berikut :
Hal seperti diatas akan sedikit
mengurangi kemudahan pengisian data karena urutan pengisian kurang sesuai.
Bagaimana agar urutan pengisian bisa diatur sehingga menghasilkan seperti ini :
Caranya anda bisa tambahkan/atur
urutan dengan atribut tabindex=urutan. Lihat contoh kode berikut :
<form
id="FDaftar" name="FDaftar" method="post"
action="">
<table width="580"
border="0" align="center" cellpadding="3"
cellspacing="0">
<tr>
<td height="46"
colspan="6" align="center"><h3>DATA
MAHASISWA</h3></td>
</tr>
<tr>
<td
width="136">NIM</td>
<td
width="4">:</td>
<td width="160"><input
name="NIM" type="text" id="NIM"
tabindex="1" size="10" maxlength="10"
/></td>
<td
width="88">ALAMAT</td>
<td
width="4">:</td>
<td width="152"><input
name="ALAMAT" type="text" id="ALAMAT"
size="25" /></td>
</tr>
<tr>
<td>NAMA</td>
<td>:</td>
<td><input name="NAMA"
type="text" id="NAMA" tabindex="2"
size="25" /></td>
<td>KOTA</td>
<td>:</td>
<td><input name="KOTA"
type="text" id="KOTA" size="25" /></td>
</tr>
<tr>
<td>TEMPAT LAHIR</td>
<td>:</td>
<td><input
name="TMPLAHIR" type="text" id="TMPLAHIR"
tabindex="3" size="25" /></td>
<td>TELP.</td>
<td>:</td>
<td><input name="TELP"
type="text" id="TELP" size="25" /></td>
</tr>
<tr>
<td>TANGGAL LAHIR</td>
<td>:</td>
<td><input
name="TGLLAHIR" type="text" id="TGLLAHIR"
tabindex="4" size="25" /></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="50"
colspan="6" align="center"><input type="button"
name="btnsubmit" id="button" value="Simpan" />
<input type="reset"
name="btnreset" id="button2" value="Ulangi"
/></td>
</tr>
</table>
</form>
<script
language="javascript">
document.FDaftar.NIM.select();
document.FDaftar.NIM.focus();
</script>
Setiap objek form, anda sisipkan
atribut tabindex. Contoh NIM diberi tabindex="1" yang artinya akan
berada pada urutan pertama pengisian, kemudian NAMA diberi
tabindex="2" berarti jika anda tekan tombol tab maka dari NIM
berpindah ke NAMA dst.
Di bagian bawah form, bisa kita
tambahkan script singkat javascript untuk mengatur posisi pada
tabindex="1" pada saat halaman form ditampilkan.
Lihat demonya : Demo Membuat form dengan atribut tabindex
Semoga bermanfaat
Zainal Hakim
- See more at:
http://www.zainalhakim.web.id/posting/mengatur-urutan-pengisian-form.html#sthash.9CQUvBgu.dpuf
0 Response to "mengatur urutan pengisian form"
Post a Comment