Bagaimana anda membuat senarai dropdown menggunakan & lt; pilih & gt; dan & lt; pilihan & gt; Tags?

Bagaimana anda membuat senarai dropdown menggunakan tag dan ?

Mewujudkan senarai dropdown dalam HTML melibatkan menggunakan tag <select></select> dan <option></option> . Elemen <select></select> bertindak sebagai bekas untuk dropdown, manakala setiap elemen <option></option> mewakili item dalam senarai dropdown.

Berikut adalah panduan langkah demi langkah mengenai cara membuat senarai dropdown asas:

1. Mulakan dengan tag <select></select> :
   Tag <select></select> adalah elemen paling luar yang mentakrifkan senarai dropdown. Ia boleh mempunyai pelbagai atribut, seperti name , yang digunakan untuk merujuk data borang selepas ia diserahkan.

    <code class="html"><select name="fruits"> <!-- Options go here --> </select></code>

2. Tambahkan <option></option> tags di dalam <select></select> :
   Setiap <option></option> mewakili item yang boleh dipilih dalam lungsur turun. Anda boleh menentukan nilai dengan atribut value , yang dihantar apabila borang dikemukakan. Jika atribut value ditinggalkan, kandungan teks <option></option> akan dihantar sebaliknya.

    <code class="html"><select name="fruits"> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="cherry">Cherry</option> </select></code>

3. Secara pilihan, tetapkan pilihan terpilih lalai:
   Untuk menetapkan pilihan yang dipilih lalai, anda boleh menggunakan atribut selected pada <option></option> yang anda mahu pra-dipilih.

    <code class="html"><select name="fruits"> <option value="apple">Apple</option> <option value="banana" selected>Banana</option> <option value="cherry">Cherry</option> </select></code>

Struktur asas ini membolehkan anda membuat senarai dropdown berfungsi yang pengguna boleh berinteraksi untuk memilih pilihan pilihan mereka.

Bolehkah saya menambah pelbagai pilihan ke senarai dropdown?

Ya, anda boleh mengaktifkan pelbagai pilihan dalam senarai dropdown dengan menggunakan atribut multiple pada tag <select></select> . Apabila atribut ini hadir, pengguna boleh memilih lebih daripada satu pilihan dari senarai.

Inilah cara melaksanakan senarai dropdown pelbagai pilihan:

1. Tambahkan atribut multiple ke tag <select></select> :

    <code class="html"><select name="fruits" multiple> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="cherry">Cherry</option> </select></code>

2. Secara pilihan, tentukan saiz:
   Untuk menunjukkan lebih daripada satu pilihan pada satu masa, anda boleh menetapkan atribut size pada tag <select></select> . Jika size lebih besar daripada 1, jatuh turun akan menjadi kotak senarai yang memaparkan banyak pilihan tanpa perlu menatal.

    <code class="html"><select name="fruits" multiple size="3"> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="cherry">Cherry</option> </select></code>

Dengan atribut multiple , pengguna boleh memilih pelbagai pilihan dengan menahan kekunci Ctrl (Windows) atau Cmd (MAC) semasa mengklik pada pilihan. Nilai yang dipilih akan dikemukakan sebagai array dengan atribut nama yang sama apabila borang dikemukakan.

Bagaimana saya gaya senarai dropdown untuk menyesuaikan reka bentuk laman web saya?

Menggayakan senarai dropdown untuk memadankan reka bentuk laman web anda boleh dicapai melalui CSS. Oleh kerana senarai dropdown adalah elemen bentuk, sesetengah sifat tidak boleh digambarkan secara langsung, tetapi masih banyak cara untuk menyesuaikan penampilan mereka.

Inilah panduan mengenai cara gaya senarai dropdown:

1. Gaya asas untuk tag <select></select> :

   Anda boleh gaya elemen <select></select> itu sendiri untuk menyesuaikan saiz, fon, sempadan, dan latar belakangnya.

    <code class="css">select { width: 200px; padding: 5px 35px 5px 5px; font-size: 16px; border: 1px solid #ccc; height: 34px; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: url('arrow.png') 96% / 15% no-repeat #eee; }</code>

   Perhatikan penggunaan appearance: none untuk mengeluarkan gaya penyemak imbas lalai, dan imej anak panah tersuai untuk penunjuk lungsur.

2. Menggayakan elemen <option></option> :

   Styling <option></option> Elements lebih terhad. Anda boleh menukar beberapa sifat, tetapi penyesuaian penuh tidak mungkin di semua pelayar kerana sekatan keselamatan.

    <code class="css">option { font-weight: normal; display: block; white-space: nowrap; min-height: 1.2em; padding: 0px 2px 1px; }</code>

3. Gaya apabila dipilih:

   Anda boleh gaya elemen <select></select> apabila ia fokus atau apabila pilihan dipilih.

    <code class="css">select:focus { outline: none; border-color: #66afe9; box-shadow: 0 0 5px rgba(102, 175, 233, 0.5); }</code>

4. Reka bentuk yang responsif:

   Anda boleh menggunakan pertanyaan media untuk menyesuaikan gaya untuk saiz skrin yang berbeza.

    <code class="css">@media (max-width: 600px) { select { width: 100%; } }</code>

Ingat bahawa keserasian pelayar boleh berbeza -beza, jadi sentiasa menguji dropdowns gaya anda merentasi pelayar dan peranti yang berbeza.

Apakah beberapa atribut biasa yang digunakan dengan tag ?

Beberapa atribut boleh digunakan dengan tag <select></select> untuk mengawal kelakuannya dan memberikan maklumat tambahan. Berikut adalah beberapa yang paling biasa:

1. Nama:
   Menentukan nama kawalan, yang dihantar dengan data borang apabila borang dikemukakan.

    <code class="html"><select name="fruits"> <!-- Options go here --> </select></code>

2. Pelbagai:
   Membolehkan pengguna memilih lebih daripada satu pilihan.

    <code class="html"><select name="fruits" multiple> <!-- Options go here --> </select></code>

3. saiz:
   Mendefinisikan bilangan pilihan yang kelihatan dalam senarai dropdown. Jika size lebih besar daripada 1, ia menjadi kotak senarai dan bukannya jatuh turun.

    <code class="html"><select name="fruits" size="3"> <!-- Options go here --> </select></code>

4. dilumpuhkan:
   Melumpuhkan elemen pilih, menghalang interaksi pengguna.

    <code class="html"><select name="fruits" disabled> <!-- Options go here --> </select></code>

5. Diperlukan:
   Menentukan bahawa pengguna mesti memilih pilihan sebelum menyerahkan borang tersebut.

    <code class="html"><select name="fruits" required> <option value="">Select a fruit</option> <option value="apple">Apple</option> <option value="banana">Banana</option> </select></code>

6. Autofocus:
   Secara automatik menetapkan fokus kepada elemen <select></select> apabila halaman dimuat.

    <code class="html"><select name="fruits" autofocus> <!-- Options go here --> </select></code>

Atribut-atribut ini dapat meningkatkan fungsi dan pengalaman pengguna senarai dropdown anda, menjadikannya lebih serba boleh dan mesra pengguna.

Atas ialah kandungan terperinci Bagaimana anda membuat senarai dropdown menggunakan & lt; pilih & gt; dan & lt; pilihan & gt; Tags?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!