Tuesday, November 12, 2013

Thuộc tính required của thẻ input

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.
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ả:


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, search, url, tel, date pickers, 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" />

No comments:

Post a Comment