cari

Rumah >hujung hadapan web >html tutorial >Teg Pilihan dalam HTML

Teg Pilihan dalam HTML

WBOY
WBOYasal
2024-09-04 16:24:571151semak imbas

Teg pilihan ialah elemen paling berguna dalam HTML, yang digunakan dalam senarai lungsur turun untuk memilih pilihan pengguna tertentu daripada senarai pilihan. Pada satu masa, seorang pengguna boleh memilih satu atau lebih pilihan daripada senarai yang diberikan. Ini adalah faedah utama teg pilihan dalam HTML. elemen sentiasa termasuk dalam tag. atau teg e=yang juga dikenali sebagai … .Untuk pilihan tunggal, seseorang boleh menggunakan Di mana sahaja pengguna akan memanggil senarai data melalui skrip atau akan menghantar data ke pelayan, kemudian teg digunakan dalam tag.

Sintaks dengan Contoh

Berikut ialah sintaks yang membantu kami menentukan di mana tepatnya teg pilihan akan ditentukan dalam halaman web atau HTML kami.

Sintaks:

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

Seperti yang ditunjukkan di atas sintaks, ialah teg yang digunakan untuk membuat senarai data. teg yang disertakan dalam teg pilih ialah nilai atribut atau atribut untuk senarai pilihan, nilainya adalah untuk menunjukkan pilihan cuaca dipilih, dilumpuhkan atau dengan mana-mana sifat lain. pilihan1,2….akan menjadi nama.

Dengan bantuan CSS, kami boleh memberikan kesan kepada senarai pilihan kami, dapat menetapkan kedudukan seperti relatif, mutlak, dll., dapat menetapkan lebar dan melakukan banyak fungsi lain. Kedudukan untuk senarai juntai bawah ditakrifkan kepada dua nilai, relatif kedudukan yang digunakan untuk memaparkan kandungan senarai betul-betul di bawah butang senarai pilih. Dengan bantuan kedudukan: mutlak;

Contoh:

Ini akan menyekat pengguna untuk memilih satu pilihan daripada senarai pilihan.

<select name="State">
<option value="MH">Maharashtra</option>
<option value="GJ"> Gujarat </option>
<option value="MP"> Madhya Pradesh </option>
<option value="RJ">Rajasthan </option>
<option value="AP">Andhra Pradesh </option>
</select>

Begitu juga, seperti yang kita semua tahu bahawa kita juga boleh memilih berbilang pilihan mengikut pilihan ke dalam senarai pilihan.

Sintaks: 

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

Contoh untuk sintaks yang sama adalah seperti berikut: 

<select name="laptops" multiple>
<option value="hp">HP</option>
<option value="dell">Dell</option>
<option value="lv">Lenovo</option>
<option value="sony">Sony </option>
</select>

Atribut Teg Pilihan dalam HTML

tag menyokong atribut khusus adalah seperti berikut:

  • dilumpuhkan: Atribut ini digunakan dengan menetapkan nilai Boolean dalam bentuk benar dan palsu. Jika ia ditetapkan kepada benar, maka pilihan daripada senarai akan dilumpuhkan; jika tidak, ia adalah palsu.
  • label: Katakan kita ingin memberikan beberapa teks sebagai label, maka ia boleh dimasukkan ke dalam teg pilihan. Ia akan menganggap sebagai nilai kepada elemen itu.
  • dipilih: Dalam reka bentuk halaman web, beberapa kes datang di mana kami ingin menunjukkan pilihan seperti yang telah dipilih dalam paparan paparan. Jadi dengan menetapkan atribut yang dipilih kepada pilihan, seseorang boleh menunjukkan pilihan yang dipilih dalam senarai. Seseorang boleh menunjukkan hanya satu item yang dipilih daripada senarai.
  • nilai: seseorang juga boleh menetapkan nilai kepada pilihan dalam senarai pilihan.

Contoh Pilihan Teg dalam HTML

Di bawah ialah contoh Tag Pilihan yang berbeza dalam HTML:

Contoh #1

Ini adalah contoh mudah senarai pilihan termasuk tag.

Kod:

<!DOCTYPE html>
<html>
<head>
<title>Option tag in HTML</title>
</head>
<body>
<h4>List of IIT colleges in INDIA</h4>
<form>
<select name = "dropdown">
<option value = "im" >IIT Madras</option>
<option value = "id" >IIT Delhi</option>
<option value = "ib" >IIT Bombay </option>
<option value = "ikh" >IIT  Kharagpur</option>
<option value = "ikn">IIT Kanpur</option>
<option value = "ir" >IIT Roorkee</option>
<option value = "ig" >IIT Guwahati</option>
<option value = "ih">IIT Hyderabad </option>
<option value = "ii">IIT Indore</option>
<option value = "ib">IIT Bhubaneswar</option>
<option value = "it" >IIT Tirupati</option>
<option value = "ib">IIT Bhilai</option>
<option value = "ig">IIT Goa</option>
<option value = "ij" >IIT Jammu</option>
<option value = "idb">IIT Dhanbad </option>
<option value = "ip">IIT Palakkad</option>
<option value = "idhe">IIT Dharwad, Est</option>
</select>
</form>
</body>
</html>

Output:

Teg Pilihan dalam HTML

Contoh #2

Contoh untuk menunjukkan teg yang menggunakan nilai seperti dipilih, dilumpuhkan ,

Kod:

<!DOCTYPE html>
<html>
<head>
<title>Option tag in HTML</title>
</head>
<body>
<h4>Select your favourite Bakery product from the list</h4>
<form>
<select name = "dropdown">
<optgroup label="Cakes">
<option value = "BS" >Butterscotch Cake</option>
<option value = "DC" >Dark Chocolate Cake</option>
<option value = "FC" >Fruit Cake</option>
<option value = "RC" >Rasmali Cake</option>
</optgroup>
<option value = "cc">Cupcakes</option>
<option value = "vp" required>Veg Puff</option>
<option value = "ap" disabled>Anda Puff</option>
<option value = "cb">Crunchy Biscuits </option>
<option value = "cob">Chocolate Biscuits</option>
<option value = "clc">Choco Lava Cake</option>
<option value = "wb" >White Bread</option>
<option value = "bb">Brown Bread</option>
<option value = "mf" selected>Muffin</option>
<option value = "br" >Bread Roll</option>
<option value = "bw">Brownie </option>
<option value = "ps">Pastry</option>
<option value = "vgs">Veg Grill Sandwich</option>
</select>
</form>
</body>
</html>

Output:

Teg Pilihan dalam HTML

Contoh #3

Dalam contoh ini, kami akan memilih berbilang pilihan daripada senarai data.

Kod:

<!DOCTYPE html>
<html>
<body>
<h2>Top IT training Institutes in Pune </h2>
<form id="multidd">
<select id="multiselectopt">
<option> ABCIS Learning </option>
<option> MindScripts Technologies </option>
<option> Sysap technologies </option>
<option> IclassPune</option>
<option>  IIHT</option>
<option> Magneto Academy </option>
<option> Certification Guru </option>
<option> I Cert Global </option>
<option> Technogeeks </option>
</select>
<input type="button" onclick="multipleFunc()" value="Select multiple options">
</form>
<p>Multiple options can be selected here. Press ctrl key and select multiple option from the list.</p>
<script>
function multipleFunc() {
document.getElementById("multiselectopt").multiple = true;
}
</script>
</body>
</html>

Output:

Teg Pilihan dalam HTML

Kesimpulan

Daripada semua maklumat di atas, kami mendapat tahu bahawa tag dalam senarai pilihan atau ke dalam senarai data bertanggungjawab untuk memilih pilihan mengikut pilihan pengguna. Seseorang boleh memilih satu atau lebih pilihan daripada senarai juntai bawah. Jika kami mempunyai berbilang pilihan yang disertakan dalam senarai, kami boleh membahagikannya kepada elemen.

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

css html Boolean define if for select include restrict Attribute this display position
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：Elemen Nav HtmlArtikel seterusnya：Elemen Nav Html

Artikel berkaitan

Lihat lagi