html set kotak drop-down

Kotak lungsur HTML ialah kawalan borang web yang biasa digunakan Pengguna boleh memilih pilihan daripada menu lungsur. HTML menyediakan pelbagai cara untuk menyediakan kotak drop-down, termasuk menggunakan elemen kotak drop-down HTML standard serta menggunakan teknik lanjutan seperti JavaScript atau CSS untuk menyesuaikan penampilan dan kefungsian kotak drop-down.

1. Tetapan kotak lungsur HTML standard

Kotak lungsur HTML yang paling asas dibuat menggunakan elemen Berikut ialah contoh kod mudah:

<select name="fruit">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
  <option value="pear">Pear</option>
</select>

Kod ini mencipta kotak lungsur yang dinamakan "buah" dengan 4 pilihan: "Epal", "Pisang", "Oren" dan "Pear" . Setiap pilihan diwakili oleh elemen nilai atribut mewakili nilai pilihan dan kandungan teks ialah label pilihan.

2. Tetapkan kumpulan pilihan

Dalam penggunaan sebenar, kita biasanya perlu mengumpulkan kumpulan pilihan dengan maksud yang sama supaya pengguna dapat mencari dan memilih dengan lebih mudah. HTML menyediakan elemen untuk membuat kumpulan pilihan:

<select name="fruit">
  <optgroup label="Fresh Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
  </optgroup>
  <optgroup label="Dried Fruits">
    <option value="raisin">Raisin</option>
    <option value="date">Date</option>
  </optgroup>
  <optgroup label="Canned Fruits">
    <option value="peach">Peach</option>
    <option value="pear">Pear</option>
  </optgroup>
</select>

Kod di atas mencipta kotak lungsur yang dinamakan "buah" dengan jumlah 3 kumpulan pilihan: "Buah Segar" mewakili kumpulan buah segar , " "Buah Kering" mewakili kumpulan buah kering, dan "Buah Tin" mewakili kumpulan buah tin. Setiap kumpulan pilihan diwakili oleh elemen dan atribut label mewakili nama kumpulan. Dalam setiap kumpulan, anda boleh menggunakan elemen

3. Tetapkan pilihan lalai

Apabila halaman dimuatkan, kadangkala perlu menetapkan pilihan sebagai pilihan lalai supaya pengguna boleh melengkapkan operasi mengisi borang dengan lebih cepat. HTML menyediakan atribut yang dipilih pada elemen untuk menetapkan pilihan lalai:

<select name="fruit">
  <option value="apple" selected>Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
  <option value="pear">Pear</option>
</select>

Kod di atas mencipta kotak lungsur yang dinamakan "buah", di mana pilihan "Apple" ditetapkan sebagai pilihan lalai. Ambil perhatian bahawa hanya tetapkan atribut yang dipilih pada elemen

4 Gunakan JavaScript atau CSS untuk menyesuaikan kotak lungsur

Walaupun kotak lungsur HTML standard adalah mudah dan mudah digunakan, penampilannya agak ringkas dan tidak dapat memenuhi keperluan daripada pengguna lanjutan. Untuk menjadikan kotak drop-down mempunyai interaktiviti dan kesan visual yang lebih baik, pembangun biasanya menggunakan teknologi seperti JavaScript atau CSS untuk menyesuaikan kotak drop-down.

1. JavaScript untuk menetapkan kotak lungsur turun

Melalui JavaScript, elemen kotak lungsur turun boleh dicipta dan diubah suai secara dinamik untuk mencapai pelbagai kesan kotak lungsur tersuai. Berikut ialah contoh kod JavaScript yang mudah untuk menambah logo segitiga lungsur ke kotak lungsur dan menyerlahkannya apabila tetikus melayang:

// 给下拉框添加下拉三角标志
var selectBox = document.getElementById("fruit");
var arrow = document.createElement("span");
arrow.innerHTML = "▼";
arrow.className = "arrow";
selectBox.parentNode.insertBefore(arrow, selectBox.nextSibling);

// 鼠标悬停时高亮显示
selectBox.addEventListener("mouseover", function() {
  this.style.backgroundColor = "#f0f0f0";
});

selectBox.addEventListener("mouseout", function() {
  this.style.backgroundColor = "#ffffff";
});

Kod di atas mula-mula menggunakan kaedah document.getElementById() untuk mendapatkan nama "buah" Elemen , kemudian buat elemen Seterusnya, gunakan kaedah addEventListener() untuk menambah pendengar acara alih tetikus dan keluar tetikus pada kotak lungsur dan ubah suai warna latar belakang kotak lungsur apabila tetikus melayang dan bergerak pergi masing-masing.

2. Kotak lungsur tetapan CSS

Melalui CSS, anda boleh melaraskan gaya kotak lungsur turun dengan lebih mudah, termasuk mengubah suai warna, fon, jidar dan sifat-sifat lain. Berikut ialah contoh kod CSS mudah untuk melaksanakan sudut bulat, bayang-bayang dan kesan peralihan:

select {
  border-radius: 5px;
  box-shadow: 2px 2px 5px #999;
  transition: all .2s ease-in-out;
}

select:hover {
  background-color: #f0f0f0;
}

Kod di atas menggunakan sifat jejari sempadan untuk menetapkan jejari sudut kotak lungsur dan kotak- harta bayang untuk menambah kesan bayang, gunakan atribut peralihan untuk mencapai kesan peralihan. Pada masa yang sama, gunakan :hover pseudo-class untuk menggunakan gaya lain pada kotak lungsur dalam keadaan hover tetikus untuk mencapai kesan visual yang lebih baik.

Ringkasan

Kotak lungsur HTML ialah kawalan borang web yang biasa digunakan Penampilan dan kefungsian boleh disesuaikan dengan menggunakan elemen HTML standard, atau melalui teknologi seperti JavaScript dan CSS. Pembangun boleh memilih kaedah tetapan yang sesuai dengan mereka berdasarkan keperluan khusus untuk meningkatkan pengalaman pengguna dan keberkesanan tapak web.

Atas ialah kandungan terperinci html set kotak drop-down. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!