Placeholder text

ช่องกรอกข้อมูลที่ว่างเปล่าอาจจะทำให้ไม่แน่ใจว่าจะกรอกข้อมูลอะไรดี นักพัฒนา software เลยมีไอเดียที่จะใส่ข้อมูลในช่องกรอกข้อมูลเพื่อเป็นแนวทางหรือตัวอย่าง เราเรียกว่า placeholder text ซึ่งโดยปกติแล้วจะเป็นสีเทาอ่อน เพื่อที่จะได้รู้ว่าไม่ใช่ข้อมูลจริง

Placeholder text นั้นจริงๆแล้วไม่ใช่ validation feature แต่เป็น feature ที่พัฒนาโดย JavaScript กันมานานแล้ว ข้อความจะแสดงอยู่ในช่องกรอกข้อมูลและจะหายไปเมื่อเราพิมพ์ลงไปในช่องกรอกข้อมูล placeholder text จะปรากฎอีกทีก็ต่อเมื่อ ไม่ได้ถูก focus เป็นเวลานานๆ

การใช้ตัวแปร placeholder นั้นง่ายมาก ดังตัวอย่าง

<form>
	First name: <input type="text" name="firstname" placeholder="Jane"/> <br>
Surname: <input type="text" name="surname" placeholder="Doe"/> <br>
<input type="submit" value="Submit now" />
</form>

Browser ส่วนใหญ่จะรองรับการใช้งาน placeholder text แต่จะมี browser บางตัวที่ไม่รองรับการใช้งาน HTML5 ซึ่งมันก็จะแค่ไม่แสดงผล placeholder text แต่เราก็จะใช้วิธี polyfill ในการแก้ส่วนนี้ได้