พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน option Tag

ใน HTML5, แท็ก <option> ใช้ในการสร้างตัวเลือก (option) ภายในแท็ก <select> หรือใช้ร่วมกับ <datalist> เพื่อสร้างรายการตัวเลือกที่ผู้ใช้สามารถเลือกได้ ตัวเลือกเหล่านี้จะปรากฏเป็นเมนูดรอปดาวน์เมื่อใช้ <select> และเป็นการแนะนำตัวเลือกอัตโนมัติเมื่อใช้กับ <datalist>

รูปแบบการใช้งาน <option>

1. ใช้งานร่วมกับ <select>

ในกรณีที่มีรายการตัวเลือกและให้ผู้ใช้เลือกจากตัวเลือกเหล่านั้น เราจะใช้ <select> ครอบ <option> แต่ละตัว

HTML
<label for="cars">เลือกยี่ห้อรถ:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
  • value: เป็นค่าที่จะส่งไปในแบบฟอร์มเมื่อเลือกตัวเลือกนั้นๆ
  • ข้อความที่อยู่ใน <option>: จะแสดงให้ผู้ใช้เห็นในเมนูดรอปดาวน์

2. การกำหนดค่าเริ่มต้นที่ถูกเลือก

หากต้องการให้ตัวเลือกถูกเลือกเริ่มต้นเมื่อหน้าถูกโหลด สามารถใช้แอตทริบิวต์ selected

HTML
<select id="fruits" name="fruits">
  <option value="apple">Apple</option>
  <option value="banana" selected>Banana</option>
  <option value="orange">Orange</option>
</select>

ในตัวอย่างนี้ “Banana” จะถูกเลือกเมื่อโหลดหน้าเว็บ

3. การปิดใช้งานตัวเลือก

สามารถใช้แอตทริบิวต์ disabled เพื่อทำให้บางตัวเลือกไม่สามารถเลือกได้

HTML
<select id="cities" name="cities">
  <option value="bangkok">Bangkok</option>
  <option value="paris" disabled>Paris</option>
  <option value="newyork">New York</option>
</select>

ตัวเลือก “Paris” จะไม่สามารถเลือกได้ในตัวอย่างนี้

4. กลุ่มตัวเลือก (Optgroup)

สามารถแบ่งตัวเลือกออกเป็นกลุ่มโดยใช้แท็ก <optgroup>

HTML
<select id="vehicles" name="vehicles">
  <optgroup label="Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="Motorcycles">
    <option value="harley">Harley-Davidson</option>
    <option value="ducati">Ducati</option>
  </optgroup>
</select>

ในตัวอย่างนี้ จะแสดงกลุ่ม “Cars” และ “Motorcycles” ในเมนูดรอปดาวน์

5. ใช้งานร่วมกับ <datalist>

สามารถใช้ <datalist> เพื่อให้ผู้ใช้กรอกข้อมูลด้วยการแนะนำตัวเลือกได้

HTML
<label for="browsers">เลือกเบราว์เซอร์:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

เมื่อผู้ใช้เริ่มพิมพ์ในช่อง input ระบบจะแนะนำตัวเลือกตามรายการใน <datalist>

6. การใช้งานหลายตัวเลือก (Multiple Selections)

สามารถเปิดให้ผู้ใช้เลือกหลายตัวเลือกพร้อมกันได้โดยการเพิ่มแอตทริบิวต์ multiple ในแท็ก <select>

HTML
<select id="languages" name="languages" multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
  <option value="python">Python</option>
</select>

ตัวอย่างนี้อนุญาตให้ผู้ใช้เลือกได้หลายภาษาในการเลือกครั้งเดียว

สรุป

การใช้งานแท็ก <option> ใน HTML5 นั้นสามารถปรับเปลี่ยนรูปแบบการทำงานได้หลากหลาย ไม่ว่าจะเป็นการใช้ร่วมกับ <select> หรือ <datalist> เพื่อสร้างรายการตัวเลือกที่มีความยืดหยุ่นในรูปแบบต่างๆ ตามความต้องการของการพัฒนาเว็บไซต์

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ