HTML <select>แท็ก
ตัวอย่าง
สร้างรายการดรอปดาวน์ด้วยสี่ตัวเลือก:
<label for="cars">Choose a car:</label>
<select
name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
องค์ประกอบ<select>นี้ใช้เพื่อสร้างรายการแบบหล่นลง
องค์ประกอบ<select>นี้มักใช้ในแบบฟอร์ม เพื่อรวบรวมอินพุตของผู้ใช้
จำเป็นต้อง ใช้nameแอตทริบิวต์เพื่ออ้างอิงข้อมูลแบบฟอร์มหลังจากส่งแบบฟอร์ม (หากคุณละเว้น
nameแอตทริบิวต์ จะไม่มีการส่งข้อมูลจากรายการดรอปดาวน์)
จำเป็นต้อง ใช้idแอตทริบิวต์เพื่อเชื่อมโยงรายการดรอปดาวน์กับป้ายกำกับ
แท็ ก<option>ภายใน<select>องค์ประกอบกำหนดตัวเลือกที่มีอยู่ในรายการแบบเลื่อนลง
เคล็ดลับ:เพิ่ม แท็ก <label> เสมอ เพื่อแนวทางปฏิบัติด้านการเข้าถึงที่ดีที่สุด!
รองรับเบราว์เซอร์
| Element | |||||
|---|---|---|---|---|---|
| <select> | Yes | Yes | Yes | Yes | Yes |
คุณลักษณะ
| Attribute | Value | Description |
|---|---|---|
| autofocus | autofocus | Specifies that the drop-down list should automatically get focus when the page loads |
| disabled | disabled | Specifies that a drop-down list should be disabled |
| form | form_id | Defines which form the drop-down list belongs to |
| multiple | multiple | Specifies that multiple options can be selected at once |
| name | name | Defines a name for the drop-down list |
| required | required | Specifies that the user is required to select a value before submitting the form |
| size | number | Defines the number of visible options in a drop-down list |
คุณสมบัติสากล
แท็ ก<select>ยังสนับสนุน Global Attributes ในHTML
คุณสมบัติของเหตุการณ์
แท็ ก<select>ยังสนับสนุนแอตทริบิวต์เหตุการณ์ใน HTML
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ใช้ <select> กับ <optgroup> แท็ก:
<label for="cars">Choose a car:</label>
<select
name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
หน้าที่เกี่ยวข้อง
การอ้างอิง HTML DOM: เลือก Object
กวดวิชา CSS: แบบฟอร์มการจัดแต่งทรงผม
การตั้งค่า CSS เริ่มต้น
ไม่มี.