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

การใช้งาน <select> ใน HTML5 เป็นการสร้าง “กล่องรายการตัวเลือก” (dropdown list) ให้ผู้ใช้สามารถเลือกค่าได้หนึ่งค่า (หรือหลายค่าในกรณีที่ใช้คุณสมบัติ multiple) จากรายการที่กำหนดไว้ โดยรายการแต่ละรายการจะถูกกำหนดด้วยแท็ก <option> ที่อยู่ภายในแท็ก <select> นั่นเอง

โครงสร้างพื้นฐานของ <select>

HTML
<label for="choices">Choose an option:</label>
<select id="choices" name="choices">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>
  • <label> ใช้เพื่อเชื่อมโยงกับ <select> ผ่านแอตทริบิวต์ for ที่ต้องมีค่าเท่ากับ id ของ <select>
  • <select> คือแท็กที่ใช้สร้าง dropdown list
    • name: กำหนดชื่อที่จะส่งค่าไปยังเซิร์ฟเวอร์เมื่อทำการส่งแบบฟอร์ม
    • id: ระบุชื่อให้สามารถเชื่อมกับ <label> หรือใช้ในการควบคุมผ่าน JavaScript ได้
  • <option> คือรายการตัวเลือกแต่ละรายการ
    • value: กำหนดค่าที่จะส่งไปยังเซิร์ฟเวอร์เมื่อผู้ใช้เลือกตัวเลือกนั้น

ตัวอย่างพื้นฐาน

HTML
<form>
  <label for="cars">Choose a car:</label>
  <select id="cars" name="car">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</form>

คุณสมบัติ multiple

คุณสมบัติ multiple ทำให้สามารถเลือกได้หลายค่า

HTML
<form>
  <label for="fruits">Choose your favorite fruits:</label>
  <select id="fruits" name="fruits" multiple>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
    <option value="mango">Mango</option>
  </select>
</form>

ในกรณีนี้ ผู้ใช้สามารถกดปุ่ม Ctrl (หรือ Command บน Mac) เพื่อเลือกหลายรายการพร้อมกัน

การใช้งาน size

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

HTML
<form>
  <label for="numbers">Choose a number:</label>
  <select id="numbers" name="numbers" size="3">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
    <option value="four">Four</option>
    <option value="five">Five</option>
  </select>
</form>

แท็ก <select> นี้จะทำให้แสดงรายการตัวเลือกแบบเป็นกล่องโดยมีจำนวน 3 รายการที่แสดงพร้อมกัน

การใช้ optgroup

คุณสามารถใช้ <optgroup> เพื่อจัดกลุ่มตัวเลือก

HTML
<form>
  <label for="food">Choose a food item:</label>
  <select id="food" name="food">
    <optgroup label="Fruits">
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
    </optgroup>
    <optgroup label="Vegetables">
      <option value="carrot">Carrot</option>
      <option value="broccoli">Broccoli</option>
    </optgroup>
  </select>
</form>

ในตัวอย่างนี้ ตัวเลือกจะถูกจัดเป็นกลุ่มให้กับผู้ใช้ ซึ่งจะทำให้ง่ายต่อการเลือกสิ่งที่ต้องการ

การใช้งานร่วมกับฟอร์ม

ค่าที่เลือกใน <select> จะถูกส่งไปพร้อมกับฟอร์มเมื่อทำการ submit เช่น

HTML
<form action="/submit" method="post">
  <label for="transport">Choose your transport:</label>
  <select id="transport" name="transport">
    <option value="bike">Bike</option>
    <option value="car">Car</option>
    <option value="bus">Bus</option>
  </select>
  <input type="submit" value="Submit">
</form>

ในตัวอย่างนี้ เมื่อกดปุ่ม “Submit” ค่าที่เลือกจาก <select> จะถูกส่งไปที่เซิร์ฟเวอร์ผ่าน HTTP POST

การปรับแต่งเพิ่มเติม

  • การกำหนดค่าเริ่มต้น: เราสามารถกำหนดค่าเริ่มต้นที่ถูกเลือกได้โดยใส่แอตทริบิวต์ selected ใน <option>
HTML
<option value="car" selected>Car</option>
  • การปิดใช้งาน: เราสามารถปิดใช้งานทั้ง <select> และ <option> ได้ด้วยแอตทริบิวต์ disabled
HTML
<select disabled>
  <option value="option1">Option 1</option>
</select>

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

HTML
<option value="option1" disabled>Option 1</option>

สรุป

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

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