วิธาใช้แอตทริบิวต์ Placeholder ใน HTML

บทนำ

แอตทริบิวต์ placeholder แสดงข้อความแนะนำ (Hint) ในช่องกรอก ก่อนที่ผู้ใช้จะพิมพ์ จะหายเมื่อเริ่มพิมพ์

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
  <body>
    <h2>สมัครสมาชิก</h2>
    <form action="/new.php">
      <input type="text" placeholder="ชื่อผู้ใช้" name="name" /><br>
      <input type="password" placeholder="รหัสผ่าน" name="password" /><br><br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

ใช้ได้กับ

• <input>: text, search, url, tel, email, password, number
• <textarea>

Placeholder vs Label

แนวทางปฏิบัติที่ดี

• ใช้ Label + Placeholder ร่วมกัน
• Placeholder ให้เป็น ตัวอย่างรูปแบบ (เช่น "08x-xxx-xxxx") ไม่ใช่ Label
• สีสำหรับ Placeholder: ::placeholder { color: #999; }

CSS Styling

input::placeholder { color: #999; font-style: italic; }
input:focus::placeholder { color: #ccc; } /* จางเมื่อโฟกัส */