HTML <select> แบบ

  • หน้าก่อนหน้า <section>
  • หน้าต่อไป <small>

การกำหนดและการใช้งาน

<select> องค์ประกอบนี้ใช้เพื่อสร้างรายการลงทะเบียนตัวอย่าง

<select> องค์ประกอบนี้ถูกใช้บ่อยที่สุดในฟอร์ม เพื่อรับการแสดงความคิดเห็นของผู้ใช้

หลังจากส่งฟอร์มเข้าไป ต้องใช้คุณสมบัติ name ที่จะอ้างอิงข้อมูลฟอร์ม (ถ้าละเลยใช้คุณสมบัติ name ข้อมูลในรายการลงทะเบียนตัวอย่างจะไม่ถูกส่ง)

<select> ภายในองค์ประกอบ แท็ก <option> กำหนดตัวเลือกที่สามารถใช้ในรายการลงทะเบียนตัวอย่าง

ต้องใช้คุณสมบัติ id มาเชื่อมโยงรายการลงทะเบียนตัวอย่างกับแท็ก (label)

คำเตือน:เสนอชื่อให้เข้าใจได้ทั้งหมด <label> แท็ก เพื่อได้รับประสิทธิภาพการเข้าถึงที่ดีที่สุด!

ดูเพิ่มเติมที่:

คู่มือ HTML DOM:Select วัตถุ

วิธีสอน CSS:ตั้งรูปแบบฟอร์ม

ตัวอย่าง

ตัวอย่าง 1

สร้างรายการลงทะเบียนตัวอย่างที่มีตัวเลือกสี่ตัว

<label for="cars">โปรดเลือกแบรนด์รถยนต์หนึ่ง:</label>
<select name="cars" id="cars">
  <option value="audi">ออดิ
  <option value="byd">บีเอยูดี
  <option value="geely">เจียหลี่
  <option value="volvo">โวล์ว
</select>

ลองทดลองด้วยตัวเอง

ตัวอย่าง 1

ตัวอย่าง 2 <select> ใช้ร่วมกับแท็ก <optgroup> ดังนี้:

<label for="cars">โปรดเลือกแบรนด์รถยนต์หนึ่ง:</label>
<select  name="cars" id="cars">
  <optgroup label="รถยนต์จีน">
    <option value="byd">บีเอยูดี
    <option value="geely">เจียหลี่
  </optgroup>
  <optgroup label="รถยนต์เยอรมัน">
    <option value="mercedes">เมอเรซ
    <option value="audi">ออดิ
  </optgroup>
</select>

ลองทดลองด้วยตัวเอง

คุณสมบัติ

คุณสมบัติ ค่า คำอธิบาย
autofocus autofocus กำหนดที่รายการลงทะเบียนตัวอย่างควรได้รับความสนใจอัตโนมัติเมื่อหน้าเว็บโหลด
disabled disabled กำหนดที่ควรปิดการใช้งานรายการลงทะเบียนตัวอย่าง
form รหัส id ของฟอร์ม กำหนดรายการลงทะเบียนที่เกี่ยวข้องกับรายการลงทะเบียนตัวอย่าง
multiple multiple กำหนดที่สามารถเลือกหลายตัวเลือกในครั้งเดียว
name ชื่อ กำหนดชื่อของรายการตัวเลือก
required required กำหนดให้ผู้ใช้ต้องเลือกค่าหนึ่งก่อนที่จะส่งฟอร์ม
size ตัวเลข กำหนดจำนวนตัวเลขที่เห็นได้ในรายการตัวเลือก

รายการนิสัยเหตุโลกความ

<select> แบบภาพยังสนับสนุน รายการนิสัยเหตุโลกความ.

รายการนิสัยเหตุ

<select> แบบภาพยังสนับสนุน รายการนิสัยเหตุใน HTML.

การตั้งค่า CSS ปกติ

ไม่มี

การสนับสนุนโปรแกรมน่านฝึก

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน
  • หน้าก่อนหน้า <section>
  • หน้าต่อไป <small>