' teg ” digunakan untuk menentukan pilihan yang boleh dipilih oleh pengguna daripada menu lungsur turun atau daripada senarai pilihan dalam borang web. ' teg ” membolehkan pembangun mencipta satu set pilihan yang mana pengguna boleh memilih sebarang pilihan. Ia sedang digunakan dalam pelbagai aplikasi seperti tinjauan, tapak membeli-belah dalam talian, borang pendaftaran, dll.
Artikel ini menunjukkan teg pilihan dalam HTML bersama dengan contoh praktikal:
- Apakah teg pilihan dan Cara Menggunakannya dalam HTML?
- Penciptaan Senarai Jatuh Turun
- Penciptaan Senarai Autolengkap
Apakah teg pilihan dan Cara Menggunakannya dalam HTML?
Teg pilihan boleh digunakan dengan '
Contoh 1: Penciptaan Senarai Jatuh Turun
' tag ' digunakan dengan '
< h2 > Bahasa Pengaturcaraan h2 >
< label untuk = 'senjata prog' > Pilih Senjata Pengaturcaraan: label >
< pilih ID = 'senarai prog' >
< pilihan nilai = '' > Pilih Pilihan pilihan >
< pilihan nilai = 'c++' > C++ pilihan >
< pilihan nilai = '.net' > Jaring Titik pilihan >
< pilihan nilai = 'nodejs' > Nod js pilihan >
pilih >
Dalam coretan kod di atas:
- Pertama, ' tag ' digunakan untuk memaparkan data dan ia diberikan dengan '
'tag menggunakan 'nya untuk ” atribut. - Selepas itu, '
teg ” digunakan untuk mencipta persekitaran untuk senarai lungsur turun. - Seterusnya, ' tag ” digunakan untuk mencipta item senarai untuk diletakkan sebagai item senarai juntai bawah.
Selepas menyediakan struktur senarai juntai bawah, sekarang mari kita gunakan beberapa penggayaan asas:
label {paparan: blok;
jidar bawah: 5px;
}
pilih {
padding: 5px;
jejari sempadan: 5px;
lebar: 200px;
}
Penjelasan sifat CSS diterangkan di bawah:
- Pertama, pilih ' label elemen ” dan kemudian tetapkan nilai “block” dan “5px” kepada CSS “ paparan ” dan “ margin-bawah ” hartanah.
- Seterusnya, ' pilih elemen ” dipilih dan memberikan nilai “5px”, “5px” dan “200px” kepada CSS “ padding ”, “ jejari sempadan ” dan “ lebar ” hartanah, masing-masing. Sifat ini digunakan untuk meningkatkan keterlihatan pengguna.
Selepas pelaksanaan coretan kod di atas, halaman web kelihatan seperti ini:
Output di atas menunjukkan bahawa dropdown telah dibuat menggunakan ' 'tag dengan '
Contoh 2: Penciptaan Senarai Autolengkap
' tag ' digunakan dengan ' teg ” untuk membuat senarai autolengkap. Ia digunakan bersama dengan ' teg ” yang diisi oleh pilihan yang tersedia dalam senarai autolengkap. Kod untuk penciptaan senarai autolengkap menggunakan HTML ditunjukkan dalam coretan kod di bawah:
< label untuk = 'alat prog' > Ataupun menaip alat Pengaturcaraan: label >< input menaip = 'teks' ID = 'alat prog' senarai = 'alat' >
< senarai data ID = 'alat' >
< pilihan nilai = 'C++' >
< pilihan nilai = 'Perhimpunan' >
< pilihan nilai = '.Bersih' >
< pilihan nilai = 'PHP' >
< pilihan nilai = 'Ruby' >
< pilihan nilai = 'Swift' >
< pilihan nilai = 'Nod js' >
< pilihan nilai = 'Bertindak' >
< pilihan nilai = 'Mongo' >
< pilihan nilai = 'Jawa' >
< pilihan nilai = 'Python' >
senarai data >
Dalam coretan kod di atas:
- Pertama, tambahkan ' teg ” yang memaparkan teks bersama-sama dengan elemen HTML.
- Seterusnya, gunakan ' teg ” yang diisi oleh pengguna secara manual atau boleh diisi secara automatik oleh pilihan yang tersedia dalam senarai autolengkap.
- Selepas itu, gunakan ' tag ' dan tetapkan ' ID nilai atribut sama dengan nilai ' senarai 'sifat' ” tag.
- Seterusnya, gunakan ' teg ” di dalam teg “
Selepas pelaksanaan coretan kod di atas, halaman web kelihatan seperti ini:
Output menunjukkan bahawa senarai auto-lengkap dibuat dengan menggunakan ' tag ” dengan gabungan “ ” dan “ ” tag.
Kesimpulan
' teg ” membenarkan pembangun membuat pilihan untuk senarai pilihan, yang mana pengguna boleh memilih sebarang pilihan. Teg '