แอตทริบิวท์ size ของ <select> ใน HTML

แอตทริบิวท์ size ของ <select> ใน HTML

แอตทริบิวท์ size ขององค์ประกอบ <select> ใช้สำหรับตั้งค่าจำนวนรายการที่มองเห็นได้จากรายการแบบเลื่อนลง (drop-down list) แถบเลื่อน (scrollbar) จะถูกเพิ่มเข้ามาหาก size ตั้งค่ามากกว่า 1

รูปแบบการใช้งานมีดังนี้:

<select size="num">

โดย num คือจำนวนรายการที่มองเห็นได้ในรายการแบบเลื่อนลง

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
  <h1>โปรไฟล์ผู้สมัคร</h1>
  <p>รายละเอียดต่อไปนี้ที่ผู้สมัครต้องส่ง:</p>
  <h2>คุณสมบัติการศึกษา</h2>
  <form action="">
    <section>
      <h3>ปริญญาตรี</h3>
      <select size="2">
        <option value="bca">BCA</option>
        <option value="bcom">B.COM</option>
        <option value="btech">B.TECH</option>
        <option value="btech">B.SC</option>
      </select>
    </section>
    <section>
      <h3>ปริญญาโท</h3>
      <select size="2">
        <option value="mca">MCA</option>
        <option value="mcom">M.COM</option>
        <option value="mtech">M.TECH</option>
        <option value="msc">M.Sc</option>
      </select>
    </section><br>
    <input type="submit" value="ถัดไป">
  </form>
</body>
</html>

ผลลัพธ์

ในตัวอย่างข้างต้น เราได้ตั้งค่ารายการแบบเลื่อนลงสองรายการ:

<section> <h3>ปริญญาตรี</h3> <select size="2"> <option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option> <option value="btech">B.SC</option> </select> </section> <section> <h3>ปริญญาโท</h3> <select size="2"> <option value="mca">MCA</option> <option value="mcom">M.COM</option> <option value="mtech">M.TECH</option> <option value="msc">M.Sc</option> </select> </section>

เราได้ตั้งค่ารายการแบบเลื่อนลงสองรายการข้างต้นด้วยแอตทริบิวท์ size ที่อนุญาตให้ตั้งค่าจำนวนรายการที่มองเห็นได้:

<select size="2">