TOC

This article is currently in the process of being translated into Thai (~94% done).

Forms:

Dropdown Lists

Dropdown list (กล่องรายชื่อแบบแสดงรายชื่อทั้งหมดเมื่อคลิกบนลูกศรชี้ลง) เป็นอีกทางหนึ่งที่ผู้ใช้งานสามารถเลือกได้จากตัวเลือกหลายๆตัว เราจะใช้ Dropdown lsit เมื่อไหร่? เราจะใช้เมื่อเรารู้ว่าเรามีตัวเลือกที่ใช้อยู่บ่อยๆ และผู้ใช้ต้องเลือก 1 ตัว ซึ่งจะไม่เหมือนกับ radio button

เราจะกำหนด Dropdown list ด้วย <select> element ส่วนค่าที่จะส่งให้ e-mail หรือ server เราจะใช้ตัวแปร

<form method="post">
	<select name="Icecream Flavours">
		<option value="double chocolate">Double Chocolate</option>
		<option value="vanilla">Vanilla</option>
		<option value="strawberry">Strawberry</option>
		<option value="caramel">Caramel</option>
	</select>
</form>

ถ้าเราต้องการตั้งค่าให้ Dropdown list เลือกตัวอื่นที่ไม่ใช่ตัวแรกของรายชื่อให้เป็นค่าตั้งต้น (Default) เราจะใช้ตัวแปร selected ใน HTML5 เราสามารถเขียนแบบย่อได้

<option value="strawberry" selected="selected">Strawberry</option>

เราสามารถเขียนได้ดังนี้

<form>
	<select name="Icecream Flavours">
		<option value="double chocolate">Double Chocolate</option>
		<option value="vanilla">Vanilla</option>
		<option value="strawberry" selected>Strawberry</option>
		<option value="caramel">Caramel</option>
	</select>
</form>
This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!