วิธีรับข้อมูลรหัสผ่าน (Password Input) ใน HTML Form

ใช้ <input type="password"> สำหรับรับรหัสผ่าน จะแสดงเป็นจุด (●) หรือ asterisk (*) แทนตัวอักษรจริง

รูปแบบพื้นฐาน

<label>
  Password:
  <input type="password" name="password" id="password">
</label>

ตัวอย่างเต็ม

<!DOCTYPE html>
<html>
<head>
  <title>HTML Forms</title>
</head>
<body>
  <p>Add your details:</p>
  <form>
    <label>Student Username:<br>
      <input type="text" name="name" id="username" autocomplete="username">
    </label><br>
    <label>Password:<br>
      <input type="password" name="password" id="password" autocomplete="current-password">
    </label><br>
    <button type="submit">Login</button>
  </form>
</body>
</html>

Attribute สำคัญ

Attribute	คำอธิบาย
`name`	ชื่อฟิลด์ ส่งไป server
`id`	เชื่อมกับ label, ใช้ใน JS/CSS
`autocomplete`	`current-password` (login), `new-password` (register/change)
`required`	บังคับกรอก
`minlength`/`maxlength`	ความยาวขั้นต่ำ/สูงสุด
`pattern`	Regex validation (เช่น `^(?=.[A-Za-z])(?=.\d)[A-Za-z\d]{8,}$`)
`placeholder`	ข้อความแนะนำ (ไม่แทน label)

Security Best Practices

ใช้ HTTPS เสมอ (password ส่งแบบ plain text ถ้าไม่ใช่ HTTPS)
ไม่ใส่ value attribute ใน password field
ใช้ autocomplete="new-password" สำหรับฟอร์มสมัคร/เปลี่ยนรหัส
แสดง strength meter ด้วย JavaScript
เพิ่ม inputmode="text" สำหรับ virtual keyboard

Show/Hide Password Toggle (JS)

const toggle = document.getElementById('toggle');
const pwd = document.getElementById('password');
toggle.addEventListener('click', () => {
  pwd.type = pwd.type === 'password' ? 'text' : 'password';
});