Mengatur urutan pengisian form

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 :

mengatur urutan proses input

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 :

contoh form rumit

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 :

urutan pengisian form

Hal seperti diatas akan sedikit mengurangi kemudahan pengisian data karena urutan pengisian kurang sesuai. Bagaimana agar urutan pengisian bisa diatur sehingga menghasilkan seperti ini :

urutan pengisian form

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>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</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

** Bebas disunting dengan menyebutkan sumber **

Komentar

Halaman Lainya

  • Perbedaan id dan name dalam html
    Dua atribut HTML ini (id dan name) mungkin sedikit bikin bingung karena kurang mengetahui fungsinya. Masing-masing sering digunakan, kadang id dan name digunakan terpisah dan sering pula digunakan bersamaan. Apa Perbedaan id dan name dalam html dan kapan menggunakan id dan kapan menggunakan name?
  • Cara memasukkan file flash ke halaman website
    Berikut ini tutorial tentang memasukkan file animasi flash ke dalam halaman website atau blog dengan perintah html. Flash adalah salah satu jenis hasil karya multimedia yang dapat digunakan untuk menampilkan animasi berbentuk gambar, tulisan, video, dan suara dengan kualitas yang cukup baik.
  • Membuat tulisan berjalan dengan HTML
    Panduan lengkap dan mudah cara membuat animasi tulisan berjalan dengan HTML
  • Membuat tabel dengan HTML
    Tabel adalah salah satu objek terpenting yang bisa kita gunakan untuk banyak keperluan. Tabel bisa digunakan untuk membuat laporan dengan HTML, bisa digunakan untuk menyusun objek lain seperti gambar atau tulisan, bahkan tabel juga bisa digunakan untuk menata layout tampilan web. Bagi anda yang sedang belajar bahasa pemrograman web seperti PHP atau yang lainya, tabel ini juga bagian terpenting yang harus anda ketahui karena bentuk laporan dari database tentunya akan disajikan dalam bentuk tabel. Bagaimana cara membuat tabel yang benar? dan bagaimana contohnya?
  • Pengertian istilah TAG, ATRIBUT dan VALUE dalam HTML
    Mungkin istilah TAG, ATRIBUT dan VALUE dalam HTML agak terlupakan, karena kebanyakan teman-teman yang sedang belajar membuat web sekarang lebih dimanjakan oleh editor web visual yang sangat praktis dan instan. Berikut ini saya coba mengingatkan kembali tentang 3 istilah dasar tersebut agar pemahaman serta penggunaan HTML lebih mudah.

Kiriman terbaru