แอตทริบิวต์ tabindex ใน HTML

แอตทริบิวต์ tabindex ใน HTML ใช้กำหนดลำดับการนำทางด้วยแท็บ (Tab order) ขององค์ประกอบในเอกสาร HTML นี่คือแอตทริบิวต์สากล (global attribute) สามารถใช้กับองค์ประกอบ HTML ใดๆ ก็ได้

ไวยากรณ์

<tagname tabindex="number"></tagname>

ตัวอย่าง

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    text-align: center;
  }
  p {
    font-size: 1.2rem;
  }
</style>
<body>
<h1>แอตทริบิวต์ tabindex ของ HTML</h1>
<p tabindex="5">ฉันคือพารากราฟ</p>
<p tabindex="4">ฉันคือพารากราฟ</p>
<p tabindex="3">ฉันคือพารากราฟ</p>
<p tabindex="2">ฉันคือพารากราฟ</p>
<p tabindex="1">ฉันคือพารากราฟ</p>
<p>ตอนนี้ลองนำทางผ่านพารากราฟด้วยปุ่ม Tab</p>
</body>
</html>

ผลลัพธ์

แสดงพารากราฟ 5 บรรทัด ที่มี tabindex 5 ถึง 1 ตามลำดับ

ลองกดปุ่ม Tab เพื่อนำทางผ่านพารากราฟ จะกระโดดตามลำดับ tabindex