home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

แอตทริบิวต์ autocomplete ของ <form>: ควบคุมการกรอกอัตโนมัติของเบราวเซอร์

แอตทริบิวต์ autocomplete ของ <form> คืออะไร?

แอตทริบิวต์ autocomplete ของแท็ก <form> ใช้สำห ควบคุมฟีเจอร์ Autocomplete ของเบราวเซอร์** สำหรับฟอร์มทั้งหมด (On/Off) เบราวเซอร์จะจดจำค่าที่ผู้ใช้กรอกไว้ และเสนอให้เลือกเมื่อกรอกครั้งต่อไป

ไวยากรณ์ (Syntax)

<form autocomplete="on | off">

ค่า

  • on (ค่าเริ่มต้น): เปิดใช้งาน Autocomplete เบราวเซอร์เสนอค่าที่เคยกรอก
  • off: ปิด Autocomplete เบราวเซอร์ไม่เสนอ/จดจำค่า

ตัวอย่างการใช้งาน

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

การทำงาน

  1. ผู้ใช้กรอกฟอร์มและ Submit ครั้งแรก
  2. เบราวเซอร์จดจำค่า (ขึ้นอยู่กับการตั้งค่าผู้ใช้)
  3. ครั้งต่อไปที่โหลดฟอร์มเดียวกัน/ช่องเดียวกัน → เบราวเซอร์แสดง Dropdown เสนอค่าเก่า
  4. ผู้ใช้เลือก → ช่องกรอกเติมค่าอัตโนมัติ

Autocomplete บน Input เดียว (Override Form)

<form autocomplete="on">
  <input name="username" autocomplete="on">       <-- ใช้ค่า Form (on)
  <input name="password" autocomplete="off">      <-- ปิดเฉพาะช่องรหัสผ่าน
  <input name="credit-card" autocomplete="cc-number"> <-- ระบุประเภทข้อมูลเฉพาะ
</form>

ค่า autocomplete เฉพาะเจาะจง (HTML5.1+)

ค่าความหมาย
nameชื่อเต็ม
emailอีเมล
usernameชื่อผู้ใช้
current-passwordรหัสผ่านปัจจุบัน
new-passwordรหัสผ่านใหม่ (สำหรับเปลี่ยนรหัส)
cc-numberเลขบัตรเครดิต
cc-expวันหมดอายุบัตร
cc-cscรหัส CVV
telเบอร์โทรศัพท์
address-line1ที่อยู่บรรทัด 1
bdayวันเกิด

จุดสำคัญ

  • autocomplete="off" บน <form> ปิดให้ทุกช่องในฟอร์ม
  • บางเบราวเซอร์ (Chrome) อาจละเลย off สำหรับ Password Manager
  • ใช้ autocomplete="new-password" สำหรับช่องตั้งรหัสผ่านใหม่
  • ค่าเฉพาะเจาะจง (cc-number, email, ฯลฯ) ช่วย Password Manager ทำงานแม่นยำขึ้น