HTML5: Thuộc tính mới của FORM & INPUT

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form autocomplete="on">
  Tên đăng nhập: <input name="tendangnhap">
  E-mail: <input type="email" name="email" autocomplete="off">
  <input type="submit" value="Gửi">
</form>
</body>
</html>
 

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

<form novalidate>
  E-mail: <input type="email" name="email"> <input type="submit" value="Gửi">
</form>
 

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

<form>
  Tên đăng nhập: <input type="text" autofocus> E-mail: <input type="email" name="email"> <input type="submit" value="Gửi">
</form>
 

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.

<form id="f1">
  Tên đăng nhập: <input type="text" name="tendangnhap" form="f2"><br>
  <input type="submit" value="Submit">
</form>
<form id="f2">
  <input type="submit" value="Gửi">
</form>
E-mail: <input type="email" name="email" form="f1">
 

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

<form action="http://v1study.com" method="get">
  Họ và tên: <input name="hoten"><br>
  Tên đăng nhập: <input name="tendangnhap"><br>
  <input type="submit" value="Submit1"><br>
  <input type="submit" value="Submit2" formaction="http://demo.v1study.com">
</form>
 

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

<form method="post" enctype="application/x-www-form-urlencoded">
  Tên đăng nhập: <input type="text" name="tendangnhap"><br>
  <input type="submit" value="Submit1">
  <input type="submit" value="Submit2" formenctype="multipart/form-data">
</form>

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

<form method="post">
  Họ và tên: <input type="text" name="hoten"><br>
  Tên đăng nhập: <input type="text" name="tendangnhap"><br>
  <input type="submit" value="Submit1"><br>
  <input type="submit" value="Submit2" formmethod="get">
</form>
 

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

<form>
E-mail: <input type="email" name="email"><br>
<input type="submit" value="Submit1"><br>
<input type="submit" formnovalidate value="Submit2">
</form>
 

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

<form target="_self" action="http://v1study.com">
  Họ và tên: <input type="text" name="hoten"><br>
  Tên đăng nhập: <input type="text" name="tendangnhap"><br>
  <input type="submit" value="Submit1"><br>
  <input type="submit" value="Submit2" formtarget="_blank">
</form>
 

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

<form>
Nhập vào một ngày (max = '2015-12-31'): <input type="date" max="2015-12-31"><br>
Nhập vào một năm từ (max = 2015): <input type="number" max="2015"><br>
<input type="submit" value="Gửi">
</form>
 

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.

HTML5: input thuộc tính min

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

<form>
Nhập vào một ngày (min = '2015-01-01'): <input type="date" min="2015-01-01"><br>
Nhập vào một năm từ (min = 1999): <input type="number" min="1999"><br>
<input type="submit" value="Gửi">
</form>
 

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

<form action="http://dangtranlong.blogspot.com">
  Bạn có thể chọn nhiều file: <input type="file" multiple><br>
  Bạn có thể nhập nhiều email (dấu ',' làm phần phân cách): <input type="email" multiple placeholder="aa@bb.cc,xx@yy.zz"><br>
  <input type="submit" value="Gửi">
</form>
 

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

<form>
Mời bạn nhập vào một môn học: <input list="keyword">
<datalist id="keyword">
<option value="HTML">html</option>
<option value="CSS">css</option>
<option value="JavaScript">javascript</option>
<option value="HTML5">html5</option>
<option value="CSS3">css3</option>
<option value="jQuery">jquery</option>
<option value="Ajax">ajax</option>
<option value="SQL">sql</option>
<option value="PHP">php</option>
</datalist>
<input type="submit" value="Tìm kiếm">
</form>
 

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

<form>
  Mã quốc gia: <input pattern="[A-Za-z]{3}" title="Mã quốc gia gồm 03 ký tự hoa hoặc thường không dấu"> <input type="submit">
</form>
 

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:

<form>
  Họ và tên: <input name="hoten" placeholder="Bạn điền họ tên vào đây"><br>
  E-mail: <input type="email" name="email" placeholder="aa@bb.cc"><br>
  Số điện thoại: <input type="number" name="dienthoai" placeholder="0..."><br>
  <input type="submit" value="Gửi">
</form>
 

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.

html5: input với thuộc tính required

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

<form action="http://v1study.com">
Họ và tên *: <input type="text" name="hoten" required placeholder="Yêu cầu"><br>
Tên đăng nhập *: <input name="tendangnhap" required placeholder="Yêu cầu"><br>
<input type="submit" value="Gửi">
</form>
 

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ợ: ChromeIE, Opera và Safari.

Ví dụ:

<form action="http://dangtranlong.blogspot.com">
Nhập vào một số từ 1 đến 5 (độ chính xác 0.1): <input type="number" min="1" max="5" step="0.1">
<input type="submit" value="Gửi">
</form>
 

18. width & height

Thuộc tính widthheight 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ụ:

<input type="image" alt="Submit" width="66" height="66">
 
» Tiếp: Cách sử dụng CANVAS
« Trước: Các phần tử Cấu trúc/Ngữ nghĩa
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!