Bagaimana untuk membuat senarai dropdown dalam HTML?

Dalam pembangunan web, membuat senarai drop-down terutamanya menggunakan tag HTML dan . 1. Struktur Asas: Gunakan untuk membungkus Multiple untuk menentukan pilihan; 2. Pemilihan lalai: Tetapkan dengan menambah atribut yang dipilih; 3. Pilihan kumpulan: Gunakan untuk paparan klasifikasi; 4. Nota: Atribut nama tidak boleh ditinggalkan, CSS boleh digunakan untuk mencantikkan gaya, dan pelbagai atribut ditambah apabila pelbagai pilihan.

Dalam pembangunan web, membuat senarai drop-down sebenarnya agak asas, tetapi jika anda seorang pemula, anda mungkin sedikit keliru. HTML menyediakan tag yang sangat mudah untuk melaksanakan fungsi ini: <select></select> dan <option></option> boleh digunakan bersama -sama.

Struktur Asas: Gunakan tag pilih dan pilihan

Untuk membuat menu drop-down, anda perlu menggunakan tag <select></select> , dan kemudian tambahkan pelbagai <option></option> elemen di dalam, setiap pilihan adalah kandungan pilihan.

Sebagai contoh, jika anda ingin membuat kotak drop-down untuk memilih warna, anda boleh menulis seperti ini:

 <tection>
  <opsyen nilai = "merah"> merah </option>
  <opsyen nilai = "hijau"> hijau </option>
  <opsyen nilai = "biru"> biru </option>
</pilih>

Dengan cara ini pengguna dapat melihat tiga pilihan. Secara lalai, penyemak imbas memaparkan pilihan pertama sebagai nilai awal.

Tetapkan pemilihan lalai: Tambahkan atribut yang dipilih

Kadang -kadang anda mahu pilihan tertentu dipilih secara lalai, seperti "Sila pilih" atau "Beijing". Pada masa ini, anda boleh menambah atribut selected ke <option> yang sepadan.

Contohnya:

 <tection>
  <opsyen nilai = "" dipilih> Sila pilih warna </option>
  <opsyen nilai = "merah"> merah </option>
  <opsyen nilai = "hijau"> hijau </option>
</pilih>

Di sini pilihan pertama ditetapkan ke lalai, dan halaman akan memaparkan "Sila pilih Warna" apabila dimuatkan.

Nota: Jika pelbagai pilihan ditambah dengan selected , penyemak imbas hanya akan menggunakan yang pertama.

Pilihan Pengumpulan: Gunakan OptGroup untuk mengklasifikasikan

Jika anda mempunyai banyak pilihan, pertimbangkan untuk menggunakan <optgroup> untuk memaparkannya dalam kumpulan, supaya mereka kelihatan lebih jelas.

Sebagai contoh, warna boleh dikumpulkan dengan warna sejuk dan hangat:

 <tection>
  <OptGroup label = "Warna Hangat">
    <opsyen nilai = "merah"> merah </option>
    <opsyen nilai = "Orange"> Orange </option>
  </optgroup>
  <OptGroup label = "Warna sejuk">
    <opsyen nilai = "biru"> biru </option>
    <opsyen nilai = "hijau"> hijau </option>
  </optgroup>
</pilih>

Dengan cara ini, dalam menu drop-down, pilihan akan dibahagikan kepada dua subseksyen, setiap kumpulan mempunyai tajuk.

Petua Tambahan: Beberapa perkara biasa yang perlu diperhatikan

• Jika anda ingin membuat kotak drop-down hanya pilih dan tidak boleh memasukkan kandungan, jangan tambahkan contenteditable atau Properties Pengeditan Lain.
• Anda boleh menggunakan CSS untuk mencantikkan penampilan, seperti mengubah lebar, sempadan, dll.
• Apabila menyerahkan borang, atribut name <select></select> adalah penting, jika tidak, backend mungkin tidak menerima data.
• Jika anda mahu pengguna memilih pelbagai pilihan, anda boleh menambah atribut multiple , tetapi kotak drop-down akan menjadi borang senarai pada masa ini.

Pada asasnya, terdapat banyak perkara yang tidak rumit tetapi mudah untuk mengabaikan butiran. Apabila anda mula menulis, adalah disyorkan untuk memulakan dengan yang paling asas dan cuba menambah fungsi perlahan -lahan.

Atas ialah kandungan terperinci Bagaimana untuk membuat senarai dropdown dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!