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

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

บทที่ 8  New Input Types ตอนที่ 1
   New Input Types คือตัวลือกใหม่ที่ถูกเพิ่มใน HTML5 เพื่อให้เว็บไซต์ที่สร้างด้วย HTML5 สามารถปรับแต่งฟอร์มได้หลากหลายมากขึ้น โดยแท็กที่ใช้คือแท็ก <input>  ซึ่งหลายๆ Attribute นั้น มีประโยชน์และประหยัดเวลาในการทำเว็บไซด์อย่างมากเลยทีเดียว ตัวอย่างเช่น
1.Input Type: color
ใส่ค่าสี โดยค่าที่ใส่ อาจใช้เป็นรหัสสี หรือ ชื่อสีก็ได้ บราวเซอร์ที่สนับสนุน google chome ,opera

<html>
<body>

<form action="demo_form.asp">
  Select your favorite color: <input type="color" name="favcolor"><br>
  <input type="submit">
</form>

</body>
</html>

ผลลัพธ์คือ

2.Input Type: date
ใส่วันที่ โดยค่าที่ใส่จะเป็นตัวเลข เช่น ปี เดือน วัน (2012-03-07)  บราวเซอร์ที่สนับสนุน google chome ,opera,safari

<html>
<body>

<form action="demo_form.asp">
  Birthday: <input type="date" name="bday">
  <input type="submit">
</form>

</body>
</html>

ผลลัพธ์คือ

3.Input Type: datetime
ใส่วันที่และเวลา โดยค่าที่ใส่จะเป็น เช่น ปี เดือน วัน : เวลา(2012-06-22 T12:00) บราวเซอร์ที่สนับสนุน opera,safari

<html>
<body>

<form action="demo_form.asp">
  Birthday (date and time): <input type="datetime" name="bdaytime">
  <input type="submit">
</form>

</body>
</html>

ผลลัพธ์คือ

4.Input Type: email
ใส่อีเมล บราวเซอร์ที่สนับสนุน google chome ,opera,firefox

<html>
<body>

<form action="demo_form.asp">
  E-mail: <input type="email" name="usremail"><br>
  <input type="submit">
</form>

</body>
</html>

ผลลัพธ์คือ

5.Input Type: month
ใส่เดือนและปี  บราวเซอร์ที่สนับสนุน google chome ,opera,safari

<html>
<body>

<form action="demo_form.asp">
  Birthday (month and year): <input type="month" name="bdaymonth">
  <input type="submit">
</form>

</body>
</html>


ผลลัพธ์คือ


อ่านเพิ่มเติม
บทที่ 8 HTML5 New Input Types ตัวลือกใหม่สำหรับการปรับแต่งฟอร์มใน HTML5 ปรับแต่งฟอร์มได้หลากหลายมากขึ้น ตอนที่ 2

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
MOD_MTB_NEWS_RECENT
เข้าเฟสบุคไม่ได้
โดย บุคคลทั่วไป พ 23 ส.ค. 2017 6:52 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
10
พ 23 ส.ค. 2017 6:52 pm โดย บุคคลทั่วไป
Machine Learning คืออะไร
โดย nuattawoot พ 23 ส.ค. 2017 4:28 pm บอร์ด Share Knowledge
0
11
พ 23 ส.ค. 2017 4:28 pm โดย nuattawoot
Data Mining (ดาต้า ไมน์นิ่ง) เหมืองข้อมูล
โดย nuattawoot พ 23 ส.ค. 2017 3:15 pm บอร์ด Share Knowledge
0
10
พ 23 ส.ค. 2017 3:15 pm โดย nuattawoot
ผมแก้ไขไฟล์ Index.php ไม่ได้ครับ ใน Joomla
โดย Before Dong อ 22 ส.ค. 2017 4:04 pm บอร์ด Joomla Development
2
21
อ 22 ส.ค. 2017 4:04 pm โดย Before Dong
mdfiles version 1.0.31 สร้างแบบฟอร์มเอกสาร แนบไฟล์ไม่ได้ครับ
โดย Chinamon Sang อ 22 ส.ค. 2017 9:56 am บอร์ด Joomla Development
0
15
อ 22 ส.ค. 2017 9:56 am โดย Chinamon Sang
สอบถามวิธีการย้ายตำแหน่งปุ่ม input file ใน JavaScript
โดย Ik Kat จ 21 ส.ค. 2017 3:36 pm บอร์ด JavaScript & Jquery Ajax
0
24
จ 21 ส.ค. 2017 3:36 pm โดย Ik Kat
การเขียนโปรแกรมภาษาซี 5 ฟังก์ชัน
โดย Tong Ratika จ 21 ส.ค. 2017 9:59 am บอร์ด Programming - PHP
1
28
จ 21 ส.ค. 2017 9:59 am โดย P'Eak
เข้าเฟสไม่ได้
โดย สิ่งเดียวคือ เธอน่ะ อ 20 ส.ค. 2017 8:09 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
25
อ 20 ส.ค. 2017 8:09 pm โดย สิ่งเดียวคือ เธอน่ะ
ศัพท์ปัญญาประดิษฐ์ (AI) ที่ ที่ทางราชบัณฑิตยสถาน
โดย Oh_nO อ 20 ส.ค. 2017 3:58 am บอร์ด Microsoft Office Knowledge & line & Etc
0
31
อ 20 ส.ค. 2017 3:58 am โดย Oh_nO
การใช้คำสั่ง find_element_by_tag_name ของ selenium ในการเปิด tag ใหม่ของเว็บไซต์
โดย บัวบุญ จันทะโคตร ส 19 ส.ค. 2017 6:15 pm บอร์ด Python Knowledge
0
20
ส 19 ส.ค. 2017 6:15 pm โดย บัวบุญ จันทะโคตร
ช่วยด้วยครับ dreamweaver เมนูตารางด้านซ้ายชอบเลื่อนลงเมื่อใส่รูปหรือข้อความด้านขวา
โดย cmchamping ส 19 ส.ค. 2017 4:38 pm บอร์ด Programming - PHP
0
25
ส 19 ส.ค. 2017 4:38 pm โดย cmchamping
ใช้โปรแกรม dreamweaver สร้างเว็บ ตารางเมนู ชอบเลื่
โดย cmchamping ส 19 ส.ค. 2017 4:27 pm บอร์ด Programming - PHP
1
24
ส 19 ส.ค. 2017 4:27 pm โดย mindphp
อยากรู้ วิธีดู... หรือเอา รูป logo .... จาก หน้าเว็บที่กำหนด path รูปไว้ใน css
โดย Before Dong ส 19 ส.ค. 2017 4:14 pm บอร์ด HTML CSS
2
36
ส 19 ส.ค. 2017 4:14 pm โดย Before Dong
Css ปรับ Logo บอร์ด phpbbthailand.com
โดย mindphp ส 19 ส.ค. 2017 3:54 pm บอร์ด phpbbthailand.com
0
4
ส 19 ส.ค. 2017 3:54 pm โดย mindphp
อัพเดดความคืบหน้า
โดย mindphp ส 19 ส.ค. 2017 3:52 pm บอร์ด phpbbthailand.com
0
2
ส 19 ส.ค. 2017 3:52 pm โดย mindphp
ช่วยบอกลิงค์ที่โหลด MJ Upgrad joomla V1.5 เป็น V3.7
โดย บุคคลทั่วไป ส 19 ส.ค. 2017 10:24 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
2
38
ส 19 ส.ค. 2017 10:24 am โดย บุคคลทั่วไป
การนำเอา regex มาใช้ใน selenium
โดย บัวบุญ จันทะโคตร ศ 18 ส.ค. 2017 5:39 pm บอร์ด Python Knowledge
0
21
ศ 18 ส.ค. 2017 5:39 pm โดย บัวบุญ จันทะโคตร
อยากทราบแนวทางการสร้าง selenium ให้คลิ๊กลิ้งค์ต่อจากหน้า text link ที่คลิ๊กมา นั้นจะต้องเช่นไรครับ
โดย บัวบุญ จันทะโคตร ศ 18 ส.ค. 2017 4:33 pm บอร์ด Programming - C/C++ & java & Python
0
32
ศ 18 ส.ค. 2017 4:33 pm โดย บัวบุญ จันทะโคตร
ช่วยหน่อยครับ mdfile ไม่สามารถสร้าง categiries ได้
โดย Chinamon Sang ศ 18 ส.ค. 2017 9:09 am บอร์ด Joomla Development
6
65
ศ 18 ส.ค. 2017 9:09 am โดย Chinamon Sang
Joomla ออกเวอร์ชั่น 3.7.5 Fix Bug ติดตั้ง Joomla ไม่ได้เมือใช้ remote ฐานข้อมูล
โดย mindphp ศ 18 ส.ค. 2017 3:23 am บอร์ด PHP News
1
35
ศ 18 ส.ค. 2017 3:23 am โดย toonytoony2004