×

Cách sử dụng thẻ <textarea> để tạo ô nhập liệu nhiều dòng trong HTML

Avatar of admin
admin 0 Views

Việc tạo ra một ô nhập liệu nhiều dòng trong HTML là một phần quan trọng trong việc phát triển web, giúp người dùng nhập liệu một cách dễ dàng và thuận tiện hơn. Một trong những yếu tố quan trọng để thực hiện điều này là sử dụng thẻ <textarea>. Bài viết này sẽ hướng dẫn bạn cách sử dụng thẻ này một cách hiệu quả và tối ưu.

Khái niệm về thẻ <textarea>

Thẻ <textarea> trong HTML được sử dụng để tạo ra một khu vực nhập liệu, nơi người dùng có thể nhập vào nhiều dòng văn bản. Đây là một thẻ không tự đóng, có nghĩa là nó cần phải có một thẻ đóng tương ứng (</textarea>).

Cú pháp cơ bản

Cú pháp đơn giản nhất của thẻ <textarea> như sau:

<textarea></textarea>

Để thêm nội dung mặc định vào ô nhập, bạn có thể đặt nội dung giữa hai thẻ:

<textarea>Nội dung mặc định</textarea>

Thuộc tính của thẻ <textarea>

  1. Cols và Rows
    • cols: quy định số lượng ký tự tối đa trên mỗi dòng.
    • rows: quy định số lượng dòng hiển thị.
<textarea cols="30" rows="10"></textarea>
  1. Placeholder
    • placeholder: cung cấp một đoạn văn bản gợi ý khi ô nhập liệu trống.
<textarea placeholder="Nhập ghi chú của bạn ở đây"></textarea>
  1. Name và ID
    • name: định danh cho dữ liệu nhập liệu, được sử dụng trong biểu mẫu (form) để gửi dữ liệu tới server.
    • id: định danh duy nhất cho thẻ, thường được sử dụng trong JavaScript hoặc CSS để thao tác hoặc định kiểu.
<textarea name="ghichu" id="ghichuInput"></textarea>
  1. Disabled và Readonly
    • disabled: ngăn không cho người dùng tương tác với ô nhập liệu.
    • readonly: chỉ cho phép đọc, không cho phép sửa đổi nội dung.
<textarea disabled></textarea>
<textarea readonly></textarea>
  1. Maxlength
    • maxlength: giới hạn số ký tự mà người dùng có thể nhập vào.
<textarea maxlength="200"></textarea>

Sử dụng CSS để định dạng ô nhập liệu <textarea>

Việc dùng CSS có thể giúp bạn tùy chỉnh giao diện của thẻ <textarea> để phù hợp với thiết kế tổng thể của trang web.

<style>
  textarea {
    border: 1px solid #ccc;
    padding: 10px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
  }
</style>

<textarea cols="30" rows="10"></textarea>

Một ví dụ thực tế

Dưới đây là một ví dụ thực tế về việc sử dụng thẻ <textarea> trong một biểu mẫu (form):

<form action="/submit" method="post">
  <label for="comments">Bình luận:</label>
  <textarea id="comments" name="comments" rows="5" cols="40" placeholder="Nhập bình luận của bạn ở đây..."></textarea>
  <input type="submit" value="Gửi">
</form>

Trong ví dụ này, ô nhập liệu được sử dụng để nhận bình luận từ người dùng, và biểu mẫu sẽ gửi dữ liệu này tới máy chủ khi người dùng nhấn nút "Gửi".

Kết luận

Thẻ <textarea> là một công cụ mạnh mẽ và linh hoạt trong HTML, giúp bạn tạo ra các ô nhập liệu nhiều dòng một cách dễ dàng. Bằng cách hiểu và sử dụng các thuộc tính của thẻ này, bạn có thể tối ưu hóa trải nghiệm người dùng trên trang web của mình. Hãy thử áp dụng ngay hôm nay để thấy sự khác biệt!

Comments

Bài viết liên quan