ให้เรตสมาชิก: 4 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งาน
 

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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ประกาศปิดหมวด ยกเลิกอัพเดดเนื้อหา และ งดตอบคำถามต่างๆ เกี่ยวกับ Magento
โดย mindphp ส 14 ก.ย. 2019 5:31 pm บอร์ด Magento user Guide Knowledge
0
21
ส 14 ก.ย. 2019 5:31 pm โดย mindphp
แนะนำ และสอนการใช้งาน Google Chrome Remote Desktop โปรแกรมรีโหมทหน้าจอ
โดย zend_framework ส 14 ก.ย. 2019 5:28 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
22
ส 14 ก.ย. 2019 5:28 pm โดย zend_framework
อยากทราบวิธีสร้างรูปภาพในไลน์กลุ่มแล้ว กดที่รูปเด้งเข้าไลน์@ของเราเอง
โดย Anonymous ส 14 ก.ย. 2019 4:38 pm บอร์ด Mobile Programming - Android, iOS, Window Phone
1
31
ส 14 ก.ย. 2019 4:52 pm โดย mindphp
อยากทราบวิธีที่จะให้ อาเรย์วนลูปอย่างไรครับ
โดย Patipat ส 14 ก.ย. 2019 3:46 pm บอร์ด Joomla Development
3
34
ส 14 ก.ย. 2019 5:25 pm โดย mindphp
สร้างแถบเมนู
โดย alonglot ส 14 ก.ย. 2019 12:35 pm บอร์ด Joomla Development
0
18
ส 14 ก.ย. 2019 12:35 pm โดย alonglot
งานประจำวันที่ 14 กันยายน 2562
โดย Patipat ส 14 ก.ย. 2019 10:39 am บอร์ด M088 - ปฏิภัทร สารธรรม
1
6
ส 14 ก.ย. 2019 7:03 pm โดย Patipat
งานประจำวันที่ 14 กันยายน 2562
โดย aninthana ส 14 ก.ย. 2019 10:22 am บอร์ด M092 - อนินธนา บุญยัง
2
12
ส 14 ก.ย. 2019 8:39 pm โดย thatsawan
งานประจำวันที่ 14 กันยายน 2562
โดย jamepiyawat ส 14 ก.ย. 2019 10:05 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
1
4
ส 14 ก.ย. 2019 7:05 pm โดย jamepiyawat
งาน RML Purchase Requisition (PR)&APPLICATION FORM
โดย chatee supasand ศ 13 ก.ย. 2019 7:45 pm บอร์ด MT33 - นายชาตรี สุภาแสน
0
2
ศ 13 ก.ย. 2019 7:45 pm โดย chatee supasand
google photos เพิ่มฟีเจอร์ Memories นำภาพถ่ายหรือวิดีโอเก่า ๆ ของเรามาแสดง
โดย jamepiyawat ศ 13 ก.ย. 2019 6:08 pm บอร์ด Share Knowledge
0
18
ศ 13 ก.ย. 2019 6:08 pm โดย jamepiyawat
Microsoft เปลี่ยนชื่อ Microsoft To-Do เป็น To Do หวังให้ใช้งานแทน Wunderlis
โดย chatee supasand ศ 13 ก.ย. 2019 6:05 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
19
ศ 13 ก.ย. 2019 6:05 pm โดย chatee supasand
วิธีการ Export ข้อมูลมาเป็นไฟล์ Excel โดย phpbb
โดย Ittichai_chupol ศ 13 ก.ย. 2019 4:24 pm บอร์ด PHP Knowledge
0
24
ศ 13 ก.ย. 2019 4:24 pm โดย Ittichai_chupol
ข้อแตกต่างระหว่างสัญญาเช่าทางการเงินกับสัญญาเช่าดำเนินงาน
โดย EyePornnipa ศ 13 ก.ย. 2019 4:23 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
0
4
ศ 13 ก.ย. 2019 4:23 pm โดย EyePornnipa
อยากทราบวิธีการแก้ไข Undefined index ใน phpbb
โดย Ittichai_chupol ศ 13 ก.ย. 2019 3:26 pm บอร์ด Programming - PHP
1
35
ศ 13 ก.ย. 2019 3:36 pm โดย บุคคลทั่วไป
สินทรัพย์ถาวร (Fixed Assets) คือ
โดย EyePornnipa ศ 13 ก.ย. 2019 2:54 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
0
7
ศ 13 ก.ย. 2019 2:54 pm โดย EyePornnipa
อยากทราบวิธีทำให้ path way มีลูกศรชี ครับ
โดย jamepiyawat ศ 13 ก.ย. 2019 2:53 pm บอร์ด Joomla Development
1
30
ศ 13 ก.ย. 2019 2:55 pm โดย tsukasaz
R - ปรับ URL สำหรับ โหลดไฟล์ Joomla Core มาไว้ที่ jupdate.mindphp.com
โดย mindphp ศ 13 ก.ย. 2019 12:15 pm บอร์ด MDUpgrade
0
1
ศ 13 ก.ย. 2019 12:15 pm โดย mindphp
B - Allowed memory size of 134217728 bytes exhausted
โดย mindphp ศ 13 ก.ย. 2019 12:08 pm บอร์ด MDUpgrade
2
2
ศ 13 ก.ย. 2019 12:30 pm โดย mindphp
สอบถามครับ RML สร้างเส้นตาราง แบบนี้ยังไงอะครับ
โดย chatee supasand ศ 13 ก.ย. 2019 10:28 am บอร์ด Programming - C/C++ & java & Python
2
50
ศ 13 ก.ย. 2019 11:03 am โดย chatee supasand
งานประจำวันที่ 13 กันยายน 2562
โดย aninthana ศ 13 ก.ย. 2019 9:36 am บอร์ด M092 - อนินธนา บุญยัง
1
10
ศ 13 ก.ย. 2019 6:00 pm โดย aninthana