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!

Kenyataan Laman Web ini

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

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang lalu By DDD

Akan R.E.P.O. Ada Crossplay?

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7546

15

Tutorial CakePHP

1381

52

Apakah format nama akaun stim

83

11

kunci pengaktifan win11 kekal

57

19

Sambungan NYT menunjukkan dan jawapan

21

90

Tunjukkan Lagi

Related knowledge

Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

Pemegang Tempat Input HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.

Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

Butang onclick HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.

See all articles

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kita Penafian Sitemap

© php.cn All rights reserved