/ Tip

[HTML] ซ่อน <input> ยังไงดี

ปัญหาพื้นฐานของคนที่เพิ่งทำเว็บไซต์ หรือเพิ่งหัดเขียนโค้ดมักจะเจอกับสิ่งที่เรียกว่าฟอร์มกรอกข้อมูลอย่างแทค <form> แต่วันนี้ไม่ได้จะมาพูดถึงแทคตัวนี้หรอก แต่เป็นแทคย่อยของเขา นั่นคือ <input> นั่นเอง

ขอไม่พูดถึงคุณสมบัติของ <input> ทั่วไปล่ะกัน เพราะใน W3C ก็มีสอนกันไปแล้วด้วย แต่หลายครั้งหลายคราที่เราอยากจะซ่อน <input> ไม่ให้คนเห็น จะทำยังไงกัน

คงหนีไปพ้น <input type="hidden"> แต่ว่ามันซ่อนไม่ให้เห็นเลยนี่สิ ถ้าจะเราโชว์ให้คนอื่นได้เห็นแต่ห้ามเขาแก้ไขล่ะ ต้องทำยังไงกัน หลายคำตอบคงออกมาเป็น

<input type="text" disabled>

แต่ว่าพอใช้ disable แล้วค่าของ input ตัวนี้ก็ไม่ถูกส่งไปนะสิ? ก็อยากให้เขาเห็นนะแล้วจะทำยังไงดี เราขอนำเสนอ

<input type="text" readonly>

readonly ผู้มีหน้าที่โชว์ช่อง input แต่แก้ไม่ได้และไม่ถูกเมินเวลาที่ถูกส่งค่าไปแล้วด้วย
อาจจะยังไม่เห็นภาพ ดูตัวอย่างที่

https://jsbin.com/yaruvoh/edit?html,js,console,output

ที่หน้าต่าง Console จะเห็นว่า input ที่ถูก disabled จะไม่ถูกส่งค่าออกไป แต่ readonly ก็ยังถูกส่งไปอยู่ เพราะงั้นเหมาะสำหรับแสดงค่าที่เราอยากให้เห็นแต่ไม่อยากให้ถูกแก้ไข

Note นี้สำหรับเตือนตัวเองเวลาทำงานกับพวก html ขี้หลงขี้ลืม

ghost-11