คุณสมบัติ name ของ Input Password ใน HTML DOM

คุณสมบัติ name ของ Input Password ใน HTML DOM ใช้สำหรับตั้งค่าหรือคืนค่าแอตทริบิวต์ name ของช่องป้อนรหัสผ่าน แอตทริบิวต์ name ช่วยระบุข้อมูลฟอร์มหลังส่งไปยังเซิร์ฟเวอร์ และ JavaScript ใช้ name เพื่ออ้างอิงองค์ประกอบฟอร์มเพื่อจัดการต่อ

ไวยากรณ์ (Syntax)

การตั้งค่าคุณสมบัติ name:

passwordObject.name = name

name ระบุชื่อของช่องรหัสผ่าน

ตัวอย่าง

ตัวอย่างการเปลี่ยนชื่อช่องรหัสผ่านแบบไดนามิก:

<!DOCTYPE html>
<html>
<body>
<h1>คุณสมบัติ name ของ Input Password</h1>
Password: <input type="password" id="PASS" name="passW">
<p>คลิกปุ่มด้านล่างเพื่อเปลี่ยนชื่อช่องรหัสผ่าน</p>
<button onclick="changeName()">CHANGE NAME</button>
<p id="Sample"></p>
<script>
  function changeName() {
    document.getElementById("PASS").name = "NEW_PASS";
    document.getElementById("Sample").innerHTML = "ชื่อช่องรหัสผ่านเปลี่ยนเป็น NEW_PASS แล้ว";
  }
</script>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บจะแสดงช่องรหัสผ่านชื่อ "passW" และปุ่ม "CHANGE NAME"

เมื่อคลิกปุ่ม "CHANGE NAME" จะแสดง "ชื่อช่องรหัสผ่านเปลี่ยนเป็น NEW_PASS แล้ว"

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

• สร้างช่องรหัสผ่าน id="PASS" มี name="passW"
• สร้างปุ่ม "CHANGE NAME" เรียกใช้ changeName() เมื่อคลิก
• ฟังก์ชัน changeName() ดึงช่องรหัสผ่านด้วย getElementById("PASS") ตั้งค่า .name = "NEW_PASS"
• แสดงข้อความยืนยันในย่อหน้า id="Sample"

หมายเหตุ: ในโค้ดตัวอย่างเดิมมีข้อผิดพลาดเขียน maxLength=”5” แทน name="passW" ได้แก้ไขแล้ว