New Input Types คือตัวลือกใหม่ที่ถูกเพิ่มใน HTML5 เพื่อให้เว็บไซต์ที่สร้างด้วย HTML5 สามารถปรับแต่งฟอร์มได้หลากหลายมากขึ้น โดยแท็กที่ใช้คือแท็ก <input> ซึ่งหลายๆ Attribute นั้น มีประโยชน์และประหยัดเวลาในการทำเว็บไซด์อย่างมากเลยทีเดียว ตัวอย่างเช่น
New Input Types Attributes
tel กำหนด input value ให้เป็นที่ใส่ ข้อมูล หมายเลข โทรศัพท์
search กำหนด input เป็น Search field
url กำหนด input value ให้เป็นที่ใส่ ข้อมูล URL Address
email กำหนด input value ให้เป็นที่ใส่ ข้อมูล Email Address ตั้งแต่ 1 Address ขึ้นไป
datetime กำหนด input value ให้เป็นที่ใส่ ข้อมูล วันเวลา
date กำหนด input value ให้เป็นที่ใส่ ข้อมูลวันที่
month กำหนด input value ให้เป็นที่ใส่ ข้อมูล เดือน
week กำหนด input value ให้เป็นที่ใส่ ข้อมูล สัปดาห์
time กำหนด input value ให้เป็นที่ใส่ ข้อมูลเวลา
datetime-local กำหนด input value ให้เป็นที่ใส่ ข้อมูล local date/time
number กำหนด input value ให้เป็นที่ใส่ ข้อมูล ชนิดตัวเลข
range กำหนด input value ให้เป็นที่ใส่ ข้อมุล ที่สามารถกำหนดช่วงของข้อมูลได้
color กำหนด input value ให้เป็นที่ใส่ ข้อมูล ของค่าสี เช่น #FF00F0 เป็นต้น
Range Attributes
max number กำหนด input value สูงสุด
min number กำหนด input value ต่ำสุด
step number กำหนด input value เป็น Step เช่น step="5" ค่าที่เป็นไปได้จะเป็น -10, -5, 0, 5, 10 เป็นต้น
value number กำหนด input value ค่า default value
ตัวอย่าง
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>
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>
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>
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>
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>