ให้เรตสมาชิก: 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
Joomla 3.8 มาแล้ว
โดย mindphp อ 19 ก.ย. 2017 9:14 pm บอร์ด PHP News
0
5
อ 19 ก.ย. 2017 9:14 pm โดย mindphp
สถานะสถานพยาบาลที่เข้าร่วมประกันสังคม 2560 อัพเดทล่าสุด
โดย thatsawan อ 19 ก.ย. 2017 11:32 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
11
อ 19 ก.ย. 2017 11:32 am โดย thatsawan
ทุกปัญหาใหญ่สำหรับ "User" เสมอ!!
โดย Before Dong อ 19 ก.ย. 2017 10:16 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
19
อ 19 ก.ย. 2017 10:16 am โดย Before Dong
เจอ Process ไม่พึงประสงค์ ผังและรัน ภายใต้ /tmp
โดย mindphp อ 19 ก.ย. 2017 7:52 am บอร์ด Linux - Web Server
0
8
อ 19 ก.ย. 2017 7:52 am โดย mindphp
ใครใช้ CCleaner เวอร์ชั่นเก่า อัพเกรดด่วน ให้ใหม่กว่า เวอร์ชัน 5.33
โดย mindphp อ 19 ก.ย. 2017 5:29 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
12
อ 19 ก.ย. 2017 5:29 am โดย mindphp
facebook มันมันบังคับให้ตั้งชื่อใหม่ ให้เป็นชื่อจริงๆ
โดย บุคคลทั่วไป อ 19 ก.ย. 2017 5:18 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
9
อ 19 ก.ย. 2017 5:18 am โดย บุคคลทั่วไป
สอบถามการประยุกต์ใช้คำสั่ง rect()
โดย Ik Kat จ 18 ก.ย. 2017 6:00 pm บอร์ด JavaScript & Jquery Ajax
0
15
จ 18 ก.ย. 2017 6:00 pm โดย Ik Kat
วิธีแก้ปัญหา Can't create/write to file '/tmp/#sql_6182_0.MAI' (Errcode: 2)
โดย mindphp จ 18 ก.ย. 2017 3:40 pm บอร์ด Linux - Web Server
0
10
จ 18 ก.ย. 2017 3:40 pm โดย mindphp
ทำ pop up ให้ login wordpress
โดย บุคคลทั่วไป จ 18 ก.ย. 2017 1:26 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
16
จ 18 ก.ย. 2017 1:26 pm โดย บุคคลทั่วไป
ธุรกิจกระเป๋าเงินอิเล็กทรอนิกส์ หรือ e-Money คืออะไร
โดย M029 จ 18 ก.ย. 2017 11:46 am บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
14
จ 18 ก.ย. 2017 11:46 am โดย M029
สร้างฟอร์มรับข้อมูล แล้วส่งไปเก็บที่ phpmyadmin
โดย บุคคลทั่วไป จ 18 ก.ย. 2017 11:31 am บอร์ด Programming - PHP
0
15
จ 18 ก.ย. 2017 11:31 am โดย บุคคลทั่วไป
อยากจะเช็คเงื่อนไขไม่ให้เกิด error แบบนี้ EntityRef: expecting ';', ทำยังไงได้บ้างค่ะ
โดย thatsawan จ 18 ก.ย. 2017 11:28 am บอร์ด Programming - C/C++ & java & Python
4
30
จ 18 ก.ย. 2017 11:28 am โดย mindphp
ขั้นตอนที่ SA คิด ขั้นตอนที่ Programmer ทำ
โดย Before Dong จ 18 ก.ย. 2017 10:25 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
28
จ 18 ก.ย. 2017 10:25 am โดย P'Eak
selenium python คำสั่ง ใช้สำหรับ การค้นหา Elements บนหน้าเว็บ
โดย mindphp อ 17 ก.ย. 2017 4:53 am บอร์ด Python Knowledge
0
16
อ 17 ก.ย. 2017 4:53 am โดย mindphp
ตั้งค่า MX ของ mailgun เสริมจากบทความ
โดย mindphp ส 16 ก.ย. 2017 9:17 pm บอร์ด Linux - Web Server
1
14
ส 16 ก.ย. 2017 9:17 pm โดย P'Eak
อยากได้แบตเครื่องเล่น sony walkman ยังมีขายที่ไหนบ้างค่ะ
โดย thatsawan ส 16 ก.ย. 2017 7:39 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
23
ส 16 ก.ย. 2017 7:39 pm โดย P'Eak
อยากทราบวิธีดึง Logo จากไฟล์ใน Joomla ครับ
โดย Before Dong ส 16 ก.ย. 2017 10:57 am บอร์ด Joomla Development
5
45
ส 16 ก.ย. 2017 1:42 pm โดย thatsawan
อยากทราบวิธีดึงข้อมูลสี จาก CodeHTML เป็นดึงจากตัวแปล ใน Joomla
โดย Before Dong ส 16 ก.ย. 2017 10:54 am บอร์ด Joomla Development
2
31
ส 16 ก.ย. 2017 1:38 pm โดย mindphp
การ select (ซีเลคท) ในฐานข้อมูล PostgreSQL (โพสต์เกรสคิวเอล) แบบใช้โค้ด SQL (เอส คิว แอล)
โดย natnicha001 ส 16 ก.ย. 2017 1:18 pm บอร์ด SQL Knowledge
0
14
ส 16 ก.ย. 2017 1:18 pm โดย natnicha001
การ select (ซีเลคท) ในฐานข้อมูล PostgreSQL (โพสต์เกรสคิวเอล) โดยเลือกเพียงบางคอลัมน์
โดย natnicha001 ส 16 ก.ย. 2017 1:11 pm บอร์ด SQL Knowledge
0
10
ส 16 ก.ย. 2017 1:11 pm โดย natnicha001