HTML Select Tag: คู่มือการสร้างรายการเลือก (Dropdown)

แท็ก HTML <select> สร้างรายการที่ผู้ใช้สามารถเลือกได้หนึ่งหรือหลายตัวเลือก แท็ก <select> ควรประกอบด้วยแท็ก <option> หนึ่งหรือมากกว่า ซึ่งแทนถึงตัวเลือกที่ผู้ใช้สามารถเลือกได้

กล่องเลือก (Selection boxes) เป็นส่วนสำคัญของฟอร์มเว็บหลายรูปแบบ กล่องเลือกช่วยให้รับข้อมูลจากผู้ใช้และจำกัดตัวเลือกให้อยู่ในขอบเขตที่คุณกำหนดไว้

แท็ก HTML <select> สร้างองค์ประกอบฟอร์มที่ให้รายการตัวเลือกแก่ผู้ใช้ ส่วนองค์ประกอบ <option> ระบุตัวเลือกที่ปรากฏในกล่องเลือก

บทช่วยสอนนี้จะอธิบายวิธีใช้แท็ก HTML <select> พร้อมตัวอย่างเพื่อช่วยให้คุณเริ่มใช้งานได้ทันที

HTML Forms (ฟอร์ม HTML)

ฟอร์มเป็นส่วนสำคัญของเว็บไซต์หลายแห่ง ช่วยให้รับข้อมูลจากผู้ใช้เพื่อนำไปประมวลผลบนเว็บไซต์ ตัวอย่างเช่น หากคุณออกแบบเว็บไซต์สำหรับร้านกาแฟ คุณอาจต้องการสร้างฟอร์มรับความคิดเห็นจากลูกค้า

ใน HTML แท็ก <form> ใช้ประกาศฟอร์ม จากนั้นคุณสามารถใช้องค์ประกอบ HTML เช่น <input> และ <select> เพื่อกำหนดข้อมูลที่ฟอร์มจะเก็บรวบรวม บทช่วยสอนนี้จะเน้นที่แท็ก <select> และวิธีใช้งานในฟอร์ม

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับฟอร์ม HTML โปรดอ่าน คู่มือ HTML Forms สำหรับผู้เริ่มต้น

แท็ก HTML <select>

แท็ก HTML <select> สร้างรายการที่ผู้ใช้เลือกได้หนึ่งหรือหลายตัวเลือก องค์ประกอบ <option> ระบุตัวเลือกแต่ละรายการในแท็ก <select>

แท็ก <select> สร้างฟิลด์ฟอร์มที่เมื่อคลิกจะแสดงรายการแบบดรอปดาวน์ (drop-down list) พร้อมตัวเลือกให้ผู้ใช้เลือก

ไวยากรณ์ของแท็ก <select> มีดังนี้:

<select></select>

แท็ก <select> เพียงอย่างเดียวไม่มีตัวเลือก เราต้องใช้แท็ก <option> เพื่อกำหนดตัวเลือกที่ปรากฏใน <select>

ไวยากรณ์ของแท็ก <option>:

<select>
  <option value="optionOne">Option One</option>
</select>

แท็ก <option> อยู่ภายในแท็ก <select> ในตัวอย่างนี้เรายังระบุแอตทริบิวต์ value ด้วย

แอตทริบิวต์ value ใช้เก็บค่าข้อมูลที่จะส่งไปยังเซิร์ฟเวอร์หากผู้ใช้เลือกตัวเลือกนั้น ในกรณีนี้ หากผู้ใช้เลือก Option One ค่า optionOne จะถูกส่งไปยังเซิร์ฟเวอร์

แท็ก <option> ทุกตัวควรมีแอตทริบิวต์ value ระบุไว้

แท็ก HTML <select> รองรับโดยเบราว์เซอร์สมัยใหม่ทุกตัว

ทำไมควรใช้แท็ก HTML <select>?

การใช้แท็ก <select> มีประโยชน์เมื่อคุณต้องการจำกัดค่าที่ผู้ใช้สามารถป้อนในฟิลด์ฟอร์มได้ นี่คือตัวอย่างกรณีที่ <select> อาจมีประโยชน์:

• ให้ผู้ใช้เลือกประเทศจากรายการ
• ให้ผู้ใช้เลือกสีที่มีสำหรับสินค้า
• อนุญาตให้ผู้ใช้เลือกจำนวนสินค้าที่ต้องการซื้อ (เช่น 1 ถึง 10)

ในกรณีเหล่านี้ ตัวเลือกมีจำนวนจำกัด การใช้เมนูแบบดรอปดาวน์ช่วยให้ได้คำตอบที่สอดคล้องกับโค้ดของคุณ เพราะผู้ใช้ไม่สามารถป้อนค่าใดๆ ได้ตามต้องการเหมือนช่องกรอกข้อความทั่วไป ซึ่งอาจทำให้ได้ค่าที่คุณไม่คาดคิด

ตัวอย่าง HTML <select>

สมมติเรากำลังสร้างฟอร์มเว็บสำหรับร้านเบเกอรี่ท้องถิ่น เราถูกขอให้สร้างฟอร์มสั่งขนมปัง ฟอร์มควรแสดงรายการแบบดรอปดาวน์ของขนมปังให้ผู้ใช้เลือก ตัวเลือกที่ควรแสดงมีดังนี้:

• Plain White (ขนมปังขาวธรรมดา)
• Plain Brown (ขนมปังสีน้ำตาลธรรมดา)
• Whole Grain (ขนมปังโฮลเกรน)
• Sourdough (ขนมปังซาวอร์โดว์)

โดยค่าเริ่มต้น ควรเลือก Plain White

เพื่อสร้างเมนูแบบดรอปดาวน์ HTML นี้ เราสามารถใช้โค้ดดังนี้:

<select name="breadType">
  <option value="plainWhite" selected>Plain White</option>
  <option value="plainBrown">Plain Brown</option>
  <option value="wholeGrain">Whole Grain</option>
  <option value="sourdough">Sourdough</option>
</select>

โค้ดของเราจะแสดงผลดังนี้:

ก่อนอื่น เราใช้แท็ก <select> เพื่อกำหนดรายการเลือก เราระบุแอตทริบิวต์ name ซึ่งระบุชื่อของตัวควบคุมฟอร์ม select และกำหนดค่าเป็น breadType

ต่อมา เราใช้แท็ก <option> 4 ตัว เพื่อสร้างรายการตัวเลือกที่จะนำเสนอให้ผู้ใช้ แต่ละแท็ก <option> มีแอตทริบิวต์ value ระบุไว้ แอตทริบิวต์นี้เก็บค่าของตัวเลือกที่จะส่งไปยังเซิร์ฟเวอร์เมื่อผู้ใช้ส่งฟอร์ม

แท็ก <option> ตัวแรก ซึ่งข้อความป้ายกำกับแสดง Plain White มีแอตทริบิวต์ selected ระบุไว้ ทำให้ Plain White เป็นตัวเลือกเริ่มต้นที่ถูกเลือก

เราสามารถให้ผู้ใช้เลือกหลายตัวเลือกในรายการได้โดยใช้แอตทริบิวต์ multiple:

<select name="breadType" multiple>
  <option value="plainWhite" selected="">Plain White</option>
  <option value="plainBrown">Plain Brown</option>
  <option value="wholeGrain">Whole Grain</option>
  <option value="sourdough">Sourdough</option>
</select>

แอตทริบิวต์ multiple เป็นคีย์เวิร์ด (keyword) หมายความว่าคุณไม่ต้องใช้เครื่องหมายเท่ากันเพื่อกำหนดค่าให้แอตทริบิวต์

เพื่อเลือกหลายค่า ให้กดปุ่ม Ctrl ค้างไว้ (Windows) หรือปุ่ม Cmd (Mac) ขณะคลิกตัวเลือก

แอตทริบิวต์ของแท็ก HTML <select>

แท็ก <select> มีแอตทริบิวต์ HTML เฉพาะบางอย่างที่สามารถนำมาใช้ได้ ดังนี้:

สรุป

องค์ประกอบ HTML <select> สร้างฟิลด์ฟอร์มที่แสดงรายการค่าเริ่มต้น ผู้ใช้สามารถเลือกค่าหนึ่งหรือหลายค่าจากรายการ ฟิลด์ <select> มีประโยชน์เมื่อคุณต้องการให้ผู้ใช้เลือกค่าจากรายการตัวเลือกที่กำหนดไว้ล่วงหน้า

บทช่วยสอนนี้อธิบายพร้อมตัวอย่าง วิธีใช้แท็ก <select> สร้างฟิลด์ฟอร์มแบบดรอปดาวน์ใน HTML

ต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการเขียนโปรแกรม HTML? ดู คู่มือ How to Learn HTML ซึ่งมีเคล็ดลับชั้นนำและรายการทรัพยากรเรียนรู้ช่วยสร้างความรู้ของคุณ