คุณสมบัติ HTML DOM Input Password placeholder

คุณสมบัติ placeholder ของ input type="password" ใช้สำหรับตั้งค่าหรือดึงค่าแอตทริบิวต์ placeholder ของช่องกรอกรหัสผ่าน คุณสมบัตินี้แสดงข้อความแนะนำ (hint) สีเทา ภายในช่องกรอก ก่อนที่ผู้ใช้จะพิมพ์อะไรสักอย่าง ข้อความ placeholder จะ ไม่ถูกส่งไปกับฟอร์ม ต่างจากคุณสมบัติ value

ไวยากรณ์ (Syntax)

การตั้งค่า placeholder:

passwordObject.placeholder = text

text คือข้อความแนะนำที่จะแสดงในช่องรหัสผ่าน

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

<!DOCTYPE html>
<html>
<body>
<h1>คุณสมบัติ placeholder ของ password</h1>
รหัสผ่าน: <input type="password" id="PASS1" placeholder="....">
<p>คลิกปุ่มด้านล่างเพื่อเปลี่ยนข้อความ placeholder</p>
<button onclick="changeHolder()">เปลี่ยน</button>
<script>
  function changeHolder() {
    document.getElementById("PASS1").placeholder = "กรอกรหัสผ่านที่นี่..";
  }
</script>
</body>
</html>

ผลลัพธ์

เริ่มต้น: ช่องรหัสผ่านแสดง "...." เป็น placeholder

หลังคลิกปุ่ม "เปลี่ยน": Placeholder เปลี่ยนเป็น "กรอกรหัสผ่านที่นี่.."

คำอธิบายโค้ด

1. สร้างช่องกรอกรหัสผ่านพร้อม id="PASS1" และ placeholder="...."
2. สร้างปุ่มที่เรียกฟังก์ชัน changeHolder() เมื่อคลิก
3. ฟังก์ชัน changeHolder() ใช้ getElementById() เพื่อเข้าถึงช่องรหัสผ่าน แล้วตั้งค่า placeholder ใหม่

เคล็ดลับ: Placeholder ควรใช้เป็นคำแนะนำสั้นๆ ไม่ควรใช้แทน <label> เพื่อความเข้าถึงได้ (accessibility)