การสร้าง Selection Box หรือ Drop Down List หรือ List Box คือการรับข้อมูลจาก List รายการที่มีให้เลือกโดยสามารถ
เลือกได้เพียงแค่หนึ่งรายการ จะใช้กรณีที่มีรายการให้เลือกมาก ๆ เช่น วันที่ เดือน ปี พ.ศ. เป็นต้น
ชื่อแท็ก | select |
ตำแหน่งแท็ก | อยู่ภายในแท็ก <form>...</form> |
รูปแบบการใช้แท็ก | <select name="ชื่อช่องกรอกข้อมูล" size="value"> ..... </select> |
แอตทริบิวต์ | name ชื่อช่องกรอกข้อมูล size จำนวนตัวเลือกที่แสดง |
ค่า value | ตัวเลข 1,2,3 |
<b>กรุณาเลือกเดือนเกิดของท่าน</b><br>
<selection name="month" size="1">
</selection>
</form>
จากตัวอย่างจะเห็นได้ว่า จะยังไม่มีตัวเลือกจะต้องทำการกำหนดตัวเลือกให้กับ Selection ด้วยแท็ก Option
การกำหนดตัวเลือกให้กับ Selection ด้วย Option
ในการใช้งาน Selection จะต้องมีการกำหนดตัวเลือก ด้วย option และมีการกำหนดค่าของตัวเลือกด้วยดังต่อไปนี้
ชื่อแท็ก | option |
ตำแหน่งแท็ก | อยู่ภายในแท็ก <select>...</select> |
รูปแบบการใช้แท็ก | <select name="ชื่อช่องกรอกข้อมูล" size="value"> <option value="value">ข้อความ </select> |
แอตทริบิวต์ | value ค่าของประจำตัวเลือก |
ค่า value | ตัวเลข 1,2,3 |
<b>กรุณาเลือกวันเกิดของท่าน</b><br>
<select name="month" size="1">
<option value="1">วันอาทิตย์<br><option value="2">วันจันทร์<br>
<option value="3">วันอังคาร<br>
<option value="4">วันพุธ<br>
<option value="5">วันพฤหัสบดี<br>
<option value="6">วันศุกร์<br>
<option value="7">วันเสาร์<br>
</select>
</form>
เมื่อกำหนดตัวเลือกด้วย option ก็จะสามารถเลือกตัวเลือกได้ เราสามารถใส่ตัวเลือกได้ตามที่ต้องการ หรือตามหัวข้อที่เราออกแบบ