HTML5: Thuộc tính mới của FORM & INPUT
HTML5 cung cấp thêm cho bạn các thuộc tính mới cho phần tử <form> và phần tử <input>. Các thuộc tính mới này giúp ta giảm được việc phải lập trình, và như vậy nó giúp tăng tốc độ tải trang web nơi chứa <form> và <input>.
Lưu ý rằng hiện tại chưa có trình duyệt nào hỗ trợ đầy đủ các thuộc tính mới này. Các trình duyệt hỗ trợ cho từng thuộc tính được kiểm nghiệm tại năm 2015.
Dưới đây ta sẽ tìm hiểu chi tiết đối các thuộc tính mới này.
1. autocomplete
autocomplete dùng để hiển thị hay không hiển thị các giá trị đã được gửi đi trước đó trong mỗi lần submit khi bạn có những thao tác trên các phần tử <input> như là click đúp hoặc điền giá trị vào phần tử <input> tương ứng. Ví dụ như khi bạn điền giá trị là 'abc' vào một phần tử <input> và submit form thì sau khi submit xong nếu bạn click đúp chuột hoặc điền 'a' vào phần tử <input> này thì giá trị 'abc' sẽ hiện ra như là một gợi ý cho bạn.
autocomplete có hai giá trị là 'on' (cho phép - mặc định) và 'off' (không cho phép), trong đó nếu bạn thiết lập giá trị là 'on' cho phần tử <form> thì điều này có nghĩa là tất cả các phần tử <input> của form sẽ hiển thị các giá trị đã điền trong mỗi lần submit, ngược lại thì tất cả đều không hiển thị; còn nếu thiết lập giá trị là 'on' cho phần tử <input> thì nó sẽ hiển thị các giá trị đã điền tương ứng với phần tử input đó, ngược lại thì không.
Lưu ý: thuộc tính autocomplete áp dụng cho phần từ <form> và phần tử <input> có các kiểu như sau: text, search, url, tel, email, password, date, range và color.
Trình duyệt hỗ trợ: Chrome, IE, FireFox và Safari.
Ví dụ:
2. novalidate
Thuộc tính novalidate của phần tử <form> được dùng để xác định rằng dữ liệu trong form không cần phải được xác nhận tính hợp lệ trước khi gửi.
Trình duyệt hỗ trợ: Chrome, IE10+, FireFox và Opera.
Ví dụ:
Các thuộc tính mới của thẻ <input>:
3. autofocus
Thuộc tính autofocus của phần tử <input> được dùng để xác định rằng phần tử <input> sẽ tự động được focus khi trình duyệt tải xong trang web.
Trình duyệt hỗ trợ: Tất cả các trình duyệt đều hỗ trợ thuộc tính autofocus.
Ví dụ:
4. form
Thuộc tính form sẽ cho biết phần tử <input> thuộc về form nào của trang web.
Để sử dụng thuộc tính này, đầu tiên bạn đặt ID cho thẻ <form>, ví dụ <form id="frm">, sau đó từ thuộc tính form của <input> bạn thiết lập mối liên quan tới <form> như sau: <input form="frm"> .
Trình duyệt hỗ trợ: Chrome, FireFox, Opera và Safari.
Ở ví dụ sau đây, thẻ <input> với name="tendangnhap" lại không thuộc <form id="f1"> mặc dù nó nằm trong form này, còn thẻ <input type="email"> lại thuộc về <form id="f1"> mặc dù nó nằm ngoài các form.
5. formaction
Thuộc tính formaction dùng để chỉ định trang sẽ nhận dữ liệu của form khi form được gửi. formaction sẽ thay thế thuộc tính action của phần tử <form>.
Lưu ý: formaction áp dụng cho phần tử <input> có kiểu là "submit" hoặc "image".
Trình duyệt hỗ trợ: Tất cả các trình duyệt đều hỗ trợ thuộc tính formaction.
Ví dụ:
6. formenctype
Như bạn đã biết, thuộc tính enctype của phần tử <form> dùng để xác định loại nội dung được gửi đi khi submit form, thì thuộc tính formenctype của <input> sẽ thay thế thuộc tính enctype này. formenctype chỉ áp dụng cho form có phương thức gửi là "post".
Lưu ý: formenctype áp dụng cho phần tử <input> có kiểu là "submit" hoặc "image".
Trình duyệt hỗ trợ: Tất cả các trình duyệt đều hỗ trợ thuộc tính formenctype.
Đoạn mã dưới đây có hai nút submit, trong đó nút "Submit1" sẽ submit loại nội dung được thể hiện ở thuộc tính enctype của phần tử <form> là "application/x-www-form-urlencoded", còn nút "Submit2" sẽ submit loại nội dung được thể hiện ở thuộc tính formenctype của nút submit này là "multipart/form-data".
7. formmethod
Thuộc tính formmethod dùng để định nghĩa phương thức gửi dữ liệu của form. Thuộc tính này sẽ thay thế thuộc tính method của form.
Lưu ý: formmethod áp dụng cho phần tử <input> có kiểu là "submit" hoặc "image".
Trình duyệt hỗ trợ: Tất cả các trình duyệt.
Ví dụ:
8. formnovalidate
Thuộc tính formnovalidate có tác dụng tương tự thuộc tính novalidate của phần tử <form>, khi áp dụng nó cũng mang nghĩa là không cần phải xác nhận tính hợp lệ đối với dữ liệu của form trước khi gửi.
Thuộc tính formnovalidate sẽ thay thế cho thuộc tính novalidate của phần tử <form>.
Lưu ý: Thuộc tính formnovalidate áp dụng cho phần tử <input> có kiểu "submit".
Trình duyệt hỗ trợ: Chrome, IE, FireFox và Opera.
Ví dụ:
9. formtarget
Thuộc tính formtarget tương tự thuộc tính target của phần tử <form>, nó được dùng để chỉ định hình thức hiển thị trang nhận dữ liệu, trong đó trang nhận dữ liệu có thể được hiển thị ngay tại vị trí trang gửi hoặc hiển thị tại một cửa sổ khác hoặc một tab khác.
Thuộc tính formtarget sẽ thay thế thuộc tính target của phần tử <form>.
Lưu ý: Thuộc tính formtarget áp dụng cho phần tử <input> có kiểu là "submit" hoặc "image".
Trình duyệt hỗ trợ: Tất cả các trình duyệt.
Ví dụ:
10. max
Thuộc tính max được dùng để xác định giá trị lớn nhất có thể nhập vào phần tử <input> tương ứng.
Lưu ý: Thuộc tính max áp dụng cho phần tử <input> có các kiểu sau: number, range, date, datetime, datetime-local, month, time và week.
Trình duyệt hỗ trợ: Tất cả các trình duyệt.
Ví dụ:
11. min
Thuộc tính min được dùng để xác định giá trị nhỏ nhất có thể nhập vào phần tử <input> tương ứng.
Lưu ý: Thuộc tính min áp dụng cho phần tử <input> có các kiểu sau: number, range, date, datetime, datetime-local, month, time và week.
Trình duyệt hỗ trợ: Tất cả các trình duyệt.
Ví dụ:
12. multiple
Thuộc tính multiple cho phép người dùng chọn được nhiều tập tin cùng lúc, người dùng cũng điền được nhiều email cùng lúc.
Lưu ý: Thuộc tính multiple áp dụng cho phần tử <input> với các kiểu "file" và "email".
Trình duyệt hỗ trợ: Tất cả các trình duyệt.
Ví dụ:
13. list
Thuộc tính list sẽ tham chiếu tới phần tử <datalist> có id được chỉ ra tương ứng, khi đó phần tử <input> sẽ hiển thị các gợi ý cho người dùng, trong đó các gợi ý được lấy từ các phần tử con <option> của phần tử <datalist>.
Trình duyệt hỗ trợ: Chrome, IE, FireFox và Opera.
Ví dụ:
14. pattern
Thuộc tính pattern được dùng để xây dựng biểu thức quy tắc (mẫu) áp dụng cho phần tử <input> tương ứng mà không cần phải sử dụng code JavaScript.
Lưu ý: Thuộc tính pattern áp dụng cho phần tử <input> có các kiểu sau: text, search, url, tel, email và password.
Gợi ý: Nên dùng thêm thuộc tính 'title' của phần tử <input> để mô tả mẫu nhằm trợ giúp cho người dùng khi nhập liệu.
Trình duyệt hỗ trợ: Tất cả các trình duyệt.
Ví dụ:
15. placeholder
Thuộc tính placeholder của phần tử <input> sẽ đưa ra một gợi ý nhỏ cho người dùng dễ hiểu khi nhập liệu vào phần tử <input>, khi người dùng nhập dữ liệu vào phần tử <input> tương ứng thì gợi ý này sẽ mất đi, khi người dùng xóa giá trị trong phần tử <input> này thì gợi ý lại hiện ra.
placeholder chỉ đưa ra gợi ý, những gì được viết trong nó không phải là giá trị của phần tử <input> .
Lưu ý: Thuộc tính placeholder áp dụng cho phần tử <input> có các kiểu sau: text, search, url, tel, email và password.
Trình duyệt hỗ trợ: Tất cả các trình duyệt.
Ví du:
16. required
Thuộc tính required được dùng để yêu cầu người dùng phải điền dữ liệu vào phần tử <input> tương ứng trước khi gửi dữ liệu.
required có thể dùng để thay thế cho trường hợp bạn sử dụng JavaScript để check trống.
Lưu ý: Thuộc tính required áp dụng cho phần tử <input> có các kiểu sau: text, search, url, tel, email, password, date, number, checkbox, radio và file.
Trình duyệt hỗ trợ: Chrome, IE, FireFox và Opera.
Ví dụ:
17. step
Thuộc tính step dùng để tạo khoảng cách giữa các con số có thể nhập vào trong tập dãy số đã được thiết lập cho phần tử <input>.
step thường đi kèm với các thuộc tính min và max.
Lưu ý: Thuộc tính step áp dụng cho phần tử <input> có các kiểu sau: number, range, date, datetime, datetime-local, month, time và week.
Trình duyệt hỗ trợ: Chrome, IE, Opera và Safari.
Ví dụ:
18. width & height
Thuộc tính width và height của phần tử <input> được dùng để xác định độ rộng và độ cao của phần tử <input>.
Lưu ý: width và height chỉ áp dụng cho phần tử <input> có kiểu "image".
Trình duyệt hỗ trợ: Tất cả các trình duyệt.
Ví dụ: