“ <ตัวเลือก> แท็ก ” ใช้เพื่อกำหนดตัวเลือกที่ผู้ใช้สามารถเลือกจากเมนูแบบเลื่อนลงหรือจากรายการการเลือกในเว็บฟอร์ม “ <ตัวเลือก> ” แท็กอนุญาตให้นักพัฒนาสร้างชุดตัวเลือกที่ผู้ใช้สามารถเลือกตัวเลือกใดก็ได้ มีการนำไปใช้ในแอปพลิเคชันต่างๆ เช่น แบบสำรวจ เว็บไซต์ช้อปปิ้งออนไลน์ แบบฟอร์มลงทะเบียน เป็นต้น
บทความนี้จะสาธิตแท็กตัวเลือกใน HTML พร้อมกับตัวอย่างที่ใช้งานได้จริง:
- แท็กตัวเลือกคืออะไรและจะใช้อย่างไรใน HTML
- การสร้างรายการแบบเลื่อนลง
- การสร้างรายการเติมข้อความอัตโนมัติ
แท็กตัวเลือกคืออะไรและจะใช้อย่างไรใน HTML
แท็กตัวเลือกสามารถใช้กับ “ <เลือก> ' และ ' <รายการข้อมูล> แท็ก ในกรณีของ “ <รายการข้อมูล> ” จะสร้างรายการตัวเลือกที่เบราว์เซอร์สามารถเติมข้อความอัตโนมัติได้ ให้เราอธิบายตัวอย่างสองสามตัวอย่างเพื่อความเข้าใจที่ดีขึ้นเกี่ยวกับความสัมพันธ์ระหว่าง ' <ตัวเลือก> ” แท็กด้วย “ <เลือก> ' และ ' <รายการข้อมูล> ” แท็ก:
ตัวอย่างที่ 1: การสร้างรายการแบบหล่นลง
“ <ตัวเลือก> แท็ก ” ใช้กับ “ <เลือก> แท็ก ” เพื่อสร้างรายการแบบเลื่อนลงในหน้าเว็บ “ <ตัวเลือก> ” สร้างแต่ละตัวเลือก/รายการในรายการแบบเลื่อนลง เพื่อความเข้าใจที่ดีขึ้น ให้เราทำตามตัวอย่างโค้ดด้านล่าง:
< ชั่วโมง2 > ภาษาโปรแกรม ชั่วโมง2 >
< ฉลาก สำหรับ = 'prog-อาวุธ' > เลือกอาวุธในการเขียนโปรแกรม: ฉลาก >
< เลือก รหัส = 'รายการโปรแกรม' >
< ตัวเลือก ค่า = '' > เลือกตัวเลือก ตัวเลือก >
< ตัวเลือก ค่า = 'ค++' > ภาษาซี++ ตัวเลือก >
< ตัวเลือก ค่า = '.สุทธิ' > ดอทเน็ต ตัวเลือก >
< ตัวเลือก ค่า = 'โหนด' > โหนด js ตัวเลือก >
เลือก >
ในข้อมูลโค้ดด้านบน:
- ประการแรก “ <ฉลาก> แท็ก ” ใช้เพื่อแสดงข้อมูลและถูกกำหนดด้วย “ <เลือก> ” แท็กโดยใช้ “ สำหรับ ' คุณลักษณะ.
- หลังจากนั้น “ <เลือก> แท็ก ” ใช้เพื่อสร้างสภาพแวดล้อมสำหรับรายการแบบเลื่อนลง
- ต่อไป “ <ตัวเลือก> แท็ก ” ใช้เพื่อสร้างรายการที่จะวางเป็นรายการแบบเลื่อนลง
หลังจากตั้งค่าโครงสร้างของรายการแบบเลื่อนลงแล้ว ตอนนี้ให้เราใช้สไตล์พื้นฐาน:
ฉลาก {จอแสดงผล: บล็อก;
ขอบล่าง: 5px;
}
เลือก {
ช่องว่างภายใน: 5px;
รัศมีเส้นขอบ: 5px;
ความกว้าง: 200px;
}
คำอธิบายของคุณสมบัติ CSS อธิบายไว้ด้านล่าง:
- ขั้นแรก เลือก “ ฉลาก ” แล้วกำหนดค่าของ “block” และ “5px” เป็น CSS “ แสดง ' และ ' ระยะขอบล่าง ' คุณสมบัติ.
- ต่อไป “ เลือก ” องค์ประกอบถูกเลือกและระบุค่าของ “5px”, “5px” และ “200px” ให้กับ CSS “ การขยายความ ”, “ เส้นขอบรัศมี ' และ ' ความกว้าง ” คุณสมบัติตามลำดับ คุณสมบัติเหล่านี้ใช้เพื่อปรับปรุงการมองเห็นของผู้ใช้
หลังจากดำเนินการตามตัวอย่างโค้ดข้างต้น หน้าเว็บจะมีลักษณะดังนี้:
ผลลัพธ์ด้านบนแสดงว่ารายการแบบเลื่อนลงถูกสร้างขึ้นโดยใช้ ' <ตัวเลือก> ” แท็กด้วย “ <เลือก> ” แท็ก
ตัวอย่างที่ 2: การสร้างรายการเติมข้อความอัตโนมัติ
“ <ตัวเลือก> แท็ก ” ใช้กับ “ <รายการข้อมูล> แท็ก ” เพื่อสร้างรายการเติมข้อความอัตโนมัติ ใช้ร่วมกับ “ <อินพุต> ” แท็กซึ่งเต็มไปด้วยตัวเลือกที่มีอยู่ในรายการเติมข้อความอัตโนมัติ โค้ดสำหรับสร้างรายการเติมข้อความอัตโนมัติโดยใช้ HTML แสดงในข้อมูลโค้ดด้านล่าง:
< ฉลาก สำหรับ = 'เครื่องมือโปรแกรม' > หรือ พิมพ์ เครื่องมือการเขียนโปรแกรม: ฉลาก >< ป้อนข้อมูล พิมพ์ = 'ข้อความ' รหัส = 'เครื่องมือโปรแกรม' รายการ = 'เครื่องมือ' >
< รายการข้อมูล รหัส = 'เครื่องมือ' >
< ตัวเลือก ค่า = 'ซี++' >
< ตัวเลือก ค่า = 'การประกอบ' >
< ตัวเลือก ค่า = '.สุทธิ' >
< ตัวเลือก ค่า = 'พีเอชพี' >
< ตัวเลือก ค่า = 'ทับทิม' >
< ตัวเลือก ค่า = 'สวิฟต์' >
< ตัวเลือก ค่า = 'โหนด js' >
< ตัวเลือก ค่า = 'ปฏิกิริยา' >
< ตัวเลือก ค่า = 'มองโก' >
< ตัวเลือก ค่า = 'ชวา' >
< ตัวเลือก ค่า = 'งูหลาม' >
รายการข้อมูล >
ในข้อมูลโค้ดด้านบน:
- ขั้นแรกให้เพิ่ม ' <ฉลาก> ” แท็กที่แสดงข้อความพร้อมกับองค์ประกอบ HTML
- ถัดไป ใช้ปุ่ม “ <อินพุต> ” แท็กที่ผู้ใช้กรอกด้วยตนเองหรือสามารถป้อนอัตโนมัติโดยตัวเลือกที่มีอยู่ในรายการเติมข้อความอัตโนมัติ
- หลังจากนั้นให้ใช้ “ <รายการข้อมูล> ” แท็กและตั้งค่า “ รหัส ” ค่าแอตทริบิวต์เท่ากับค่าของ “ รายการ ” แอตทริบิวต์ของ “ <อินพุต> ” แท็ก
- ถัดไป ใช้ “ <ตัวเลือก> ” ภายในแท็ก “
หลังจากดำเนินการตามส่วนย่อยของโค้ดข้างต้น หน้าเว็บจะปรากฏดังนี้:
ผลลัพธ์แสดงว่ารายการเติมข้อความอัตโนมัติถูกสร้างขึ้นโดยใช้ ' <ตัวเลือก> ” แท็กที่มีการรวมกันของ “ <รายการข้อมูล> ' และ ' <อินพุต> แท็ก
บทสรุป
“ <ตัวเลือก> แท็ก ” อนุญาตให้ผู้พัฒนาสร้างตัวเลือกสำหรับรายการตัวเลือก ซึ่งผู้ใช้สามารถเลือกตัวเลือกใดก็ได้ แท็ก “