วิธีสร้าง Dropdown List (Select Box) ใน HTML Form

ใช้แท็ก <select> สร้าง dropdown list (select box) ให้ผู้ใช้เลือก 1 รายการ (หรือหลายรายการด้วย multiple) จากรายการ <option>

โครงสร้างพื้นฐาน

<select name="dropdown">
  <option value="value1">Display Text 1</option>
  <option value="value2" selected>Display Text 2</option>
  <option value="value3">Display Text 3</option>
</select>

Attribute ของ <select>

Attribute	คำอธิบาย
`name`	ชื่อฟิลด์ ส่งไป server (จำเป็น)
`multiple`	boolean - เลือกได้หลายรายการ (Ctrl/Cmd+click)
`size`	จำนวนรายการที่แสดง (size>1 = listbox ไม่ใช่ dropdown)
`required`	บังคับเลือก
`disabled`	ปิดการใช้งาน
`autofocus`	focus อัตโนมัติ

Attribute ของ <option>

Attribute	คำอธิบาย
`value`	ค่าที่ส่งเมื่อเลือก (default = text content)
`selected`	เลือกไว้ตั้งแต่แรก
`disabled`	ปิดรายการนี้
`label`	ข้อความแสดง (แทน text content)

ตัวอย่างเต็ม

<!DOCTYPE html>
<html>
<head>
  <title>Select Box Control</title>
</head>
<body>
  <p>Here's the list of subjects. Select any one:</p>
  <form>
    <label for="subject">Subject:</label>
    <select name="dropdown" id="subject">
      <option value="" disabled selected hidden>-- Select Subject --</option>
      <option value="arch">Computer Architecture</option>
      <option value="java">Java</option>
      <option value="math">Discrete Mathematics</option>
    </select>
  </form>
</body>
</html>

Multiple Selection

<select name="skills" multiple size="5">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="react">React</option>
  <option value="node">Node.js</option>
</select>

ผู้ใช้ต้อง Ctrl/Cmd+click เพื่อเลือกหลายตัว

Styling Limitations

<select> ยากต่อการจัดสไตล์ (browser default) สำหรับ custom dropdown ใช้ JavaScript libraries (Select2, Choices.js) หรือ <datalist>