Các đối tương form của html5

HTML5 cung cấp thêm cho bạn các thuộc tính mới cho phần tử  và phần tử . 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 và .

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ử như là click đúp hoặc điền giá trị vào phần tử tương ứng. Ví dụ như khi bạn điền giá trị là 'abc' vào một phần tử 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ử 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ử thì điều này có nghĩa là tất cả các phần tử 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ử 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ừ và phần tử 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ụ:

Tên đăng nhập:

E-mail:

2. novalidate

Thuộc tính novalidate của phần tử  đượ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ụ:

E-mail:

Các thuộc tính mới của thẻ :

3. autofocus

Thuộc tính autofocus của phần tử  được dùng để xác định rằng phần tử 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ụ:

Tên đăng nhập: E-mail:

4. form

Thuộc tính form sẽ cho biết phần tử 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ẻ , ví dụ , sau đó từ thuộc tính form của bạn thiết lập mối liên quan tới như sau: .

Trình duyệt hỗ trợ: Chrome, FireFox, Opera và Safari.

Ở ví dụ sau đây, thẻ với name="tendangnhap" lại không thuộc mặc dù nó nằm trong form này, còn thẻ lại thuộc về mặc dù nó nằm ngoài các form.

Tên đăng nhập:

E-mail:

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ử .

Lưu ý:  formaction áp dụng cho phần tử 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ụ:

Họ và tên:

Tên đăng nhập:

6. formenctype

Như bạn đã biết, thuộc tính enctype của phần tử 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  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ử 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ử 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".

Tên đăng nhập:

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ử 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ụ:

Họ và tên:

Tên đăng nhập:

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ử , 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ử .

Lưu ý: Thuộc tính formnovalidate áp dụng cho phần tử có kiểu "submit".

Trình duyệt hỗ trợ: Chrome, IE, FireFox và Opera.

Ví dụ:

E-mail:

9. formtarget

Thuộc tính formtarget tương tự thuộc tính target của phần tử , 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ử .

Lưu ý: Thuộc tính formtarget áp dụng cho phần tử 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ụ:

Họ và tên:

Tên đăng nhập:

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ử tương ứng.

Lưu ý: Thuộc tính max áp dụng cho phần tử 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ụ:

Nhập vào một ngày [max = '2015-12-31']:

Nhập vào một năm từ [max = 2015]:

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ử tương ứng.

Lưu ý: Thuộc tính min áp dụng cho phần tử 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ụ:

Nhập vào một ngày [min = '2015-01-01']:

Nhập vào một năm từ [min = 1999]:

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ử 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ụ:

Bạn có thể chọn nhiều file:

Bạn có thể nhập nhiều email [dấu ',' làm phần phân cách]:

13. list

Thuộc tính list sẽ tham chiếu tới phần tử có id được chỉ ra tương ứng, khi đó phần tử 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 của phần tử .

Trình duyệt hỗ trợ: Chrome, IE, FireFox và Opera.

Ví dụ:

Mời bạn nhập vào một môn học:

html

css

javascript

html5

css3

jquery

ajax

sql

php

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ử 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ử 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ử  để 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ụ:

Mã quốc gia:

15. placeholder

Thuộc tính placeholder của phần tử  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ử , khi người dùng nhập dữ liệu vào phần tử 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ử 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ử .

Lưu ý: Thuộc tính placeholder áp dụng cho phần tử 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:

Họ và tên:

E-mail:

Số điện thoại:

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ử 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ử 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ụ:

Họ và tên *:

Tên đăng nhập *:

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ử .

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ử 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ụ:

Nhập vào một số từ 1 đến 5 [độ chính xác 0.1]:

18. width & height

Thuộc tính width và height của phần tử  được dùng để xác định độ rộng và độ cao của phần tử .

Lưu ý: width và height chỉ áp dụng cho phần tử có kiểu "image".

Trình duyệt hỗ trợ: Tất cả các trình duyệt.

Ví dụ: