บทที่ 15 HTML5 Form Attributes ตอนที่ 1
แอทติบิวใหม่ ใน HTML5 สำหรับปรับแต่ง แท็ก <form> และ <input>
| 1.แอทติบิวสำหรับ แท็ก <form> | 2.แอทติบิวสำหรับ แท็ก <input> | บราวเซอร์ที่สนับสนุน |
| -autocomplete | -autocomplete | -IE, Firefox, Opera, Chrome, Safari |
| -novalidate | - | -Firefox, Opera, Chrome |
| -autofocus | -Firefox, Opera, Chrome, Safari | |
| -form | -Firefox, Opera, Chrome, Safari | |
| -formaction | -Firefox, Opera, Chrome, Safari | |
| -formenctype | -Firefox, Opera, Chrome, Safari | |
| -formmethod | -Firefox, Opera, Chrome, Safari | |
| -formnovalidate | -Firefox, Opera, Chrome | |
| -formtarget | -Firefox, Opera, Chrome, Safari | |
| -height and width | -IE, Firefox, Opera, Chrome, Safari | |
| -list | -Firefox, Opera, Chrome, Safari | |
| -min and max | -Opera, Chrome | |
| -multiple | -Firefox, Opera, Chrome, Safari | |
| -pattern (regexp) | -Firefox, Opera, Chrome | |
| -placeholder | -IE, Firefox, Opera, Chrome, Safari | |
| -required | -Firefox, Opera, Chrome | |
| -step | -Opera, Chrome |
1. autocomplete Attribute คือ คุณลักษณะอัตโนมัติระบุว่าฟอร์มหรือช่องใส่ควรมีฟังก์ชั่นอัตโนมัติ เช่น เมื่อคุณ พิมพ์ตัวอักษรลงไปในช่องป้อนข้อมูล เบราเซอร์ก็จะแสดง คำที่เคยพิมพ์ เพื่อให้สะดวก จะได้ไม่ต้องพิมพ์มาก ซึ่งแอทติบิวนี้ใช้ได้ทั้งแท็ก <form> และ <input>
<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">
</form>
</body>
</html>ผลลัพธ์คือ
***ในกรณีที่เราเคยกรอกข้อมูลเเล้ว แอทติบิว autocomplete นี้จะช่วยให้เรากรอกข้อมูลได้สะดวกขึ้น เพราะเราไม่ต้องมาพิมพ์ใหม่ทั้งหมด ดังตัวอย่างข้างบน
แต่ในบางครั้งเราก็มีความจำเป็น ที่ไม่อยากให้เบราเซอร์มันแสดง autocomplete ขึ้นมา เราสามารถปิดมันได้โดย ใส่ attribute autocomplete="off" ให้กับ input หรือ form element เช่น
<input type="text" autocomplete="off" />หรือ
<form autocomplete="off">
อ่านเพิ่มเติม
บทที่ 15 HTML5 Form Attributes ตอนที่ 2
