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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 18 มีนาคม 2562
โดย สริญญา สมสา จ 18 มี.ค. 2019 9:35 am บอร์ด MT32 - นางสาวสริญญา สมสา
0
2
จ 18 มี.ค. 2019 9:35 am โดย สริญญา สมสา
หากไม่ได้ไปใช้สิทธิเลือกตั้งสมาชิกสภาผู้แทนราษฎร จะมีผลอย่างไร และควรทำอย่างไร
โดย saibennn9 อ 17 มี.ค. 2019 10:05 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
16
อ 17 มี.ค. 2019 10:05 am โดย saibennn9
⭐⭐⭐⭐⭐ ฟิลเลอร์คาง กับ ผ่าตัดเสริมคาง อย่างไหนเสี่ยงกว่ากัน ⭐⭐⭐⭐⭐
โดย mstr99 ส 16 มี.ค. 2019 1:00 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
18
ส 16 มี.ค. 2019 1:00 pm โดย mstr99
งานประจำวันที่ 16 มีนาคม 2562
โดย Four ส 16 มี.ค. 2019 10:28 am บอร์ด M077 - อิษยา งามสอาด
1
6
ส 16 มี.ค. 2019 10:31 am โดย Four
ขอสอบถามและขอคำแนะนำครับ
โดย toonytoony2004 ส 16 มี.ค. 2019 9:43 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
8
ส 16 มี.ค. 2019 9:43 am โดย toonytoony2004
ต้นไม้มงคล
โดย สริญญา สมสา ศ 15 มี.ค. 2019 5:41 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
15
ศ 15 มี.ค. 2019 5:41 pm โดย สริญญา สมสา
อัพเดดความคืบหน้า / Progress - Diageo
โดย mindphp พฤ 07 ก.พ. 2019 11:51 pm บอร์ด Diageo - Web Ordering
6
37
ศ 15 มี.ค. 2019 6:56 pm โดย tsukasaz
เลือกซื้อบ้านอย่างไร ที่ถูกวิธี
โดย สริญญา สมสา ศ 15 มี.ค. 2019 4:16 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
14
ศ 15 มี.ค. 2019 4:16 pm โดย สริญญา สมสา
การเตรียมความพร้อมในการสัมภาษณ์งาน
โดย สริญญา สมสา ศ 15 มี.ค. 2019 3:52 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
11
ศ 15 มี.ค. 2019 3:52 pm โดย สริญญา สมสา
รวมร้านชาบู-สุกี้ 5 อันดับ
โดย สริญญา สมสา ศ 15 มี.ค. 2019 3:27 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
13
ศ 15 มี.ค. 2019 3:27 pm โดย สริญญา สมสา
เลือกซื้อเครื่องปริ้นที่เหมาะกับการใช้งาน
โดย สริญญา สมสา ศ 15 มี.ค. 2019 2:50 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
13
ศ 15 มี.ค. 2019 2:50 pm โดย สริญญา สมสา
ร้านของหวานในย่านวังหิน เเละ โชคชัย 4
โดย สริญญา สมสา ศ 15 มี.ค. 2019 2:22 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
13
ศ 15 มี.ค. 2019 2:22 pm โดย สริญญา สมสา
ร้านของหวานในย่านวังหิน เเละ โชคชัย 4
โดย Anonymous ศ 15 มี.ค. 2019 12:50 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
29
ศ 15 มี.ค. 2019 12:50 pm โดย บุคคลทั่วไป
R - อยากได้ยอดรวมเป็นจำนวน ลัง และ ยอดรวม บาทของทั้งคำสั่งซื้อ
โดย Parichat ศ 15 มี.ค. 2019 10:20 am บอร์ด Diageo - Web Ordering
0
2
ศ 15 มี.ค. 2019 10:20 am โดย Parichat
R - ไม่มี Order UOM ที่ SKU เวลาสั่งซื้อ เพื่อเลือก ลัง หรือ ขวด
โดย Parichat ศ 15 มี.ค. 2019 10:18 am บอร์ด Diageo - Web Ordering
0
2
ศ 15 มี.ค. 2019 10:18 am โดย Parichat
R - ปุ่มเปลี่ยนภาษาหายหลังจากใช้
โดย Parichat ศ 15 มี.ค. 2019 10:16 am บอร์ด Diageo - Web Ordering
1
3
ศ 15 มี.ค. 2019 1:54 pm โดย Parichat
งานประจำวันที่ 15 มีนาคม 2562
โดย Four ศ 15 มี.ค. 2019 8:56 am บอร์ด M077 - อิษยา งามสอาด
1
14
ส 16 มี.ค. 2019 10:29 am โดย Four
งานประจำวันที่ 15 มีนาคม 2562
โดย สริญญา สมสา ศ 15 มี.ค. 2019 8:48 am บอร์ด MT32 - นางสาวสริญญา สมสา
1
13
ศ 15 มี.ค. 2019 9:33 am โดย สริญญา สมสา
ความรู้การใช้งาน ทางความพิวเตอร์
โดย ธวัชชัย แสนหาญ พฤ 14 มี.ค. 2019 7:32 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
26
พฤ 14 มี.ค. 2019 7:32 pm โดย ธวัชชัย แสนหาญ
เงินเดือน
โดย จันนุสรณ์ ดีแก่ พฤ 14 มี.ค. 2019 7:03 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
20
พฤ 14 มี.ค. 2019 7:03 pm โดย จันนุสรณ์ ดีแก่