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

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

แอตทริบิวท์ autofocus ขององค์ประกอบ <select> ใน HTML ใช้สำหรับตั้งค่าโฟกัสให้กับรายการแบบเลื่อนลง (drop-down list) เมื่อหน้าเว็บโหลด

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

<select autofocus>

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
  <h1>โปรไฟล์</h1>
  <h2>คุณสมบัติการศึกษา</h2>
  <section>
    <h3>ปริญญาตรี</h3>
    <select autofocus>
      <option value="bca">BCA</option>
      <option value="bcom">B.COM</option>
      <option value="btech">B.TECH</option>
    </select>
  </section>
  <section>
    <h3>ปริญญาโท</h3>
    <select>
      <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>
  <section>
    <p>ทำงานที่ ABC Corporation จาก กรกฎาคม 2015 - พฤษภาคม 2019 เป็น Technical Manager</p>
  </section>
</body>
</html>

ผลลัพธ์

ในตัวอย่างข้างต้น เรามีรายการแบบเลื่อนลงสองรายการภายใต้ section ต่างๆ:

<section> <h3>ปริญญาตรี</h3> <select autofocus> <option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option> </select> </section>
<section> <h3>ปริญญาโท</h3> <select> <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>

เมื่อหน้าเว็บโหลด เราตั้งค่า autofocus ให้กับรายการแบบเลื่อนลงหนึ่งรายการโดยใช้แอตทริบิวท์ autofocus:

<select autofocus> <option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option> </select>