Thuộc tính required của thẻ input • Kiến càng

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

Thuộc tính required là thuộc tính mới trong HTML5 dành cho thẻ input. Tác dụng của required là buộc người dùng phải nhập dữ liệu thì mới gửi được (submit).

Dĩ nhiên thao tác này đỡ cho chúng ta khá nhiều code JavaScript hoặc PHP dùng để validate các trường không được phép để trống.

Code mẫu:

<form action="#">
   <label>Họ tên:<input type="text"  name="hoten" required></label>
   <input type="submit" value="Gửi">
</form>

Kết quả:

Họ tên:

Giờ bạn không điền gì vào trường Họ tên, rồi nhấn nút Gửi thử xem, bạn sẽ nhận được thông báo kiểu như “Vui lòng điền vào trường này“.

Trình duyệt hỗ trợ

Thuộc tính required được Internet Explorer 10, Firefox, Opera và Chrome hỗ trợ, đáng tiếc hiện Safari chưa đưa tính năng này vào. Nhưng tôi nghĩ sớm muộn gì Safari cũng cập nhật, vì những thuộc tính mới của input rất hữu ích với người thiết kế và người dùng.

Những thẻ input type dùng requried

Các input sau đây dùng thuộc tính requried: text, checkbox, radio, email, password (mật khẩu), search (tìm kiếm), url, tel (số điện thoại), date pickers (chọn ngày tháng), number, file.

Cách dùng

Required là thuộc tính kiểu boolean, nghĩa là nó chỉ nhận 2 giá trị có hoặc không có. Nếu không có requried trong thẻ input nghĩa là không yêu cầu phải nhập đủ dữ liệu, ngược lại nếu có thì phải nhập đủ mới được Submit.

Có sự khác biệt giữa XHTML và HTML. Vì XHTML không cho phép rút gọn thuộc tính cho nên với XHTML chúng ta phải viết đầy đủ như sau: 

<input required="required" />

Share this:

Bài viết liên quan:

  1. Thẻ mark trong HTML Ví dụ Làm nổi bật phần nào đó của văn bản: Kết quả: Anh nhớ mua bàn chảy đánh răng đấy nhé. Định nghĩa và cách dùng Thẻ <mark> định…
  2. Thẻ font trong HTML Ví dụ Chỉ định kích cỡ font, kiểu font và màu sắc của văn bản: Kết quả:Đây là văn bản có màu đỏ, cỡ chữ là 3!Đây là văn bản…
  3. Thẻ aside trong HTML Ví dụ Kết quả: Tôi và gia đình mình ghé thăm Sài Gòn trong mùa hè này. Sài Gòn Sài Gòn là trung tâm kinh tế, văn hoá của khu…
  4. Thẻ form trong HTML Thẻ form là một trong những thẻ quan trọng nhất trong HTML, giữ vai trò tương tác giữa người dùng và trang web. Các thao tác trao đổi nội dung…
  5. Thẻ img trong HTML – cách đưa hình ảnh vào trang web của bạn Hôm nay Kiến càng sẽ giới thiệu với bạn thẻ img – một trong các thẻ hay dùng nhất trong HTML, nó sử dụng để đưa hình ảnh vào trang…

mtoplist