บทที่ 12 HTML5 Form Elements ตอนที่ 2
2.ตัวอย่างการใช้งานแท็ก <keygen>
<keygen> tag เป็น ถูกกำหนดให้ทำหน้าที่เป็น List option ของข้อมูล element นี้ จะใช้ร่วมกับ inpur element เพื่อให้เราเลือก input value ให้กับ element ตาม list ที่มี
"input" element จะใช้ list attribute เพื่อรวม datalist เข้าไปด้วยกัน tag เป็น ถูกกำหนดให้ทำหน้าที่เป็น List option ของข้อมูล element นี้ จะใช้ร่วมกับ inpur element เพื่อให้เราเลือก input value ให้กับ element ตาม list ที่มี "input" element จะใช้ list attribute เพื่อรวม datalist เข้าไปด้วยกัน
| 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 |
ตัวอย่างโค๊ด
<html>
<head>
<title>Thai-Programmer Web</title>
</head>
<body>
<form action="test.php" method="post">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
</body>
</html>
ผลลัพธ์คือ
3.ตัวอย่างการใช้งานแท็ก <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>
<head>
?<title>Thai-Programmer Web</title>
</head>
<body>
?<input name="N1" type="number"> +
?<input name="N2" type="number"> =
?<output name="result1" onforminput="value=N1.valueAsNumber + N2.valueAsNumber"></output>
?<br />
?<input name="N3" type="number"> -
?<input name="N4" type="number"> =
?<output name="result2" onforminput="value=N3.valueAsNumber - N4.valueAsNumber"></output>
?<br />
?<input name="N5" type="number"> *
?<input name="N6" type="number"> =
?<output name="result3" onforminput="value=N5.valueAsNumber * N6.valueAsNumber"></output>
?<br />
?<input name="N7" type="number"> /
?<input name="N8" type="number"> =
?<output name="result4" onforminput="value=N7.valueAsNumber / N8.valueAsNumber"></output>
</body>
</html>ผลลัพธ์คือ
อ่านเพิ่มเติม
บทที่ 12 HTML5 Form Elements อิเลเม็นต์ตัวใหม่ในการสร้าง form ตอนที่ 1
