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 ceb78957d8ce8d385fba555f4c2363c9 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 5a07473c87748fb1bf73f23d45547ab8 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 5b7a15bed8615d1b843806256bebea72 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 a2cd0c91d918a5f6a4875a8ae412e919 dan atribut label mewakili nama kumpulan. Dalam setiap kumpulan, anda boleh menggunakan elemen 5a07473c87748fb1bf73f23d45547ab8

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 5a07473c87748fb1bf73f23d45547ab8 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 5a07473c87748fb1bf73f23d45547ab8

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 ceb78957d8ce8d385fba555f4c2363c9, kemudian buat elemen 45a2772a6b6107b401db3c9b82c049c2 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!