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

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

แอตทริบิวท์ autofocus ขององค์ประกอบ <input> ใช้สำหรับระบุว่าของ <input> ไหนจะได้รับโฟกัสเมื่อหน้าเว็บโหลด แอตทริบิวท์นี้ถูกนำมาใช้ใน HTML5

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

<input autofocus>

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
  <h2>เข้าสู่ระบบบัญชี</h2>
  <form action="" method="get">
    ID: <input type="text" name="id"><br>
    รหัสผ่าน: <input type="password" name="pwd"><br>
    วันเกิด: <input type="date" name="dob" autofocus><br>
    <button type="submit" value="Submit">Submit</button>
  </form>
</body>
</html>

ผลลัพธ์

ในตัวอย่างข้างต้น เราได้สร้างฟอร์ม:

<form action="" method="get">
  ID: <input type="text" name="id"><br>
  รหัสผ่าน: <input type="password" name="pwd"><br>
  วันเกิด: <input type="date" name="dob" autofocus><br>
  <button type="submit" value="Submit">Submit</button>
</form>

เราได้ตั้งค่า autofocus ให้กับ input ที่สาม คือ วันเกิด ดังนั้นเคอร์เซอร์จึงมองเห็นได้ที่นั่นโดยอัตโนมัติ:

วันเกิด: <input type="date" name="dob" autofocus><br>