Thuộc tính readonly của <input> trong HTML

Thuộc tính readonly (chỉ đọc) của phần tử <input> trong HTML dùng để khai báo ô nhập liệu không thể chỉnh sửa bởi người dùng, nhưng vẫn có thể sao chép (copy) nội dung và gửi đi cùng form khi submit.

Khác với disabled: ô readonly vẫn focus được, vẫn gửi giá trị khi submit form, còn disabled thì không.

Ví dụ: Email hỗ trợ chỉ đọc, cho phép copy

<!DOCTYPE html>
<html>
<head>
  <title>Demo input readonly</title>
  <style>
    form { width: 70%; margin: 0 auto; text-align: center; }
    * { padding: 2px; margin: 5px; }
    input[type="button"] { border-radius: 10px; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Email chỉ đọc</legend>
      <label>
        Liên hệ: <input type="email" id="supportEmail" value="hotro@company.com" readonly onclick="showNote()">
      </label><br>
      <button type="button" onclick="copyEmail()">Copy Email</button>
      <div id="msg">Email chỉ đọc, không thể sửa</div>
    </fieldset>
  </form>
  <script>
    var msg = document.getElementById("msg");
    var email = document.getElementById("supportEmail");

    function showNote() {
      msg.textContent += ", Không thể chỉnh sửa!";
    }
    function copyEmail() {
      email.select();
      document.execCommand("copy"); // Cũ nhưng vẫn hoạt động rộng rãi
      // Hiện đại hơn: navigator.clipboard.writeText(email.value)
      msg.textContent = "Đã copy: " + email.value;
    }
  </script>
</body>
</html>

Kết quả:

1. Ban đầu: Ô email hiển thị "hotro@company.com", không gõ được.
2. Click vào ô: Thông báo "Không thể chỉnh sửa!".
3. Nhấn "Copy Email": Email được copy vào clipboard, thông báo xác nhận.

So sánh readonly vs disabled

Khi nào dùng readonly?

• Hiển thị ID, mã đơn hàng, email hỗ trợ, mã OTP đã gửi...
• Giá trị tính toán tự động (tổng tiền, thuế) mà không cho sửa.
• Trường được điền sẵn từ dữ liệu server, chỉ cho xem.

Sử dụng readonly đúng chỗ giúp tăng trải nghiệm người dùng và bảo toàn tính toàn vẹn dữ liệu form.