แอตทริบิวท์ placeholder ของ <input> ใน HTML

แอตทริบิวท์ placeholder ของ <input> ใน HTML

แอตทริบิวท์ placeholder ขององค์ประกอบ <input> ใช้สำหรับตั้งค่าคำใบ้ (hint) สำหรับ input ที่จะให้คำอธิบายสั้นๆ เกี่ยวกับสิ่งที่คาดหวังใน input นั้นๆ แอตทริบิวท์นี้ทำงานกับประเภท input ต่อไปนี้: text, url, search, email, password และ tel ถูกนำมาใช้ใน HTML5

รูปแบบการใช้งานมีดังนี้:

<input placeholder="placeholder_text">

โดย placeholder_text คือคำใบ้สั้นๆ ที่จะมองเห็นได้เมื่อผู้ใช้เข้าชมหน้าเว็บ

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
  <h2>สมัครสมาชิก</h2>
  <form action="" method="get">
    ID - <input type="text" name="id" placeholder="ป้อน UserId ที่นี่..."><br>
    รหัสผ่าน - <input type="password" name="pwd" placeholder="ป้อนรหัสผ่านที่นี่..."><br>
    วันเกิด - <input type="date" name="dob"><br>
    โทรศัพท์ - <input type="tel" name="tel" placeholder="ป้อนเบอร์มือถือที่นี่..."><br>
    อีเมล - <input type="email" name="email" placeholder="ป้อนอีเมลที่นี่..."><br><br>
    <button type="submit" value="Submit">Submit</button>
  </form>
</body>
</html>

ผลลัพธ์

ในตัวอย่างข้างต้น เรามีฟอร์มพร้อมฟิลด์บางส่วน:

<form action="" method="get">
  ID - <input type="text" name="id" placeholder="ป้อน UserId ที่นี่..."><br>
  รหัสผ่าน - <input type="password" name="pwd" placeholder="ป้อนรหัสผ่านที่นี่..."><br>
  วันเกิด - <input type="date" name="dob"><br>
  โทรศัพท์ - <input type="tel" name="tel" placeholder="ป้อนเบอร์มือถือที่นี่..."><br>
  อีเมล - <input type="email" name="email" placeholder="ป้อนอีเมลที่นี่..."><br><br>
  <button type="submit" value="Submit">Submit</button>
</form>

Placeholder ถูกตั้งค่าสำหรับทุกฟิลด์ เช่น:

<input type="password" name="pwd" placeholder="ป้อนรหัสผ่านที่นี่...">

เพียงใช้แอตทริบิวท์ placeholder และตั้งค่าคำใบ้สั้นๆ:

placeholder="ป้อนรหัสผ่านที่นี่..."