Senarai jatuh turun dalam HTML

Senarai lungsur turun dalam HTML ialah elemen penting untuk tujuan pembinaan borang atau untuk menunjukkan senarai pilihan yang pengguna boleh memilih satu atau berbilang nilai. Senarai pilihan dalam HTML ini dikenali sebagai senarai Dropdown. Ia dibuat menggunakan tag dengan nilai. Ia membolehkan pengguna memilih mana-mana pilihan mengikut pilihan mereka. Ia sentiasa menjadi amalan yang baik untuk menggunakan senarai lungsur apabila anda mengetahui nilai pilihan supaya seseorang boleh menetapkan sebarang nilai sebagai atribut lalai dan yang lain akan menjadi nilai pilihan.

Sintaks Senarai Jatuh Turun dalam HTML

Mari lihat bagaimana senarai Jatuh turun akan dibuat:

Sintaks:

<select>
<option value="">option1</option>
<option value="">option2</option>
<option value="">option3</option>
<option value="">option3</option>
</select>

Contoh:

<select name="color">
<option value="red">Red</option>
<option value="purple">Purple </option>
</select>

Seperti yang ditunjukkan dalam sintaks di atas ,

ialah teg yang digunakan untuk membuat senarai Jatuh turun. teg yang disertakan dalam teg pilih ialah nilai atribut atau atribut untuk senarai pilihan, nilainya adalah untuk menunjukkan sama ada pilihan itu dipilih, dilumpuhkan atau dengan mana-mana sifat lain.option1,2….akan menjadi nama. Dengan bantuan CSS, kami boleh memberikan kesan pada senarai pilihan kami, dapat menetapkan kedudukan seperti relatif, mutlak, dll., dapat menetapkan lebar dan melakukan banyak fungsi lain.

Menetapkan warna atau warna latar belakang kepada tuding dengan menggunakan kod:

.dropdown a:hover{
Background-color: color_name;
}

Kedudukan untuk senarai lungsur turun ditakrifkan kepada dua nilai: kedudukan: saudara yang digunakan untuk memaparkan kandungan senarai betul-betul di bawah butang senarai pilih. Dengan bantuan kedudukan: mutlak;

Lebar min ialah salah satu sifat yang digunakan untuk memberikan lebar tertentu pada senarai Jatuh Bawah. Kita boleh menetapkannya selagi butang lungsur turun dengan menetapkan lebar kepada 100%. Sintaks di atas ditakrifkan untuk pemilihan atribut tunggal; sekarang, kita akan melihat bagaimana berbilang pilihan akan dipilih daripada senarai item.

Sintaks:

<select multiple>
<option value="">option1</option>
<option value="">option2</option>
</select>

Contoh:

<select name="subject" multiple>
<option value="math">Math</option>
<option value="english">English</option>
<option value="science">Science</option>
<option value="biology">Biology</option>
</select>

Bagaimanakah Senarai Jatuh Turun berfungsi dalam HTML?

Selepas mengkaji sintaks sekarang, kita akan melihat bagaimana sebenarnya senarai Dropdown akan berfungsi dalam HTML. Terdapat beberapa atribut yang digunakan dalam tag, iaitu seperti berikut:

1. Nama: Atribut ini berguna untuk memberikan nama kepada kawalan, yang akan dihantar ke pelayan untuk dikenal pasti dan mengambil nilai yang diperlukan.
2. Berbilang: Jika atribut ditetapkan kepada "berbilang", pengguna boleh memilih berbilang nilai daripada senarai pilihan.
3. Saiz: Atribut saiz digunakan untuk mentakrifkan kotak tatal bersaiz tertentu di sekeliling senarai Jatuh Turun. Ia juga berguna untuk memaparkan beberapa pilihan yang boleh dilihat daripada senarai.
4. Nilai: Atribut ini akan menunjukkan pilihan dalam senarai pilihan yang dipilih.
5. Atribut yang dipilih membolehkan pada titik permulaan pemuatan halaman untuk menunjukkan item senarai yang telah dipilih daripada senarai.
6. Label: Atribut label berfungsi sebagai pendekatan lain untuk melabelkan nilai pilihan.
7. Dilumpuhkan: Jika kami ingin menunjukkan senarai lungsur turun dengan pilihan nyahdaya, anda boleh menggunakan atribut yang dilumpuhkan dalam senarai pilih HTML.
8. onChange: Setiap kali pengguna akan memilih sesiapa sahaja pilihan daripada senarai lungsur turun, maka peristiwa itu dicetuskan pada pemilihan item.
9. onFocus: Setiap kali pengguna menuding tetikus pada senarai pilihan untuk memilih pilihan daripada senarai, ia mencetuskan acara untuk memilih item.
10. Borang: Atribut ini digunakan untuk menentukan satu atau berbilang borang yang berkaitan dengan medan pilihan.
11. dilumpuhkan: Kami harus memastikan senarai lungsur kami dilumpuhkan daripada pengguna dengan bantuan atribut ini.
12. diperlukan: Apabila mengisi beberapa borang, kami ingin menunjukkan bahawa medan ini diperlukan untuk memilih mana-mana nilai daripada senarainya sebelum borang penghantaran sebenar, jadi dalam kes ini, kami menentukan bahawa pengguna dikehendaki untuk pilih mana-mana satu nilai daripada senarai.

Contoh  Kod HTML

Contoh berikut akan menunjukkan bagaimana sebenarnya senarai Jatuh Turun akan digunakan:

Contoh #1

Kod:

<head>
<title>DropDown List</title>
</head>
<body>
<h4>Seven Wonders of the world</h4>
<form>
<select name = "dropdown">
<option value = "taj" selected>Taj Mahal</option>
<option value = "china">Great Wall of China</option>
<option value = "chirst" required>Christ the Redeemer Satue</option>
<option value = "machu" disabled>Machu Picchu</option>
<option value = "chichen">Chichen Itza</option>
<option value = "colossem">The Roman Colosseum</option>
<option value = "petra">Petra</option>
</select>
</form>
</body>

Contoh di atas mengandungi pilihan yang berbeza seperti dilumpuhkan, dipilih, diperlukan, dsb., yang ditunjukkan dalam skrin output. 

Output:

Contoh #2

Kod:

<html>
<body>
<form id="dropdowndemo">
<select id="multiselectdd">
<option>Mumbai</option>
<option>Pune</option>
<option>Nagpur</option>
<option>Solapur</option>
<option>Latur</option>
</select>
<input type="button" onclick="multipleFunc()" value="Select multiple options">
</form>
<p>Multiple options can be selected here .Please press ctrl key and select multiple options at a time. </p>
<script>
function multipleFunc() {
document.getElementById("multiselectdd").multiple = true;
}
</script>
</body>
</html>

Seperti yang ditunjukkan dalam tangkapan skrin di bawah, pilih berbilang pilihan daripada senarai juntai bawah, tekan butang yang diberikan dan pilih berbilang pilihan dengan menekan pada CTRL.

Output:

Contoh #3

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
.dropdownbtn {
background-color: black;
color: white;
padding: 12px;
font-size: 12px;
}
.dropdowndemo{
position:fixed;
display: block;
}
.dropdownlist-content {
display: none;
position: absolute;
background-color: greenyellow;
min-width: 120px;
z-index: 1;
}
.dropdownlist-content a {
color: darkblue;
padding: 14px 18px;
display: block;
}
.dropdownlist-content a:hover {background-color: lightcyan;}
.dropdowndemo:hover .dropdownlist-content {display: block;}
.dropdowndemo:hover .dropdownbtn {background-color: blue;}
</style>
</head>
<body>
<h2>Hover Dropdown Demo</h2>
<div class="dropdowndemo">
<button class="dropdownbtn">HTML forms Element</button>
<div class="dropdownlist-content">
<a href="#">Links</a>
<a href="#">Dropdown list</a>
<a href="#">Input Field</a>
<a href="#">Button</a>
<a href="#">Radio Buttons</a>
</div>
</div>
</body>
</html>

Senarai lungsur turun akan dibuka pada kesan tuding.

Sortie :

Conclusion

Nous pouvons conclure que la liste déroulante est utilisée pour sélectionner une option dans la liste de sélection. Il est utilisé pour sélectionner une ou plusieurs options à la fois. Les utilisateurs peuvent sélectionner une option dans la liste selon leur choix, ce qui la rend plus conviviale. Les attributs répertoriés ci-dessus sont utilisés avec les balises select pour effectuer diverses opérations de sélection avec la liste déroulante.

Article recommandé

Ceci est un guide de la liste déroulante en HTML. Nous discutons ici du fonctionnement de la liste déroulante en HTML et de ses exemples avec l'implémentation du code. Vous pouvez également consulter nos autres articles connexes pour en savoir plus –

1. Attribut de style HTML
2. Top 10 des avantages du HTML
3. Cadres HTML
4. Mise en page HTML

Atas ialah kandungan terperinci Senarai jatuh turun dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html define if for select using Attribute Event default this display position background kind

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Seret dan Lepaskan dalam HTMLArtikel seterusnya：Seret dan Lepaskan dalam HTML

Artikel berkaitan

Lihat lagi

• Html小知识总结
• 如何快速学习HTML
• html xhtml xml的区别
• src与href属性的区别
• 关于HTML5和CSS替换使用

• Rumah

• Kursus

• Soal Jawab

• saya

• Rumah
• Kursus
• Artikel
• Soal Jawab
• Kamus
• Manual
• Muat turun
• Topik

Rumah

Artikel

Soal Jawab

Kursus

Topik

Muat turun

Permainan

Kamus

简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）