Cara Membuat Input Auto Fokus pada HTML

Jika kalian adalah tipe orang seperti saya yang lebih sering menggunakan keyboard layaknya keyboard ninya dan seminim mungkin menggunakan mouse, sungguh rasanya berbeda ketika mengunjungi website yang menyediakan form login dengan secara otomatis cursor terfokus pada field input pertama seperti username atau email.

Kalian pasti pernah mengunjungi halaman login Gmail kan? Ketika kalian berada dihalaman login gmail seharusnya kalian tidak perlu lagi mengklik field input email yang ada karena secara otomatis kursor akan langsung terfokus pada kolom input email tersebut.

Trik ini adalah sesuatu yang sederhana namun cukup efektif untuk menambah kesan positif dari pengalaman pengguna / user experience dimana pengguna akan merasa dimudahkan saat mengunjungi dan melakukan aktivitas login pada website kalian.

Yang menjadi pertanyaan adalah bagaimana cara membuat kursor berada di input secara otomatis? Sebenarnya ini sangat mudah jika kalian bisa melakukan dua hal berikut.

  1. Mengerti dan menguasai HTMLdan Javascript dengan baik.
  2. Memiliki akses ke source code website kalian

Jika kalian tidak mengerti akan dua hal diatas maka saya sarankan kalian untuk mengambil paket kursus Web Master Ultimate di dumetschool

Yang perlu kalian lakukan adalah menambahkan javascript berikut pada halaman yang ingin kalian lakukan.

        <script type="text/javascript">document.formID.inputID.focus();</script>

 

 

 

NOTE: javascript diatas harus tepat diletakan dibawah form yang ada.

 

Kalian bias menggunakan struktur form seperti berikut

<form action="" method="get" id="formID">
<input name="username" id="inputID" type="text" />
</form>

 

 

Pada struktur form diatas memiliki ketentuan id dari form dan dari field harus sama dengan yang ada di javascript

 

Cara lain untuk meletakan kursor di field secara otomatis adalah seperti berikut

<script type="text/javascript">
function SetFocus () {
var input = document.getElementById ("theFieldID");
input.focus ();
}
 </script>

 

Atau mungkin kalian ingin yang lebih sederhana, sebenarnya untuk sekarang ini kalian bias menggunakan atribut autofocus pada kolom inputan kalian.

Contohnya seperti ini:

 <input name="username" id="inputID" type="text" autofocus />

Oke teman-teman, saya rasa cara terakhir adalah cara paling sederhana dan sangat mudah dilakukan bagi kalian yang sedang belajar HTML. Demikian artikel kali ini yang membahas tentang cara membuat input autofocus pada html. Semoga bermanfaat

12 Maret 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat