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):
#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.
test