ให้เรตสมาชิก: 2 / 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การใช้งาน Form Inputs(ฟอร์มอินพุต) ใน Bootstrap 4(บูตสแตก)
โดย Parichat จ 15 ม.ค. 2018 11:15 am บอร์ด Booststap Knowledge
0
54
จ 15 ม.ค. 2018 11:15 am โดย Parichat
Windows Update
โดย Before Dong จ 15 ม.ค. 2018 10:56 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
277
จ 15 ม.ค. 2018 10:56 am โดย Before Dong
Machine Learning กับ game MarI O by SethBling
โดย nuattawoot จ 15 ม.ค. 2018 10:50 am บอร์ด Programming - C/C++ & java & Python
1
63
จ 15 ม.ค. 2018 10:51 am โดย nuattawoot
TIP Config nginx ให้เข้าเว็บ แบบมี www และ ไม่www เข้าที่โดเมนเดียวกัน
โดย mindphp ส 13 ม.ค. 2018 5:31 pm บอร์ด Linux - Web Server
0
54
ส 13 ม.ค. 2018 5:31 pm โดย mindphp
ติดตั้ง nginx แล้วสร้างโดเมน แล้ว restart เจอ Error
โดย mindphp ส 13 ม.ค. 2018 5:17 pm บอร์ด Linux - Web Server
0
47
ส 13 ม.ค. 2018 5:17 pm โดย mindphp
สอบถามการสร้าง Plugin Wordpress
โดย GAME'z Kittituh ศ 12 ม.ค. 2018 8:32 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
2
104
อ 14 ม.ค. 2018 6:51 pm โดย GAME'z Kittituh
โปรแกรม SPSS (เอสพีเอสเอส) คืออะไร
โดย Jom07 ศ 12 ม.ค. 2018 4:58 pm บอร์ด Software testing
0
83
ศ 12 ม.ค. 2018 4:58 pm โดย Jom07
Android Studio การต่อท้ายข้อความ ใน TextView
โดย Four ศ 12 ม.ค. 2018 4:57 pm บอร์ด Mobile Application Developing- Android, iOS
0
77
ศ 12 ม.ค. 2018 4:57 pm โดย Four
PCI (พีซีไอ) คืออะไร
โดย Jom07 ศ 12 ม.ค. 2018 4:04 pm บอร์ด IOT - Internet of things
0
76
ศ 12 ม.ค. 2018 4:04 pm โดย Jom07
Android Studio การเขียนสั่งให้ Activity สิ้นสุดการทำงาน
โดย Four ศ 12 ม.ค. 2018 3:24 pm บอร์ด Mobile Application Developing- Android, iOS
0
78
ศ 12 ม.ค. 2018 3:24 pm โดย Four
Android Studio การอ้างถึง Object View ใน Layout XML
โดย Four ศ 12 ม.ค. 2018 2:10 pm บอร์ด Mobile Application Developing- Android, iOS
0
68
ศ 12 ม.ค. 2018 2:10 pm โดย Four
โครงสร้างของระบบฐานข้อมูล
โดย Jom07 ศ 12 ม.ค. 2018 2:01 pm บอร์ด IOT - Internet of things
0
79
ศ 12 ม.ค. 2018 2:01 pm โดย Jom07
การใช้งาน Navigation Bar ใน Bootstrap 4
โดย Parichat ศ 12 ม.ค. 2018 1:55 pm บอร์ด Booststap Knowledge
0
98
ศ 12 ม.ค. 2018 1:55 pm โดย Parichat
การใช้งาน Navs ใน Bootstrap 4
โดย Parichat ศ 12 ม.ค. 2018 1:21 pm บอร์ด Booststap Knowledge
0
93
ศ 12 ม.ค. 2018 1:21 pm โดย Parichat
Android Studio การจัดตำแหน่งข้อความใน TextView
โดย Four ศ 12 ม.ค. 2018 12:37 pm บอร์ด Mobile Application Developing- Android, iOS
0
83
ศ 12 ม.ค. 2018 12:37 pm โดย Four
การใช้งาน Tables ใน Bootstrap 4
โดย Parichat ศ 12 ม.ค. 2018 11:59 am บอร์ด Booststap Knowledge
0
77
ศ 12 ม.ค. 2018 11:59 am โดย Parichat
Vishing (วิชชิ่ง) คืออะไร
โดย Jom07 ศ 12 ม.ค. 2018 11:43 am บอร์ด Software testing
0
83
ศ 12 ม.ค. 2018 11:43 am โดย Jom07
การใช้งาน Text/Typography ใน Bootstrap 4
โดย Parichat ศ 12 ม.ค. 2018 11:21 am บอร์ด Booststap Knowledge
0
75
ศ 12 ม.ค. 2018 11:21 am โดย Parichat
การโจมตีแบบ PHISHING (ฟิชชิ่ง)
โดย Jom07 ศ 12 ม.ค. 2018 11:01 am บอร์ด Software testing
0
80
ศ 12 ม.ค. 2018 11:01 am โดย Jom07
เปรียบเทียบ เงื่อนไขทั่วไป กับ เงื่อนไขการเขียนโปรแกรม
โดย Before Dong ศ 12 ม.ค. 2018 10:31 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
524
ศ 12 ม.ค. 2018 10:31 am โดย Before Dong