Peranan teg senarai data dalam html

Teg

datalist digunakan untuk menyediakan senarai pilihan yang dipratentukan untuk memudahkan kemasukan data dan mengelakkan ralat input. Ia mengandungi elemen pilihan yang memaparkan pilihan padanan apabila pengguna memasukkan teks dalam elemen input yang berkaitan. Faedah termasuk pengalaman input yang dipertingkatkan, input standard, input terhad dan kebolehaksesan yang dipertingkatkan. Untuk menggunakannya, tentukan atribut senarai untuk elemen input yang nilainya sepadan dengan id teg senarai data.

Peranan teg senarai data HTML

Teg senarai data HTML digunakan untuk menyediakan senarai pilihan yang dipratentukan untuk dipilih oleh pengguna dalam elemen input. Ia memudahkan kemasukan data dan membantu mengelakkan ralat kemasukan.

Cara ia berfungsi: Teg

datalist mengandungi set elemen pilihan yang mewakili pilihan yang dipratentukan. Apabila pengguna memasukkan teks dalam elemen input yang berkaitan, penyemak imbas memaparkan senarai pilihan padanan dalam senarai data. Pengguna boleh memilih item daripada senarai atau terus menaip teks mereka sendiri.

Faedah:

• Pengalaman input yang lebih baik: Menyediakan senarai pilihan yang telah direka bentuk mempercepatkan kemasukan data dan mengurangkan ralat input.
• Input Terpiawai: Pastikan data yang dimasukkan oleh pengguna mengikut format tertentu.
• Hadkan input: Halang pengguna daripada memasukkan data yang tidak sah atau tidak konsisten dengan mengehadkan senarai pilihan.
• Kebolehaksesan: Untuk pengguna peranti mudah alih atau pengguna yang mengalami kesukaran menaip menggunakan papan kekunci, senarai data boleh meningkatkan kebolehaksesan.

Penggunaan:

Untuk menggunakan senarai data, anda perlu menentukan atribut senarainya dalam elemen input yang berkaitan dan nilai atribut ini hendaklah sepadan dengan id teg senarai data.

<code class="html"><input list="options">
<datalist id="options">
  <option value="Option 1"></option>
  <option value="Option 2"></option>
  <option value="Option 3"></option>
</datalist></code>

Contoh:

Pertimbangkan contoh berikut, yang menyediakan senarai data untuk memilih negara:

<code class="html"><input list="countries">
<datalist id="countries">
  <option value="Afghanistan"></option>
  <option value="Albania"></option>
  <option value="Algeria"></option>
</datalist></code>

Apabila pengguna mula menaip dalam elemen input, penyemak imbas akan memaparkan senarai pilihan berikut:

Useree

Anda boleh memilih satu atau terus memasukkan teks anda sendiri.

Atas ialah kandungan terperinci Peranan teg senarai data dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!