Bài viết về chủ đề Form sẽ được OSVN- Công ty thiet ke web chuyen nghiep giới thiệu tiếp đến các bạn.
Một số thuộc tính mới trong HTML5 được đưa ra dành cho <form> và <input>.
Trong HTML5, có hai thuộc tính mới đã được thêm vào thẻ <form> là:
• autocomplete: cho phép xuất hiện danh sách các gợi ý giống như khi tìm kiếm trong Google
• novalidate tắt tính năng xác nhận hợp lệ cho form, điều này rất có ích trong quá trình thử nghiệm.
Thuộc tính mới dành cho <input>:
• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list
• min and max
• multiple
• pattern (regexp)
• placeholder
• required
• step
Chúng ta sẽ cùng đi tìm hiểu sâu hơn về từng thuộc tính:
Thuộc tính autocomplete| <form>/<input>
Thuộc tính autocomplete là thuộc tính của form, khi bạn bật autocomplete thì trình duyệt tự động điền lại giá trị trước đó bạn đã nhập vào form của bạn.
Mẹo nhỏ: Ta có thể bật autocomplete=”on” cho <form> và tắt automcomplete = “off” cho thẻ <input> bên trong, hoặc ta có thể làm ngược lại.
Lưu ý: Thuộc tính autocomplete dùng được cho <form> và các loại thẻ <input> sau: text, search, url, tel, email, password, datepickers, range, and color.
Trình duyệt hỗ trợ: Internet Explorer, Forefox, Chrome, Safari.
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<form action=”demo_form.asp” autocomplete=”on”>
First name:<input type=”text” name=”fname”><br>
Last name: <input type=”text” name=”lname”><br>
E-mail: <input type=”email” name=”email” autocomplete=”off”><br>
<input type=”submit”>
<p>Đây là ví dụ của OSVN- Công ty thiết kế website chuyên nghiệp đưa ra cho các bạn cùng hiểu</p>
</form>
<p>Fill in and submit the form, then reload the page to see how autocomplete works.</p>
<p>Notice that autocomplete is “on” for the form, but “off” for the e-mail field.</p>
</body>
</html>
Mách nhỏ: Một vài trình duyệt cần mở chức năng autocomplete.
Thuộc tính novalidate <form>
Thuộc tính này chỉ làm việc trên thẻ <form>, novalidate là thuộc tính kiểu boolean khi sử dụng nó sẽ xác định rằng thuộc tính đầu vào không cần xác thực( hay gọi là bắt lỗi ). Thuộc tính này khiến cho form không bắt lỗi nhập liệu khi submit.
Các loại trình duyệt hỗ trợ : Opera, Chrome, Firefox.
Ví dụ: Đoạn mã dưới sẽ không bắt lỗi khi submit mặc dù bạn điền sai cấu trúc của 1 email và đã sử dụng thẻ <input type=”email”> trong HTML5
<form action=”demo_form.asp” novalidate>
E-mail: <input type=”email” name=”user_email”>
<input type=”submit”>
</form>
<p><strong>Note:</strong> The novalidate attribute of the form tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>
Kết quả xem tại: http://ithietkeweb.net/thuoc-tinh-form-moi-trong-html5/
Thuộc tính autofocus <input>
Là thuộc tính logic sử dụng cho thẻ input, thuộc tính này xác định trường input tự động được focus( Tự động “click chuột” vào trường input chỉ đợi bạn điền thôi).
Hay nói các khác, khi load một trang web con trỏ tự động nằm tại thẻ <input> nào có thuộc tính autofocus.
Các loại trình duyệt hỗ trợ: Opera, Safari, Chrome, Firefox.
Ví dụ: Tự động chuyển đến trường “First name” khi load trang:
<form action=”demo_form.asp”>
First name:<input type=”text” name=”fname” autofocus><br>
Last name: <input type=”text” name=”lname”><br>
<input type=”submit”>
</form>
Các bạn có thể tham khảo thêm bài viết Các thẻ HTML5 mới trong Form
Thuộc tính form <input>
Trước đây <input> thuộc form nào thì nằm trong form đó, giờ đây với thuộc tính form ta có nhiều cách hơn để quy định <input> là của form nào.
Mẹo: Trong trường hợp input đó thuộc về nhiều form có thể ngăn cách các ID bởi dấu cách.
Các loại trình duyệt hỗ trợ: Opera, Safari, Chrome, Firefox.
Ví dụ: Công ty thiết kế web chuyên nghiệp, uy tín
<form action=”demo_form.asp” id=”form1″>
First name: <input type=”text” name=”fname”><br>
<input type=”submit” value=”Submit”>
</form>
<p>The “Last name” field below is outside the form element, but still part of the form.</p>
Last name: <input type=”text” name=”lname” form=”form1″>
Đoạn mã bên trên sẽ giúp trình duyệt xác định được trường Last name thuộc về form bên trên nó với thuộc tính form=”tên_form_nó_thuộc_về” mặc dù có thể nó đặt bên ngoài cặp thẻ <form></form>.
Các bạn có thể tham khảo thêm ở bài trước Thẻ HTML5 mới trong Form đã trình bày một số thẻ.
Bài viết trên Công ty OSVN thiet ke website chuyen nghiep đã gửi đến các bạn thông tin về các thuộc tính mới HTML5 trong Form.
Mọi thắc mắc các bạn có thể comment để cũng trao đổi nhé!
Nguồn: http://ithietkeweb.net/thuoc-tinh-form-moi-trong-html5/