Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

แอตทริบิวต์ disabled ของ HTML <textarea>

แอตทริบิวต์ 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:

คุณสมบัติdisabledreadonly
แก้ไขได้ไหมไม่ได้ไม่ได้
เลือกข้อความได้ไหมไม่ได้ได้
โฟกัสได้ไหมไม่ได้ได้
ส่งค่ากับฟอร์มไม่ส่งส่ง
รูปลักษณ์สีเทา mutedปกติ

ใช้ disabled เมื่อ: ไม่อยากให้ผู้ใช้สัมผัส textarea เลย (เช่น แสดงเงื่อนไขที่ยอมรับแล้ว)

ใช้ readonly เมื่อ: อยากให้ผู้ใช้อ่าน/คัดลอกได้ แต่อยากส่งค่าไปเซิร์ฟเวอร์ด้วย