บทที่ 8 New Input Types ตอนที่ 2
6. Input Type: number
สร้างกล่องให้ใส่เลข บราวเซอร์ที่สนับสนุน google chome ,opera,safari
<html>
<body>
<form action="demo_form.asp">
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
<input type="submit">
</form>
</body>
</html>ผลลัพธ์คือ
7.Input Type: range
สร้างช่องใส่ตัวเลข โดยจำกำหนดค่า ตัวเลขตำสุดคือ min และค่าตัวเลขสูงสุดคือ max บราวเซอร์ที่สนับสนุน google chome ,opera,safari
<html>
<body>
<form action="demo_form.asp" method="get">
Points: <input type="range" name="points" min="1" max="10">
<input type="submit">
</form>
</body>
</html>ผลลัพธ์คือ
8. Input Type: search
สร้างช่องค้นหา บราวเซอร์ที่สนับสนุน google chome ,safari
<html>
<body>
<form action="demo_form.asp">
Search Google: <input type="search" name="googlesearch"><br>
<input type="submit">
</form>
</body>
</html>ผลลัพธ์คือ
9. Input Type: tel
สำหรับใส่เบอร์โทร
<html>
<body>
<form action="demo_form.asp">
Telephone: <input type="tel" name="usrtel"><br>
<input type="submit">
</form>
</body>
</html>ผลลัพธ์คือ
10. Input Type: time
สร้างช่องกรอกเวลา บราวเซอร์ที่สนับสนุน google chome ,opera,safari
<html>
<body>
<form action="demo_form.asp">
Select a time: <input type="time" name="usr_time">
<input type="submit">
</form>
</body>
</html>ผลลัพธ์คือ
11.Input Type: url
สร้างช่องใส่ URL โดยจะเติม http:// ด้านหน้าเช่น http://www.mindphp.com บราวเซอร์ที่สนับสนุน google chrome ,opera, firefox
<html>
<body>
<form action="demo_form.asp">
Add your homepage: <input type="url" name="homepage"><br>
<input type="submit">
</form>
</body>
</html>ผลลัพธ์คือ
12. Input Type: week
ปฏิทินสำหรับใส่ สัปดาห์ เช่น สัปดาห์ที่ของปี (2009-W16) บราวเซอร์ที่สนับสนุน google chome ,opera,safari
<html>
<body>
<form action="demo_form.asp">
Select a week: <input type="week" name="year_week">
<input type="submit">
</form>
</body>
</html>ผลลัพธ์คือ
อ่านเพิ่มเติม
บทที่ 8 HTML5 New Input Types ตัวลือกใหม่สำหรับการปรับแต่งฟอร์มใน HTML5 ปรับแต่งฟอร์มได้หลากหลายมากขึ้น ตอนที่ 1
ข้อมูลอ้างอิง
http://www.w3schools.com
