Thẻ textarea trong HTML • Kiến càng

Posted on by mtoplistChuyên mục:Top List

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.

Share this:

Bài viết liên quan:

  1. Thẻ hr trong HTML Ví dụ Thẻ <hr> được dùng để mô tả sự thay đổi về chủ đề trong nội dung: Kết quả: HTML HTML là một ngôn ngữ dùng xây dựng website……..
  2. Thẻ optgroup trong HTML Ví dụ Nhóm các lựa chọn liên quan với thẻ <optgroup>: Kết quả: Wave AlphaDream MercedesAudi Định nghĩa và cách dùng Thẻ <optgroup> được sử dụng để nhóm các lựa…
  3. Thẻ div trong HTML Ví dụ Văn bản trong tài liệu thuộc thẻ div sẽ được hiển thị màu đỏ: Kết quả: Đây là tiêu đề Đây là văn bản. Định nghĩa và cách…
  4. Thẻ fieldset trong HTML Thẻ fieldset là thẻ chuyên dùng cho phần tử form, nó có tác dụng nhóm các thành phần liên quan đến nhau trong form. Code mẫu Kết quả: Thông tin…
  5. Cấu trúc cơ bản của trang HTML Đây là cấu trúc cơ bản của một trang web mà bạn sẽ thường xuyên gặp phải: Website bắt đầu bằng thẻ !DOCTYPE: nó không phải là một thẻ HTML…

mtoplist