แอตทริบิวต์ disabled ขององค์ประกอบ <textarea> ใช้สำหรับ ปิดใช้งาน textarea หลังปิดใช้งานแล้ว เลือกข้อความไม่ได้, พิมพ์ไม่ได้, โฟกัสไม่ได้ และ ค่าไม่ถูกส่งไปกับฟอร์ม
ไวยากรณ์ (Syntax)
<textarea disabled>
ตัวอย่างการใช้งาน
<!DOCTYPE html> <html> <body> <h2>รายละเอียดผู้สมัคร</h2> ชื่อ: <input type="text" value="David"><br> รหัส: <input type="number" value="007"><br> <p>คุณวุฒิการศึกษา (ปริญญาตรี)</p> <select> <option value="bca">B.Tech</option> <option value="btech">BCA</option> <option value="bcom">B.COM</option> <option value="bsc">B.SC</option> <option value="bba">BBA</option> </select> <p>คุณวุฒิการศึกษา (ปริญญาโท)</p> <select> <option value="mca">MCA</option> <option value="mtech">M.Tech</option> <option value="mcom">M.COM</option> <option value="msc">M.SC</option> </select><br> <p>ข้อมูลเพิ่มเติม:</p> <textarea rows="5" cols="30" disabled> คุณต้องนำใบรับรองประกอบคุณวุฒิที่ระบุข้างมาด้วย </textarea> </body> </html>
ผลลัพธ์
Textarea แสดงข้อความแนะนำ แต่เป็นสีเทาและ แก้ไข/เลือก/โฟกัส ไม่ได้
คำอธิบายโค้ด
- มี dropdown 2 กลุ่ม (ปริญญาตรี/โท) และ textarea
<textarea rows="5" cols="30" disabled>...</textarea>— disabled attribute ทำให้ textarea อ่านอย่างเดียว
ความแตกต่าง disabled vs readonly สำหรับ textarea:
| คุณสมบัติ | disabled | readonly |
|---|---|---|
| แก้ไขได้ไหม | ไม่ได้ | ไม่ได้ |
| เลือกข้อความได้ไหม | ไม่ได้ | ได้ |
| โฟกัสได้ไหม | ไม่ได้ | ได้ |
| ส่งค่ากับฟอร์ม | ไม่ส่ง | ส่ง |
| รูปลักษณ์ | สีเทา muted | ปกติ |
ใช้ disabled เมื่อ: ไม่อยากให้ผู้ใช้สัมผัส textarea เลย (เช่น แสดงเงื่อนไขที่ยอมรับแล้ว)
ใช้ readonly เมื่อ: อยากให้ผู้ใช้อ่าน/คัดลอกได้ แต่อยากส่งค่าไปเซิร์ฟเวอร์ด้วย