การใช้งาน <select> ใน HTML5 เป็นการสร้าง “กล่องรายการตัวเลือก” (dropdown list) ให้ผู้ใช้สามารถเลือกค่าได้หนึ่งค่า (หรือหลายค่าในกรณีที่ใช้คุณสมบัติ multiple) จากรายการที่กำหนดไว้ โดยรายการแต่ละรายการจะถูกกำหนดด้วยแท็ก <option> ที่อยู่ภายในแท็ก <select> นั่นเอง
โครงสร้างพื้นฐานของ <select>
<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 listname: กำหนดชื่อที่จะส่งค่าไปยังเซิร์ฟเวอร์เมื่อทำการส่งแบบฟอร์มid: ระบุชื่อให้สามารถเชื่อมกับ<label>หรือใช้ในการควบคุมผ่าน JavaScript ได้
<option>คือรายการตัวเลือกแต่ละรายการvalue: กำหนดค่าที่จะส่งไปยังเซิร์ฟเวอร์เมื่อผู้ใช้เลือกตัวเลือกนั้น
ตัวอย่างพื้นฐาน
<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 ทำให้สามารถเลือกได้หลายค่า
<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 โดยไม่ต้องคลิกเพื่อดูทั้งหมด
<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> เพื่อจัดกลุ่มตัวเลือก
<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 เช่น
<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>
<option value="car" selected>Car</option>- การปิดใช้งาน: เราสามารถปิดใช้งานทั้ง
<select>และ<option>ได้ด้วยแอตทริบิวต์disabled
<select disabled>
<option value="option1">Option 1</option>
</select>หรือปิดใช้งานบางตัวเลือก
<option value="option1" disabled>Option 1</option>สรุป
แท็ก <select> ใน HTML5 มีความยืดหยุ่นสูง สามารถปรับแต่งเพื่อให้รองรับความต้องการต่าง ๆ เช่น การเลือกหลายตัวเลือก การจัดกลุ่มตัวเลือก และการควบคุมรูปลักษณ์ของ dropdown ให้เหมาะสมกับฟอร์มที่ใช้งาน
