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

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

แอตทริบิวท์ autocomplete ขององค์ประกอบ <input> ใช้สำหรับกำหนดว่าการเติมอัตโนมัติ (autocomplete) สำหรับ input นั้นควรเปิดหรือปิด เบราว์เซอร์จะกรอกค่าให้อัตโนมัติหาก autocomplete เปิดอยู่ ซึ่งจะเกิดขึ้นก็ต่อเมื่อผู้เคยป้อนค่าไว้มาก่อน

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

<input autocomplete="on|off">

โดยค่า on | off ใช้สำหรับกำหนดให้ autocomplete แสดงหรือไม่ แสดง on หากต้องการให้เบราว์เซอร์กรอกให้อัตโนมัติตามค่าที่ป้อนไว้ก่อนหน้า ในขณะที่ off จะไม่ให้กรอกอัตโนมัติ

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
  <h2>คะแนน</h2>
  <form action="" method="get">
    ผู้เล่น - <input type="text" name="player" autocomplete="on"><br>
    อันดับ - <input type="number" name="rank"><br>
    คะแนน - <input type="number" name="pts"><br>
    <button type="submit" value="Submit">Submit</button>
  </form>
</body>
</html>

ผลลัพธ์จะเป็นดังนี้ สมมติว่าเราเคยป้อนค่าไว้ก่อนหน้านี้ และตอนนี้เราได้ตั้งค่า autocomplete:

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

<form action="" method="get">
  ผู้เล่น - <input type="text" name="player" autocomplete="on"><br>
  อันดับ - <input type="number" name="rank"><br>
  คะแนน - <input type="number" name="pts"><br>
  <button type="submit" value="Submit">Submit</button>
</form>

เราได้ตั้งค่า autocomplete เป็น on สำหรับ input หนึ่ง:

ผู้เล่น - <input type="text" name="player" autocomplete="on">

ดังนั้น เมื่อคุณวางเคอร์เซอร์ที่ช่องป้อนข้อมูล Player คุณจะเห็นค่าที่ป้อนไว้ก่อนหน้านี้