Thẻ textarea trong HTML: Hướng dẫn toàn tập kèm ví dụ

Khi xây dựng một form liên hệ hay một khu vực bình luận, bạn chắc chắn cần một ô nhập liệu cho phép người dùng viết nhiều dòng. Đó chính là lúc thẻ textarea trong HTML phát huy sức mạnh. Đây là một thành phần không thể thiếu trong các biểu mẫu web. Bài viết này sẽ là hướng dẫn toàn tập, giúp bạn tìm hiểu mọi thứ về thẻ textarea, từ cú pháp cơ bản đến các thuộc tính quan trọng và cách tùy biến với CSS.

Giới thiệu thẻ textarea trong HTML

Để bắt đầu, chúng ta hãy cùng làm quen với nhân vật chính của ngày hôm nay. Việc hiểu rõ định nghĩa và chức năng sẽ giúp bạn biết chính xác khi nào nên sử dụng thẻ này.

Thẻ textarea là gì và dùng để làm gì?

Thẻ <textarea> trong HTML được dùng để tạo ra một vùng nhập văn bản đa dòng (multi-line text input). Hãy tưởng tượng nó như một cuốn sổ tay nhỏ ngay trên trang web của bạn.

Không giống như thẻ <input type="text"> chỉ cho phép nhập trên một dòng duy nhất, <textarea> cho phép người dùng nhập vào một đoạn văn bản dài, xuống dòng thoải mái. Đây là lựa chọn lý tưởng cho các trường hợp như:

• Khung soạn thảo bình luận, nhận xét.
• Ô nhập nội dung trong form liên hệ.
• Phần mô tả chi tiết sản phẩm cho người bán hàng.
• Một trình soạn thảo code đơn giản.

Cú pháp cơ bản và ví dụ

Cú pháp của thẻ <textarea> rất đơn giản. Nó bao gồm một thẻ mở <textarea> và một thẻ đóng </textarea>. Nội dung bạn đặt ở giữa hai thẻ này sẽ trở thành giá trị mặc định của ô nhập liệu.

Dưới đây là một ví dụ đơn giản nhất:

<form action="/submit-action">
  <label for="my-comment">Bình luận của bạn:</label><br>
  <textarea id="my-comment" name="comment">
    Đây là nội dung mặc định.
  </textarea><br>
  <input type="submit" value="Gửi">
</form>

Trong ví dụ trên, chúng ta đã tạo một ô nhập liệu với nhãn là “Bình luận của bạn”. Rất dễ phải không nào? Bây giờ, hãy cùng đi sâu hơn vào các thuộc tính để tùy biến nó nhé.

Phân tích các thuộc tính quan trọng nhất của thẻ textarea

Sức mạnh thực sự của thẻ <textarea> nằm ở các thuộc tính đi kèm. Chúng cho phép bạn kiểm soát kích thước, hành vi và dữ liệu của ô nhập liệu. Dưới đây là những thuộc tính bạn chắc chắn sẽ dùng thường xuyên.

Thuộc tính name

Thuộc tính name cực kỳ quan trọng khi bạn làm việc với textarea trong form HTML. Nó hoạt động như một cái tên định danh. Khi người dùng nhấn nút gửi (submit) form, dữ liệu trong ô textarea sẽ được gửi lên máy chủ cùng với cái tên này.

Ví dụ: <textarea name="user-feedback"></textarea>. Máy chủ sẽ nhận được một cặp dữ liệu dạng user-feedback=nội dung người dùng nhập.

Thuộc tính rows và cols

Bạn muốn ô nhập liệu to hay nhỏ? Hai thuộc tính rows và cols sẽ giúp bạn điều này.

• rows: Quy định số hàng (chiều cao) hiển thị ban đầu.
• cols: Quy định số cột (chiều rộng) hiển thị ban đầu.

Lưu ý rằng đây chỉ là kích thước hiển thị, không phải giới hạn nội dung. Người dùng vẫn có thể nhập nhiều hơn kích thước này và thanh cuộn sẽ xuất hiện.

<textarea rows="5" cols="30">
  Ô này có chiều cao 5 hàng và chiều rộng 30 cột.
</textarea>

Thuộc tính placeholder

Thuộc tính placeholder trong textarea dùng để hiển thị một đoạn văn bản gợi ý ngắn. Văn bản này sẽ tự động biến mất ngay khi người dùng bắt đầu gõ chữ. Đây là một cách tuyệt vời để hướng dẫn người dùng nên nhập gì.

<textarea placeholder="Hãy chia sẻ cảm nhận của bạn ở đây..."></textarea>

Thuộc tính maxlength

Đôi khi bạn muốn giới hạn độ dài nội dung mà người dùng có thể nhập. Thuộc tính maxlength cho phép bạn đặt ra một giới hạn ký tự tối đa. Trình duyệt sẽ tự động chặn người dùng nhập thêm khi đã đạt đến giới hạn.

<textarea maxlength="200" placeholder="Tối đa 200 ký tự"></textarea>

Các thuộc tính trạng thái: disabled, readonly, và required

Ba thuộc tính này dùng để kiểm soát trạng thái của ô nhập liệu:

• disabled: Vô hiệu hóa hoàn toàn ô textarea. Người dùng không thể tương tác và giá trị của nó sẽ không được gửi đi khi submit form.
• readonly: Chỉ cho phép đọc. Người dùng có thể thấy và sao chép nội dung nhưng không thể chỉnh sửa. Giá trị của nó vẫn được gửi đi khi submit form.
• required: Bắt buộc. Người dùng phải nhập nội dung vào ô này trước khi có thể submit form.

<!-- Ví dụ về textarea bắt buộc -->
<textarea name="feedback" required></textarea>

Giá trị và dữ liệu của textarea

Hiểu cách thiết lập và lấy dữ liệu là kỹ năng cốt lõi khi làm việc với form. Phần này sẽ chỉ cho bạn cách làm chủ dữ liệu của thẻ textarea.

Cách thiết lập giá trị mặc định cho ô nhập liệu

Đây là một điểm khác biệt lớn so với thẻ <input>. Để thiết lập giá trị mặc định của textarea, bạn chỉ cần đặt nội dung vào giữa thẻ mở <textarea> và thẻ đóng </textarea>.

Cách làm đúng:

<textarea name="description">Đây là mô tả sản phẩm ban đầu.</textarea>

Cách làm sai (KHÔNG dùng thuộc tính value):

<!-- CÁCH NÀY KHÔNG HOẠT ĐỘNG -->
<textarea name="description" value="Nội dung này sẽ không hiển thị"></textarea>

Làm thế nào để lấy giá trị từ textarea trong Javascript?

Trong thực tế, bạn sẽ thường xuyên cần dùng Javascript để lấy nội dung người dùng nhập mà không cần tải lại trang. Cách làm rất đơn giản, bạn chỉ cần truy cập vào thuộc tính .value của phần tử textarea đó.

Hãy xem ví dụ sau. Chúng ta có một ô textarea và một nút bấm. Khi bấm nút, nội dung sẽ được hiển thị.

Mã HTML:

<textarea id="user-note" placeholder="Ghi chú điều gì đó..."></textarea>
<button onclick="showNote()">Hiển thị ghi chú</button>
<p id="result"></p>

Mã Javascript:

function showNote() {
  // Lấy phần tử textarea bằng ID
  const noteTextarea = document.getElementById('user-note');

  // Lấy giá trị bên trong nó
  const noteContent = noteTextarea.value;

  // Hiển thị giá trị ra màn hình
  document.getElementById('result').innerText = 'Ghi chú của bạn là: ' + noteContent;
}

Bạn thấy không? Chỉ cần dùng getElementById để chọn đúng thẻ và .value để lấy nội dung.

Tùy chỉnh và định dạng textarea với CSS

Mặc định, thẻ <textarea> trông khá đơn điệu. May mắn là chúng ta có thể dùng CSS để “trang điểm” cho nó trở nên đẹp mắt và phù hợp với thiết kế web của bạn. Đây là phần về textarea HTML CSS.

Thay đổi kích thước bằng width và height

Thay vì dùng rows và cols, sử dụng thuộc tính width và height trong CSS sẽ cho bạn sự kiểm soát chính xác hơn. Bạn có thể dùng các đơn vị như pixel (px), phần trăm (%), hoặc em.

textarea {
  width: 100%; /* Chiếm toàn bộ chiều rộng của phần tử cha */
  height: 150px; /* Chiều cao cố định 150px */
}

Làm cách nào để vô hiệu hóa việc thay đổi kích thước?

Bạn có để ý góc dưới bên phải của ô textarea thường có một icon nhỏ cho phép người dùng kéo để thay đổi kích thước không? Đôi khi, tính năng này có thể làm vỡ bố cục trang web. Để vô hiệu hóa nó, hãy dùng thuộc tính resize.

textarea {
  resize: none; /* Tắt tính năng resize */
}

/* Bạn cũng có thể chỉ cho phép resize theo một chiều */
/* resize: vertical; */  /* Chỉ cho kéo dọc */
/* resize: horizontal; */ /* Chỉ cho kéo ngang */

Ví dụ định dạng viền, màu nền và font chữ

Chúng ta hãy kết hợp nhiều thuộc tính CSS để tạo ra một ô textarea trông hiện đại và chuyên nghiệp hơn nhé.

.custom-textarea {
  width: 100%;
  height: 120px;
  padding: 10px; /* Tạo khoảng đệm bên trong */
  border: 1px solid #ccc; /* Viền xám nhạt */
  border-radius: 5px; /* Bo tròn các góc */
  background-color: #f9f9f9; /* Màu nền nhạt */
  font-family: Arial, sans-serif; /* Thay đổi font chữ */
  font-size: 14px; /* Cỡ chữ */
  resize: none; /* Tắt resize */
}

/* Thêm hiệu ứng khi người dùng focus vào */
.custom-textarea:focus {
  border-color: #007bff; /* Đổi màu viền khi được chọn */
  outline: none; /* Bỏ viền xanh mặc định của trình duyệt */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

So sánh thẻ textarea và thẻ input

Cả hai thẻ <textarea> và <input type="text"> đều dùng để nhận dữ liệu văn bản từ người dùng. Vậy sự khác biệt là gì và khi nào nên chọn thẻ nào? Câu trả lời rất đơn giản.

Sự khác nhau chính giữa thẻ input và textarea

Sự khác biệt cốt lõi và duy nhất nằm ở số dòng nhập liệu:

• <input type="text">: Dành cho dữ liệu một dòng. Ví dụ: Tên đăng nhập, email, tiêu đề, số điện thoại.
• <textarea>: Dành cho dữ liệu nhiều dòng. Ví dụ: Nội dung bài viết, bình luận, mô tả, địa chỉ chi tiết.

Bảng so sánh nhanh các trường hợp sử dụng

Để dễ hình dung hơn, WiWeb đã chuẩn bị một bảng so sánh nhanh cho bạn:

Việc chọn đúng thẻ không chỉ giúp mã của bạn ngữ nghĩa hơn mà còn cải thiện trải nghiệm cho người dùng.

Lời kết

Qua bài viết này, WiWeb hy vọng rằng bạn đã nắm được cách sử dụng thẻ textarea trong HTML. Nó là một công cụ đơn giản nhưng vô cùng mạnh mẽ để thu thập thông tin từ người dùng dưới dạng văn bản dài.

Để sử dụng hiệu quả, bạn hãy ghi nhớ vài điều sau:

• Luôn sử dụng thẻ <label> đi kèm với textarea để tăng tính přístupności (accessibility).
• Dùng thuộc tính placeholder để đưa ra gợi ý thân thiện.
• Sử dụng CSS để tùy chỉnh giao diện cho phù hợp với thiết kế chung, đặc biệt là thuộc tính resize: none; nếu cần.
• Chọn đúng giữa <input> và <textarea> dựa trên nhu cầu nhập liệu một dòng hay nhiều dòng.

Bạn còn thắc mắc nào về cách sử dụng thẻ textarea không? Hãy chia sẻ trong phần bình luận bên dưới nhé!

Nếu bạn đang tìm kiếm một đối tác thiết kế website chuyên nghiệp, đừng ngần ngại liên hệ với WiWeb. Chúng tôi luôn sẵn sàng lắng nghe và tư vấn giải pháp tốt nhất cho bạn.