วันนี้เราจะมาทำความรู้จักกับการใช้งาน HTML5 Form Elements ตัวใหม่ๆ ที่น่าสนใจกันน่ะครับทั้ง datalist, keygen และ output
การใช้งานแท็ก <datalist>
<datalist> tag เป็น ถูกกำหนดให้ ใช้คู่กับ form เพื่อทำการ generator การเข้ารหัสให้กับ ข้อมูลใน form ใช้เพื่อระบบความปลอดภัยในกาส่งข้อมูลจาก Client ไปยัง Server เมื่อ form ถูก submit private key จะถูกจัดเก็บไว้ยัง เครื่องคอมพิวเตอร locally หรือเครื่อง Client และ public key จะถูกส่งไปยัง server
ตัวอย่างโค๊ด
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
การใช้งานแท็ก <keygen>
<keygen> tag เป็น ถูกกำหนดให้ทำหน้าที่เป็น List option ของข้อมูล element นี้ จะใช้ร่วมกับ input element เพื่อให้เราเลือก input value ให้กับ element ตาม list ที่มี
| Attributes |
Value |
รายละเอียด |
| autofocus |
disabled |
ทำให้ input field เกิด focused เมื่อ page load |
| challenge |
challenge |
กำหนดว่า กำหนดค่า value ของ keygen เมื่อกด submit |
| disabled |
disabled |
ทำการ Disables keytag field |
| form |
formname |
กำหนดชื่อ Form ตั้งแต่ 1 form เพื่อเข้ารหัส |
| keytype |
rsa / other |
กำหนด security algorithm ของ key เพื่อเข้ารหัส เช่น rsa เพื่อ generates การเข้ารหัส RSA key |
| name |
fieldname |
กำหนด unique name สำหรับ input element |
ตัวอย่างโค๊ด
<!DOCTYPE html>
<html>
<body>
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
</body>
</html>
การใช้งานแท็ก <output>
<output> tag เป็น ถูกกำหนดให้ทำหน้าที่เป็น output ของการแสดงข้อมูลของการคำนวน
| Attributes |
Value |
รายละเอียด |
| for |
id |
กำหนด id ของ element ตั้งแต่ 1 elements ขึ้นไป ที่จะใช้ร่วมกับ output |
| form |
formid |
กำหนด id ของ form ตั้งแต่ 1 form ขึ้นไป ที่จะใช้ร่วมกับ output |
| name |
name |
กำหนด unique name สำหรับ input element |
ตัวอย่างโค๊ด
<!DOCTYPE html>
<html>
<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
</body>
</html>
รับทําเว็บไซต์ 
แลกลิงค์ 
