คุณสมบัติ placeholder ของ HTML <input>

HTML แบบฟอร์ม <input>

คำแปลงและวิธีใช้

placeholder คุณสมบัตินี้กำหนดข้อความชั่วคราวที่ยาวน้อยเพื่อบรรยายค่าที่คาดว่าจะใส่ในช่องว่าง (เช่น ตัวอย่างหรือคำอธิบายสั้นๆ ของรูปแบบที่คาดว่าจะใส่)

ข้อความชั่วคราวนี้จะแสดงขึ้นเมื่อช่องว่างหลังจากที่มีการฟอกตัวอักษรหรือตัวเลขในช่องว่าง และจะหายไปเมื่อช่องว่างได้รับความสนใจ

注意：placeholder คุณสมบัตินี้ถูกใช้สำหรับชนิดการใช้งานที่นี้

  • text
  • search
  • url
  • tel
  • email
  • password

ตัวอย่าง

มีช่องว่างตัวแทนข้อความโทรศัพท์

<form action="/action_page.php">
  <label for="phone">โปรดใส่หมายเลขโทรศัพท์：</label><br><br>
  <input type="tel" id="phone" name="phone" placeholder="138-8888-8888"
  pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>
  <small>รูปแบบ: 138-8888-8888</small><br><br>
  <input type="submit">
</form>

ทดลองด้วยตัวเอง

ระบุ

<input placeholder="text">

ค่าคุณสมบัติ

ค่า คำอธิบาย
text กำหนดคำชี้แจงที่สั้นๆ ของค่าที่คาดว่าจะถูกใช้ในช่องบันทึกข้อมูล

การสนับสนุนโปรแกรมบราวเซอร์

ตัวเลขในตารางระบุเวอร์ชั่นบราวเซอร์ที่สนับสนุนคุณสมบัตินี้เต็มที่

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
10.0 10.0 4.0 5.0 11.0

หมายเหตุ：placeholder คุณสมบัติเป็นคุณสมบัติใหม่ใน HTML5

HTML แบบฟอร์ม <input>