Thuộc tính placeholder của Textarea trong HTML DOM

Thuộc tính placeholder của đối tượng HTMLTextAreaElement cho phép **lấy hoặc đặt** văn bản gợi ý (hiển thị mờ) khi textarea **rỗng** và **chưa focus**. Placeholder biến mất khi user bắt đầu gõ hoặc focus. Không thay thế cho <label>.

Cú pháp

// Lấy placeholder
var ph = textarea.placeholder;

// Đặt placeholder
textarea.placeholder = "Gợi ý mới...";

Ví dụ: Đọc và hiển thị placeholder

<!DOCTYPE html>
<html>
<style>
  body { color: #000; background: lightseagreen; height: 100vh; }
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; }
  .show { margin: 1rem 0; font-size: 1.5rem; }

<body>
  <h1>Demo: textarea.placeholder</h1>
  <textarea placeholder="Hãy nhập phản hồi của bạn tại đây..." rows="6" cols="40"></textarea>
  <button onclick="showPlaceholder()" class="btn">Hiện placeholder</button>
  <div class="show" id="result"></div>
  <script>
    function showPlaceholder() {
      document.getElementById('result').textContent = "placeholder = '" + document.querySelector("textarea").placeholder + "'";
    }
  </script>
</body>
</html>

Kết quả:

Nhấn nút → Hiển thị: placeholder = 'Hãy nhập phản hồi của bạn tại đây...'

Lưu ý quan trọng

• Không thay thế <label>: Placeholder biến mất khi gõ → user quên mục đích ô nhập. Luôn dùng <label> (có thể ẩn bằng CSS visually-hidden).
• Không chứa thông tin quan trọng: Ví dụ sai: placeholder="Định dạng: DD/MM/YYYY" → đúng: <label>Ngày sinh (DD/MM/YYYY)</label>.
• Màu sắc: Mặc định xám nhạt. Tùy chỉnh bằng CSS:

::placeholder { color: #999; opacity: 1; } /* Firefox cần opacity:1 */
:placeholder-shown { border-color: #ccc; } /* Trạng thái đang hiện placeholder */

• Độ dài: Nên ngắn gọn (< 100 ký tự), không xuống dòng.
• Đổi động: Có thể thay placeholder qua JS theo ngữ cảnh (ví dụ: đổi gợi ý khi chọn loại form khác).

Placeholder vs defaultValue vs value