ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
เปลี่ยน Default Python3 บนเครื่อง Ubuntu 16.04 จาก Python3.5 เป็น Python3.6
โดย mindphp พฤ 21 พ.ย. 2019 7:04 am บอร์ด Linux - Web Server
0
1
พฤ 21 พ.ย. 2019 7:04 am โดย mindphp
สร้าง Template ใน Joomla
โดย bankjittapol พ 20 พ.ย. 2019 8:06 pm บอร์ด Joomla Developing Knowledge
0
3
พ 20 พ.ย. 2019 8:06 pm โดย bankjittapol
list box เลือกแสดงรูปแบบของวันที่ (Date Format )
โดย bankjittapol พ 20 พ.ย. 2019 6:55 pm บอร์ด Joomla Developing Knowledge
0
7
พ 20 พ.ย. 2019 6:55 pm โดย bankjittapol
คำสั่งเข้าใช้งาน PostgreSQL ด้วย Command Line
โดย mindphp อ 30 ก.ค. 2017 11:24 pm บอร์ด PostgreSQL
6
1810
พ 20 พ.ย. 2019 6:38 pm โดย mindphp
replace() คำสั่งค้นหาแทนที่ใน javascript
โดย jamepiyawat พ 20 พ.ย. 2019 6:36 pm บอร์ด Jquery & Ajax Knowledge
0
6
พ 20 พ.ย. 2019 6:36 pm โดย jamepiyawat
VDO - แนะนำฟังก์ชั่นระบบ Webboard Mindphp.com ใหม่ (phpbb v.3.2)
โดย numtan5839 พ 20 พ.ย. 2019 6:31 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
0
5
พ 20 พ.ย. 2019 6:31 pm โดย numtan5839
วิธีการเขียน SQL เพื่ม เพิ่มคอลัมน์ ฐานข้อมูล
โดย Ittichai_chupol พ 20 พ.ย. 2019 6:06 pm บอร์ด SQL Knowledge
0
5
พ 20 พ.ย. 2019 6:06 pm โดย Ittichai_chupol
VDO - Program Exchange Rate
โดย numtan5839 อ 12 พ.ย. 2019 2:42 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
2
65
พ 20 พ.ย. 2019 6:01 pm โดย numtan5839
วิธีเช็คเวอร์ชั่น ของ Joomla
โดย bankjittapol พ 20 พ.ย. 2019 5:39 pm บอร์ด Joomla Developing Knowledge
0
13
พ 20 พ.ย. 2019 5:39 pm โดย bankjittapol
G - ข้อมูลสำหรับทำระบบ สรุปความต้องการ / ประชุมกับลูกค้า- ThaiVI
โดย mindphp พ 10 ต.ค. 2018 3:29 am บอร์ด ThaiVI (Main)
10
129
พ 20 พ.ย. 2019 4:15 pm โดย thatsawan
การปรับเปลี่ยนข้อมูลของ odject โดยใช้ javascript
โดย Ittichai_chupol พ 20 พ.ย. 2019 3:34 pm บอร์ด Jquery & Ajax Knowledge
0
7
พ 20 พ.ย. 2019 3:34 pm โดย Ittichai_chupol
ค้นหาแบบนี้ ใช้ส่วนเสริมตัวไหนครับ
โดย toonytoony2004 อ 19 พ.ย. 2019 8:25 pm บอร์ด Joomla Development
2
21
พ 20 พ.ย. 2019 1:12 pm โดย mindphp
ระหว่าง joomla กับ wordpress แตกต่างกันยังไงครับ
โดย aloha11x พ 13 พ.ย. 2019 2:12 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
65
พ 20 พ.ย. 2019 1:10 pm โดย mindphp
จะทำยังไงถึงจะแปลงวันที่ ให้อยู่ในรูปแบบของ universal date format ครับ
โดย bankjittapol พ 20 พ.ย. 2019 10:44 am บอร์ด Joomla Development
2
25
พ 20 พ.ย. 2019 6:24 pm โดย bankjittapol
งานประจำวันที่ 20 พฤศจิกายน 2562
โดย numtan5839 พ 20 พ.ย. 2019 10:10 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
1
17
พ 20 พ.ย. 2019 7:46 pm โดย numtan5839
list box เพื่อเลือกจังหวัดที่ต้องการให้แสดงผลพยากรณ์อากาศ
โดย bankjittapol อ 19 พ.ย. 2019 7:12 pm บอร์ด Joomla Developing Knowledge
0
15
อ 19 พ.ย. 2019 7:12 pm โดย bankjittapol
justify-content: space-between คำสั่ง flex ที่จะช่วยให้ระยะห่างแต่ละรูปเท่ากัน
โดย jamepiyawat อ 19 พ.ย. 2019 6:13 pm บอร์ด CSS Knowledge
0
7
อ 19 พ.ย. 2019 6:13 pm โดย jamepiyawat
วิธีการสร้าง form เมื่อกดปุ่ม โดยใช้ javascript
โดย Ittichai_chupol อ 19 พ.ย. 2019 6:09 pm บอร์ด Jquery & Ajax Knowledge
0
12
อ 19 พ.ย. 2019 6:09 pm โดย Ittichai_chupol
Introducing the new Mindphp.com Webboard system function (phpbb v.3.2)
โดย numtan5839 อ 19 พ.ย. 2019 6:06 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
0
7
อ 19 พ.ย. 2019 6:06 pm โดย numtan5839
อยากทราบวิธีการ Link ปุ่ม
โดย numtan5839 อ 19 พ.ย. 2019 5:06 pm บอร์ด MindPHP News / Feedback
2
29
อ 19 พ.ย. 2019 5:50 pm โดย numtan5839