วิธีระบุให้องค์ประกอบเป็น Read-only ใน HTML

เพื่อตั้งค่าองค์ประกอบเป็นอ่านอย่างเดียว (Read-only) ให้ใช้แอตทริบิวต์ readonly

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ readonly:

<!DOCTYPE html>
<html>
  <body>
    <h2>Login</h2>
    <form action="/new.php">
      <input type="text" value="Amit" name="sname" readonly><br>
      <input type="password" name="password"><br><br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

readonly vs disabled

ตัวอย่างการใช้งาน

1. แสดง ID/Username ที่ไม่ให้แก้ไข แต่ส่งไป Server

<input type="text" name="user_id" value="USR-12345" readonly>
<input type="text" name="username" value="john_doe" readonly>

2. Textarea Read-only (แสดง Terms & Conditions)

<textarea rows="10" cols="50" readonly>
Terms and Conditions:
1. ...
2. ...
</textarea>

3. Date/Number Read-only

<input type="date" name="created" value="2024-01-15" readonly>
<input type="number" name="price" value="99.99" readonly>

การจัดสไตล์ด้วย CSS

input:read-only, textarea:read-only {
  background-color: #f5f5f5;
  color: #666;
  cursor: not-allowed;
}

input:read-write, textarea:read-write {
  background-color: white;
}

JavaScript Control

const input = document.querySelector('input[name="username"]');

// ตั้งค่า readonly
input.readOnly = true;  // CamelCase ใน JS

// ตรวจสอบ
console.log(input.readOnly); // true/false

// Toggle
function toggleReadOnly() {
  input.readOnly = !input.readOnly;
}

กรณีพิเศษ: Select ไม่มี readonly

<select> ไม่มีแอตทริบิวต์ readonly ต้องใช้วิธีอื่น:

<!-- วิธี 1: disabled + hidden input ส่งค่า -->
<select name="country" disabled>
  <option value="th" selected>Thailand</option>
</select>
<input type="hidden" name="country" value="th">

<!-- วิธี 2: CSS pointer-events (ไม่ปลอดภัย 100%) -->
<select name="country" style="pointer-events: none;">...</select>

<!-- วิธี 3: JS prevent change -->
<select name="country" onchange="this.value=this.defaultValue">...</select>