Pilih Tag dalam HTML

Teg Pilih dalam HTML mendayakan ciri pemilihan daripada senarai pilihan, seperti menu lungsur turun atau menu berbilang pilihan. Ia adalah teg yang boleh digunakan dalam bentuk kod HTML yang digunakan untuk mencipta dan melaksanakan halaman web. Sintaksnya seperti ‘ Nilai Nilai …., di mana setiap item dalam senarai akan disertakan dengan teg pilihan dan akan membenarkan ciri pemilihan pengguna. Untuk memudahkan kaedah pemilihan lain seperti kumpulan pilih dan pilihan berbilang, teg boleh digunakan di dalam teg dan boleh digunakan dan bukannya tag, masing-masing.

Sintaks Teg Pilih dalam HTML

Teg pilihan boleh menggunakan … tag.

Sintaks untuk teg ini adalah seperti berikut:

<select>
<option> Value  </option>
<option> Value  </option>
</select>

Sintaks di atas tag mencipta senarai pilihan dengan menu pilihan untuk memilih sebarang pilihan daripada senarai. Secara lalai, ia akan memaparkan pilihan pertama sebagai pilihan yang dipilih.

Memilih berbilang pilihan menggunakan tag dalam senarai pilihan juga boleh dilakukan. Sintaks ini adalah sama seperti tag; satu-satunya perbezaan ialah menggunakan berbilang kata kunci; ia akan membolehkan pengguna memilih pelbagai pilihan daripada senarai.

Ia akan menjadi seperti berikut:

<select multiple>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>

Salah satu penggunaan paling penting bagi

tag adalah untuk membuat kumpulan pilihan dalam senarai. Ia akan mencipta berbilang pilihan sebagai kumpulan dan tajuk kumpulan akan dipaparkan dalam tajuk tebal.

Sintaks untuk ini adalah seperti berikut:

<select >
<optgroup label  = "labelname">
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<optgroup>
</select>

saiz: Sintaks di atas boleh mentakrifkan saiz juga supaya ia akan memaparkan hanya saiz yang ditentukan

pilihan sahaja ini seperti:

<select value="" size="4">
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>

 autolengkap: pilih teg juga digunakan untuk autoisi ke dalam nilai medan seperti berikut:

<select >
<option value=" " autocomplete="off"> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>

autofokus: kita boleh memfokus pada satu pilihan tertentu daripada senarai pada satu masa seperti berikut. Seseorang boleh menggunakan hanya satu autofokus ke dalam satu halaman.

<select autofocus>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>

pautan: Teg pilih digunakan untuk membuka pautan borang melalui pilihan yang ditentukan seperti yang ditakrifkan dalam sintaks berikut:

<form action="" id="name">
</form>
<Select name="" form="Id_name">
<option value=" "> Content Name </option>
</select>

 diperlukan: Pilihan dalam teg pilih ini mentakrifkan pilihan wajib daripada senarai yang ditentukan sebelum penyerahan sebenar borang.

<select name="value" required>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>

pemegang tempat: Seperti yang kita tahu, jika menggunakan label pilih maka ia akan menganggap pilihan pertama sebagai pilihan lalai, tetapi jika kita ingin menunjukkan beberapa pilihan sebagai lalai, maka kita boleh menetapkan kata kunci yang dipilih kepada pilihan khusus seperti berikut:

<select name="value" >
<option value=" "> Content Name </option>
<option value=" " selected> Content Name </option>
</select>

dilumpuhkan: satu lagi helah berguna dalam teg pilih untuk menunjukkan pilihan dalam format dilumpuhkan seperti berikut:

Menggunakan yang ini boleh menunjukkan pilihan, tetapi mengambil sebarang tindakan adalah mustahil.

<select name="value" >
<option value=" " disabled> Content Name </option>
<option value=" "> Content Name </option>
</select>

Contoh Teg Pilih dalam HTML

Berikut ialah contoh berikut yang dinyatakan di bawah.

Contoh #1

Dalam contoh ini, kami akan menunjukkan teg pilih yang mudah sebagai senarai pilihan, kumpulan pilihan dan untuk memilih berbilang pilihan pada satu masa seperti yang ditunjukkan di bawah:

Kod

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.div-container {
display: table;
width: 100%;
}
.block {
display: table-cell;
padding: 10px;
}
</style>
</head>
<body>
<div class="div-container">
<div class="block">
<h4>Simple Select tag </h4>
<select name="Web Languages">
<option> HTML 5  </option>
<option> CSS 3</option>
<option> Bootstrap  </option>
<option>Angular </option>
<option> React JS </option>
<option> Vue JS</option>
<option>Python  </option>
<option>PHP</option>
</select> <br>
</div>
<div class="block" >
<h4>Optgroup Select tag </h4>
<select>
<optgroup label="2 wheeler">
<option value="Honda">Shine</option>
<option value="Suzuki">Access</option>
</optgroup>
<optgroup label="4 wheeler">
<option value="m">Mercedes</option>
<option value="o">Audi</option>
</optgroup>
</select>
</div>
<div class="block" >
<h4>Multiple Selection in Select tag </h4>
<select multiple>
<option> Green  </option>
<option> Orange</option>
<option> Blue </option>
<option>Red </option>
<option> Yellow </option>
</select>
</div>
</div>
</body>
</html>

Output:

Contoh #2

Contoh ini mentakrifkan cara untuk membuka daripada pautan melalui tag

Kod

<!DOCTYPE html>
<html>
<head>
<title>select Tag form link</title>
</head>
<body>
<form action = "C:\Users\Sonali\Desktop\HTML colspan.html" method = "post">
<select name = "list">
<option value = "menu 1">Colspan tag</option>
<option value = "menu 2" selected>Font Tag</option>
</select>
<input type = "submit" value = "Submit" />
</form>
</body>
</html>

Output: Selepas memilih nilai teg Colspan dan memilihnya dengan butang serah, senarai akan membuka borang yang dipautkan.

Contoh #3

Terdapat berbilang pilihan dalam senarai, tetapi Ia akan menunjukkan pilihan mengikut saiz yang ditentukan.

Kod

<!DOCTYPE html>
<html>
<head>
<title>select Tag form link</title>
</head>
<body>
<select name = "places" size="5">
<option>Aurangabad</option>
<option>Beed</option>
<option>Chennai</option>
<option>Delhi</option>
<option >Egatpuri</option>
<option >Firozabad</option>
<option >Fatimpur</option>
<option >Goa</option>
<option >Harihareshwar</option>
<option >Indonesia</option>
<option >Japan</option>
<option >Kolkata</option>
<option >Latur</option>
<option >Mumbai</option>
<option  >Nagpur</option>
<option >Oty</option>
<option  >Pune</option>
<option >Qatar</option>
<option >Raipur</option>
<option  >Sholapur</option>
<option >Tamil Nadu</option>
<option  >Uttarakhand</option>
</select>
</body>
</html>

Output:

Kesimpulan

Teg pilih dalam HTML memaparkan senarai pilihan untuk memilih satu atau berbilang pilihan daripada senarai. teg boleh digunakan dengan nilai seperti dipilih, diperlukan, dilumpuhkan, diperlukan, autoisi, autofokus, pautan, saiz, berbilang, pemegang tempat, kumpulan opt dan banyak lagi.

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