Textarea trong HTML: rows, resize, maxlength và chữ mặc định

Cách tạo textarea

<textarea> là ô nhập chữ dành cho nhiều hơn một dòng: tin nhắn, bình luận, mô tả. rows đặt chiều cao hiển thị tính theo số dòng. Gõ vài dòng rồi nhấn Send:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Textarea</title>
</head>
<body>
  <form>
    <label for="msg">Message</label><br>
    <textarea id="msg" name="message" rows="4" cols="40" placeholder="What would you like to ask?"></textarea>
    <br>
    <button type="submit">Send</button>
  </form>
</body>
</html>

Có hai điểm khác với <input>: textarea cần thẻ đóng, và chữ ban đầu nằm giữa hai thẻ chứ không nằm trong thuộc tính value. name của nó được gửi đi cùng với nội dung làm giá trị, kể cả các lần xuống dòng.

Thuộc tính của textarea

Chữ mặc định nằm giữa hai thẻ

Mọi thứ giữa <textarea> và </textarea> là chữ ban đầu, giữ nguyên như khi viết: cả dấu cách, tab và xuống dòng. Chỉ một lần xuống dòng ngay sau thẻ mở bị bỏ qua. Vì vậy thụt lề là một cái bẫy:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Default text</title>
  <style>
    textarea { display: block; margin-bottom: 12px; font: inherit; }
  </style>
</head>
<body>
  <textarea rows="2">Hello, this is the default text.</textarea>

  <textarea rows="3">
    Indented to match the HTML
  </textarea>

  <p id="out"></p>
  <script>
    const [a, b] = document.querySelectorAll('textarea');
    document.querySelector('#out').textContent =
      'Lengths: ' + a.value.length + ' and ' + b.value.length +
      ' (the second adds 4 leading spaces, a line break and 2 more spaces)';
  </script>
</body>
</html>

Textarea thứ hai bắt đầu bằng bốn dấu cách và kết thúc bằng một lần xuống dòng cùng hai dấu cách nữa, tất cả người đọc đều phải tự xóa. Hãy viết chữ mặc định sát vào hai thẻ.

HTML bên trong textarea không được hiển thị thành định dạng; <b>hi</b> đặt giữa hai thẻ sẽ hiện ra đúng nguyên văn như vậy.

Chiều rộng, đổi kích thước và tự giãn

Trình duyệt cho người đọc kéo góc để đổi kích thước textarea. Thuộc tính CSS resize giới hạn việc này, còn width: 100% cùng box-sizing: border-box giúp ô nhập lấp vừa khít phần tử chứa:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Resize</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    textarea {
      display: block;
      width: 100%;
      box-sizing: border-box;
      margin: 4px 0 14px;
      padding: 8px;
      font: inherit;
      border: 2px solid #9ca3af;
      border-radius: 8px;
    }
    .vertical { resize: vertical; min-height: 60px; }
    .none { resize: none; }
    .grow { resize: none; overflow: hidden; }
  </style>
</head>
<body>
  <label>resize: vertical <textarea class="vertical" rows="2"></textarea></label>
  <label>resize: none <textarea class="none" rows="2"></textarea></label>
  <label>grows as you type <textarea class="grow" rows="2" id="grow"></textarea></label>

  <script>
    const grow = document.querySelector('#grow');
    grow.addEventListener('input', () => {
      grow.style.height = 'auto';
      const border = grow.offsetHeight - grow.clientHeight;
      grow.style.height = grow.scrollHeight + border + 'px';
    });
  </script>
</body>
</html>

Ô cuối cùng đặt lại chiều cao rồi gán nó bằng scrollHeight (chiều cao của nội dung và padding) cộng với viền, sau mỗi lần gõ phím. Gõ vài dòng vào đó: nó không bao giờ hiện thanh cuộn. resize: vertical là mặc định thân thiện nhất: câu trả lời dài có thêm chỗ, và không ai kéo được ô nhập rộng hơn bố cục.

Trình duyệt Chromium có thể tự giãn chỉ bằng CSS với field-sizing: content. Trình duyệt không hỗ trợ sẽ bỏ qua dòng này và giữ kích thước bình thường, nên thêm vào là an toàn, nhưng hãy giữ đoạn script nếu muốn mọi người đọc đều có ô nhập tự giãn.

maxlength và bộ đếm ký tự

maxlength ngừng nhận chữ khi đạt một số ký tự nhất định. Dùng riêng thì nó không cảnh báo gì, nên người đọc chỉ nhận ra khi gõ không được nữa. Một bộ đếm giải quyết chuyện này:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Character counter</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    textarea { display: block; width: 100%; box-sizing: border-box; font: inherit; padding: 8px; }
    .count { font-size: 14px; color: #4b5563; }
    .count.near { color: #b45309; font-weight: 600; }
  </style>
</head>
<body>
  <form>
    <label for="bio">Short bio</label>
    <textarea id="bio" name="bio" rows="3" maxlength="100" aria-describedby="bio-count"></textarea>
    <p class="count" id="bio-count" aria-live="polite">100 characters left</p>
    <button type="submit">Save</button>
  </form>

  <script>
    const bio = document.querySelector('#bio');
    const count = document.querySelector('#bio-count');
    bio.addEventListener('input', () => {
      const left = bio.maxLength - bio.value.length;
      count.textContent = left + ' characters left';
      count.classList.toggle('near', left <= 20);
    });
  </script>
</body>
</html>

aria-describedby khiến trình đọc màn hình đọc bộ đếm cùng với ô nhập, còn aria-live="polite" thông báo khi bộ đếm thay đổi giữa các lần gõ phím. maxlength chỉ được trình duyệt áp dụng, nên máy chủ cũng phải kiểm tra độ dài.

Xuống dòng trong dữ liệu gửi đi

Các lần xuống dòng của người đọc được gửi đi cùng nội dung. Trong dữ liệu gửi đi, mỗi lần xuống dòng trở thành một cặp ký tự về đầu dòng và xuống dòng (%0D%0A trong form mã hóa URL), đúng như hầu hết máy chủ mong đợi. Để hiển thị lại nội dung trên trang kèm các lần xuống dòng, hãy đổi chúng thành <br> khi xuất ra hoặc định kiểu phần tử với white-space: pre-line.

wrap="hard" (cần có cols) còn đi xa hơn: nó chèn thêm dấu xuống dòng ở những chỗ chữ tự xuống dòng khi hiển thị, nên máy chủ nhận được các dòng không dài quá cols ký tự. Mặc định wrap="soft" chỉ gửi những lần xuống dòng mà người đọc tự gõ.

Định kiểu textarea

Chrome và Firefox cho textarea font monospace cỡ khoảng 13px, đó là lý do textarea thường trông lạc lõng. font: inherit sửa được việc này. Nếu đổi viền, hãy giữ một kiểu focus dễ thấy:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled textarea</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 16px; }
    textarea { display: block; margin: 4px 0 12px; }
    .styled {
      font: inherit;
      padding: 10px 12px;
      border: 1px solid #9ca3af;
      border-radius: 8px;
      resize: vertical;
    }
    .styled:focus-visible { outline: 3px solid #2563eb; outline-offset: 1px; border-color: #2563eb; }
    .styled::placeholder { color: #6b7280; }
  </style>
</head>
<body>
  <label>Browser default <textarea rows="2">Monospace, small</textarea></label>
  <label>Styled <textarea class="styled" rows="2">Same font as the page</textarea></label>
</body>
</html>

Chữ placeholder nên có độ tương phản đủ để đọc; màu xám nhạt mà nhiều thiết kế dùng rất khó đọc. Và như mọi ô nhập khác, placeholder không thay được nhãn: nó biến mất ngay khi người đọc bắt đầu gõ. Nhãn được giải thích trong label trong HTML.

Lỗi thường gặp

• <textarea value="...">. Không có thuộc tính value; hãy đặt chữ giữa hai thẻ.
• Thụt lề chữ mặc định theo code HTML. Các dấu cách trở thành một phần của giá trị.
• Viết tự đóng <textarea />. Nó không phải phần tử rỗng; thiếu </textarea> thì phần còn lại của trang bị nuốt vào trong nó thành chữ.
• Không có font: inherit, nên ô nhập dùng font monospace cỡ nhỏ.
• resize: none với chiều cao cố định nhỏ. Câu trả lời dài bị nhét vào một ô cuộn bé xíu.
• Chỉ dựa vào maxlength. Hãy kiểm tra độ dài ở cả máy chủ.