Form ใน HTML5 ได้รับการปรับปรุงที่สำคัญบางอย่างซึ่งเราสามารถนำมาใช้อำนวยความสะดวกในการสร้างรูปแบบให้ผู้ใช้กรอกแบบฟอร์ม องค์ประกอบรูปแบบใหม่แอตทริบิวต์ประเภทการป้อนข้อมูลการตรวจสอบเบราว์เซอร์ที่ใช้เทคโนโลยีรูปแบบ CSS3 และ FormData วัตถุเพื่อสร้างรูปแบบที่ง่ายต่อการทำและเพิ่มความน่าสนใจยิ่งขึ้น
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>
autofocus attribute คือ แอทติบิว ระบุว่าเขตข้อมูลโดยอัตโนมัติควรจะได้รับโฟกัสเมื่อเพจโหลด ซึ่งการทำงาน Cursor จะ Focus ไปที่ Input Field ที่กำหนดโดยอัติโนมัติ หลังจากโหลดหน้าเว็บ
<html>
<body>
<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>
</body>
</html>
novalidate attribute คือ แอทติบิว ที่ใช้กำหนดค่าของข้อมูล โดยค่าของข้อมูลจะแสดงก็ต่อเมื่อ คลิก submit
ตัวอย่าง
<html>
<body>
<form action="demo_form.asp" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
</body>
</html>
form attribute คือ แอทติบิวที่ใช้กำหนดชื่อ Form ตั้งแต่ 1 form เพื่อเข้ารหัส
ตัวอย่าง
<html>
<body>
<form action="demo_form.asp" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
<p>ช่อง "Last name" ที่อยู่ด้านล่างแท็ก form นี้เป็นส่วนหนึ่งของแท็ก form</p>
Last name: <input type="text" name="lname" form="form1">
</body>
</html>
ที่มา :
ไอทีจีเนียส เอ็นจิเนียริ่ง (IT Genius Engineering) ให้บริการด้านไอทีครบวงจร ทั้งงานด้านการอบรม (Training) สัมมนา รับงานเขียนโปรแกรม เว็บไซต์ แอพพลิเคชั่น งานออกแบบกราฟิก และงานด้าน E-Marketing ที่กำลังได้รับความนิยมในปัจจุบัน ทั้ง SEO , PPC , และ Social media marketting
ติดต่อเราเพื่อสอบถามผลิตภัณฑ์ ขอราคา หรือปรึกษาเรื่องไอที ได้เลยค่ะ
Line : @itgenius (มี @ ด้านหน้า) หรือ https://lin.ee/xoFlBFeFacebook : https://www.facebook.com/itgeniusonline
Tel : 02-570-8449 มือถือ 088-807-9770 และ 092-841-7931
Email : contact@itgenius.co.th
คำค้นหา : autocomplete Attributeautofocus attributenovalidate attributeHTML5 Form ใน HTML5form attributeการใช้งานแอททิบิวต์