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