ตัว html นี้ มันจะมี attribute ตัวนึงที่ไว้สำหรับทำพวก element block ให้สามารถแก้ไขข้อความได้ นั่นก็คือ contenteditable ซึ่งถ้าเราเอาไปเซ็ตใส่ พวก div หรือตัวอื่นๆ จะทำให้ block นั้นๆ สามารถแก้ไขเนื้อหาได้ ราวกับว่ามันเป็น input (แถวดีกว่าด้วย ตรงที่ใส่ รูปแบบได้ ก๊อปตัวหนาไปวาง ก็ได้ตัวหนา เลย)

ทีนี้ input มันก็จะมี placeholder ซึ่งคือการที่ เมื่อค่า value มันว่าง ก็จะให้แสดงข้อความนี้แทน เพื่อให้ผู้ใช้งานรู้ว่า ช่องนี้เอาไว้ทำอะไร หรือต้องกรอก อะไร ตัวอย่างแบบในรูป

ถ้าเราอยากเอามาใส่ใน div บ้างล่ะทำยังไง , ง่ายนิดเดียวครับ ใช้ css ตามนี้

[contentEditable=true]:empty:not(:focus):before {
    color: grey;
    content: attr(data-text)
}

และใน div เราก็กำหนดค่าตามนี้

<div contenteditable="true" data-text="แก้ไขชื่อหัวข้อ"></div>

จากนั้น เราก็จะได้แบบเดียวกับในรูปเด๊ะเลย , จบครับ