Thẻ textarea trong HTML

Thẻ textarea hay dùng trong thẻ form, dùng để nhập văn bản. Thẻ input kiểu text cũng để nhập văn bản, nhưng thường là đoạn ngắn còn <textarea> được dùng để nhập cả đoạn văn bản dài hơn.

Code mẫu:

<textarea rows="5" cols="40"></textarea>

Kết quả:


Trình duyệt hỗ trợ

Thẻ textarea được tất cả các trình duyệt phổ thông hỗ trợ, trong đó có Chrome, FireFox, Opera, Safari và IE.


Đặc điểm

  • Không giới hạn số ký tự nhập vào.
  • Kích thước của textarea được thay đổi thông qua thuộc tính rows và cols, nhưng cách tốt hơn để tác động đến kích thước là thông qua thuộc tính width và height trong CSS.

Còn dưới đây là các thuộc tính:


#1. autofocus

Khi vào trang thì con trỏ tập trung ngay lập tức tại textarea

Code:

<textarea rows="5" cols="40" autofocus></textarea>

Kết quả (nhấn phím F5 rồi kéo xuống đây – bạn sẽ thấy con trỏ chuột nhấp nháy trong ô textarea):


#2. cols

Quy định chiều rộng tính theo số ký tự, rows – quy định số dòng

Code:

<textarea rows="7" cols="40"></textarea>

Kết quả:


#3. disabled

Vô hiệu hóa textarea

Code:

<textarea rows="5" cols="40" disabled></textarea>

Kết quả (bạn không thể gõ chữ vào texarea được nữa – vì nó đã bị vô hiệu hóa):


#4. form

Quy định form mà textarea thuộc về.

Code:

<form action="#" id="yform">
Name: <input type="text" name="yname">
<input type="submit" value="Gửi">
</form>

<textarea name="comment" form="yform">Gõ vào đây...</textarea>

Kết quả (bạn có thể thấy textarea nằm ngoài thẻ form, nhưng nhờ thuộc tính form, trình duyệt vẫn biết rằng nó thuộc về form có id là yform):

Name:

#5. maxlength

Số ký tự tối đa được phép nhập

Code:

<textarea rows="5" cols="10" maxlength="15">
</textarea>

Kết quả (bạn không thể nhập hơn 15 ký tự):


#6. name

Tên của textarea – nó sẽ được dùng để định danh cho trường và là thông tin được gửi đi xử lý kèm văn bản được nhập.

Code:

<form action="xuly.php">
<textarea name="comment" rows="5" cols="40">Để lại bình luận của bạn.</textarea><br>
<input type="submit" value="Gửi">
</form>

Kết quả:



#7. placeholder

Thông tin hướng dẫn, thường có màu xám và biến mất khi người dùng bắt đầu nhập dữ liệu

Code:

<textarea cols="40" placeholder="Văn bản màu xám này chính là placeholder" rows="5">
</textarea>

Kết quả:


#8. readonly

Quy định chỉ đọc văn bản trên textarea mà không cho nhập dữ liệu

Code:

<textarea rows="5" cols="40" readonly>
Bạn chỉ đọc được đoạn văn bản này mà không sửa hay thay đổi gì.
</textarea>

Kết quả:


#9. required

Yêu cầu phải nhập văn bản mới được submit

Code:

<form action="#">
<textarea rows="5" cols="40" required>
</textarea><br >
<input type="submit" value="Submit">
</form>

Kết quả (bạn để trống textarea rồi nhấn Submit xem điều gì xẩy ra):



#10. wrap

Hiện tôi chưa rõ mục đích sử dụng.

1 thought on “Thẻ textarea trong HTML”

Leave a Comment