#70 Membuat input autocomplete html
Dalam dunia web development, autocomplete adalah salah satu fitur yang penting untuk memberikan pengalaman yang lebih baik bagi pengguna saat mengisi formulir. Dalam tutorial ini, kita akan membahas cara membuat input autocomplete dengan HTML.
Apa itu Autocomplete?
Autocomplete adalah fitur pada sebuah input form yang membantu pengguna untuk menyelesaikan input dengan cepat dan mudah.
Saat pengguna mulai mengetik di dalam sebuah input, autocomplete akan memberikan saran atau opsi yang relevan berdasarkan input yang telah dimasukkan sebelumnya.
Menggunakan Attribute autocomplete pada HTML
Cara termudah untuk menambahkan fitur autocomplete pada sebuah input adalah dengan menggunakan attribute autocomplete pada tag input
<input type="text" name="nama" autocomplete="on">Code language: HTML, XML (xml)Dalam contoh di atas, autocomplete=”on” digunakan untuk mengaktifkan fitur autocomplete pada input tersebut.
Baca juga : atribut selain autocomplete untuk membuat form
Namun, kita juga dapat menentukan nilai yang berbeda untuk attribute autocomplete, seperti off untuk menonaktifkan fitur autocomplete.
Sumber nilai yang umumnya direkomendasikan tergantung pada jenis browser yang digunakan.
Nilai tersebut biasanya diambil dari nilai sebelumnya yang telah dimasukkan oleh pengguna, namun kadang-kadang juga dapat berasal dari nilai yang telah dikonfigurasi sebelumnya.
Sebagai contoh, beberapa browser memperbolehkan pengguna untuk menyimpan informasi seperti nama, alamat, nomor telepon, dan alamat email mereka untuk tujuan otomatisasi pengisian formulir.
Beberapa browser juga dapat menyimpan informasi kartu kredit secara terenkripsi untuk otomatisasi proses otentikasi.
Membuat Data Autocomplete dengan Datalist
Kita juga dapat membuat data autocomplete yang spesifik dengan menggunakan tag datalist pada HTML.
Tag ini akan menampilkan opsi yang telah kita definisikan dalam tag option ketika pengguna mulai mengetik di dalam input.
<label for="buah">Pilih buah favorit Anda:</label>
<input type="text" id="buah" name="buah" list="list-buah">
<datalist id="list-buah">
<option value="pisang"></option>
<option value="durian"></option>
<option value="apel"></option>
<option value="jeruk"></option>
<option value="mangga"></option>
<option value="anggur"></option>
</datalist>Code language: HTML, XML (xml)Dalam contoh di atas, ketika pengguna mulai mengetik di dalam input dengan id buah, maka opsi yang telah kita definisikan dalam tag option akan ditampilkan.
Baca juga : Membuat menu pilihan dengan tag select html
Contoh Penggunaan autocomplet html
<!DOCTYPE html>
<html>
<head>
<title> autocomplete pada html </title>
</head>
<body>
<form>
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama"><br><br>
<label for="buah">Pilih buah favorit Anda:</label>
<input type="text" id="buah" name="buah" list="list-buah">
<datalist id="list-buah">
<option value="pisang"></option>
<option value="durian"></option>
<option value="apel"></option>
<option value="jeruk"></option>
<option value="mangga"></option>
<option value="anggur"></option>
</datalist>
<br><br>
<input type="submit" value="Kirim">
</form>
</body>
</html>Code language: HTML, XML (xml)kode diatas menampilkan sebuah form dengan dua input fields: “Nama” dan “Pilih buah favorit Anda”.
Input field kedua diatur agar bisa otomatis mengisi pilihan dengan menampilkan sebuah dropdown menu yang berisi beberapa pilihan buah, dengan menggunakan elemen <datalist> .
Saat pengguna mengetikkan teks ke dalam input field tersebut, daftar pilihan akan menyaring item yang cocok dengan teks yang telah dimasukkan.
dan ada tombol “Kirim” untuk mengirimkan data yang telah diisi oleh pengguna ke server melalui elemen dengan tipe “submit”.
Kesimpulan
Dalam tutorial ini, kita telah membahas cara membuat input autocomplete dengan HTML. Kita dapat menggunakan attribute autocomplete pada tag input untuk menambahkan fitur autocomplete, menggunakan tag datalist untuk membuat data autocomplete yang spesifik.
Fitur autocomplete sangat penting untuk memberikan pengalaman yang lebih baik bagi pengguna dalam mengisi formulir pada sebuah website.
Dengan menambahkan fitur autocomplete pada input form, pengguna dapat menyelesaikan input dengan cepat dan mudah, serta menghindari kesalahan pengetikan.
Sebagai seorang web developer, penting untuk mempertimbangkan pengguna dalam setiap fitur yang kita buat. Dengan menambahkan fitur autocomplete pada website, kita dapat meningkatkan kenyamanan dan kemudahan penggunaan website kita.
FAQ
1. Apa itu fitur autocomplete?
Jawaban: Fitur autocomplete adalah fitur pada sebuah input form yang membantu pengguna untuk menyelesaikan input dengan cepat dan mudah. Saat pengguna mulai mengetik di dalam sebuah input, autocomplete akan memberikan saran atau opsi yang relevan berdasarkan input yang telah dimasukkan sebelumnya.
2. Bagaimana cara menambahkan fitur autocomplete pada sebuah input form?
Jawaban: Cara termudah untuk menambahkan fitur autocomplete pada sebuah input adalah dengan menggunakan attribute autocomplete pada tag input. Kita juga dapat menentukan nilai yang berbeda untuk attribute autocomplete, seperti off untuk menonaktifkan fitur autocomplete.
3. Apa itu tag datalist pada HTML?
Jawaban: Tag datalist pada HTML digunakan untuk membuat data autocomplete yang spesifik. Tag ini akan menampilkan opsi yang telah kita definisikan dalam tag option ketika pengguna mulai mengetik di dalam input.
4. Apa manfaat dari fitur autocomplete pada sebuah website?
Jawaban: Dengan menambahkan fitur autocomplete pada input form, pengguna dapat menyelesaikan input dengan cepat dan mudah, serta menghindari kesalahan pengetikan. Hal ini dapat meningkatkan kenyamanan dan kemudahan penggunaan website kita.
5. Apa pentingnya mempertimbangkan pengguna dalam setiap fitur yang dibuat pada website?
Jawaban: Sebagai seorang web developer, penting untuk mempertimbangkan pengguna dalam setiap fitur yang kita buat. Dengan memperhatikan kebutuhan pengguna dan menambahkan fitur-fitur yang berguna seperti autocomplete, kita dapat meningkatkan kenyamanan dan kemudahan penggunaan website kita.