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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Work Shop การรับชำระ ในระบบ Open ERP
โดย EyePornnipa จ 24 มิ.ย. 2019 7:00 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
0
8
จ 24 มิ.ย. 2019 7:00 pm โดย EyePornnipa
ย่อขนาดรูปด้วยโปรแกรม Gimp
โดย jamepiyawat จ 24 มิ.ย. 2019 6:49 pm บอร์ด Graphic design
0
3
จ 24 มิ.ย. 2019 6:49 pm โดย jamepiyawat
ทำความรู้จักกับ Sensor water flow
โดย Patipat จ 24 มิ.ย. 2019 6:42 pm บอร์ด IOT - Internet of things
0
5
จ 24 มิ.ย. 2019 6:42 pm โดย Patipat
VDO การสร้างลิงค์ แอดเพื่อน ใน Line
โดย chatee supasand จ 24 มิ.ย. 2019 6:15 pm บอร์ด MT33 - นายชาตรี สุภาแสน
0
3
จ 24 มิ.ย. 2019 6:15 pm โดย chatee supasand
B - กด SAVE การรับชำระไม่ได้
โดย EyePornnipa จ 24 มิ.ย. 2019 6:01 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
5
จ 24 มิ.ย. 2019 6:01 pm โดย EyePornnipa
มารู้จักตัวแปรชนิด tuple ในภาษา python
โดย jirawoot จ 24 มิ.ย. 2019 5:50 pm บอร์ด Python Knowledge
0
5
จ 24 มิ.ย. 2019 5:50 pm โดย jirawoot
วิธีทำขอบตัวอักษรด้วย Gimp
โดย jamepiyawat จ 24 มิ.ย. 2019 5:17 pm บอร์ด Graphic design
1
15
จ 24 มิ.ย. 2019 6:12 pm โดย mindphp
ตัวอย่างการใช้ Function str_replace() ลบcomma(,) ออกจากจำนวนตัวเลข
โดย Patipat จ 24 มิ.ย. 2019 5:12 pm บอร์ด PHP Knowledge
0
10
จ 24 มิ.ย. 2019 5:12 pm โดย Patipat
การใช้ Script กรอกข้อมูลตัวเลขจำนวนแล้วให้ขึ้นคอมม่า(,)ภาษา PHP
โดย Patipat จ 24 มิ.ย. 2019 4:53 pm บอร์ด Jquery & Ajax Knowledge
0
5
จ 24 มิ.ย. 2019 4:53 pm โดย Patipat
มารู้จักตัวแปร list ในภาษา python
โดย jirawoot จ 24 มิ.ย. 2019 4:47 pm บอร์ด Python Knowledge
0
5
จ 24 มิ.ย. 2019 4:47 pm โดย jirawoot
การ download คลิป ใน youtube ด้วย clipconverter
โดย jirawoot จ 24 มิ.ย. 2019 3:46 pm บอร์ด Share Knowledge
0
7
จ 24 มิ.ย. 2019 3:46 pm โดย jirawoot
เมื่อคุณลงโปรแกรมอะไรสักอย่างแล้วเกิดเหตุการณ์แบบนี้ขึ้น
โดย chatee supasand จ 24 มิ.ย. 2019 3:19 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
6
จ 24 มิ.ย. 2019 3:19 pm โดย chatee supasand
การใช้ Script กรอกข้อมูลตัวเลขจำนวนแล้วให้ขึ้นคอมม่า(,)ภาษา PHP
โดย Patipat จ 24 มิ.ย. 2019 2:44 pm บอร์ด JavaScript & Jquery Ajax
0
7
จ 24 มิ.ย. 2019 2:44 pm โดย Patipat
VDO การใช้งาน ระบบ ERP และเรียนรู้งานบริการของบริษัท
โดย EyePornnipa จ 24 มิ.ย. 2019 2:40 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
0
27
จ 24 มิ.ย. 2019 2:40 pm โดย EyePornnipa
B - รบกวนตรวจสอบปัญหาการสั่งซื้อของลูกค้าด่วนครับ [2019-06][021]
โดย tsukasaz จ 24 มิ.ย. 2019 2:27 pm บอร์ด Diageo - Web Ordering - Tester
1
2
จ 24 มิ.ย. 2019 3:15 pm โดย tsukasaz
เปลี่ยนเว็บให้ต่างประเทศเป็นภาษาไทย google แปลภาษา
โดย jamepiyawat จ 24 มิ.ย. 2019 12:44 pm บอร์ด Share Knowledge
0
11
จ 24 มิ.ย. 2019 12:44 pm โดย jamepiyawat
อยากทราบวิธีใช้ Script พอกดเลขแล้วให้ขึ้นคอมม่า(,)ภาษา PHP
โดย Patipat จ 24 มิ.ย. 2019 11:39 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
18
จ 24 มิ.ย. 2019 2:10 pm โดย Patipat
Windows Terminal เวอร์ชั่นใหม่ออกมาแล้ว ดาวน์โหลดได้เลยที่ Microsoft Store
โดย chatee supasand จ 24 มิ.ย. 2019 11:26 am บอร์ด Microsoft Office Knowledge & line & Etc
0
4
จ 24 มิ.ย. 2019 11:26 am โดย chatee supasand
ใน phpbb 3.1 ถ้าเราต้องการเปิดสิทธิ์ให้ user สามารถแก้ไข โพสต์ user อื่นได้ต้องตั้งค่ายังไงค่ะ
โดย thatsawan จ 24 มิ.ย. 2019 11:13 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
8
จ 24 มิ.ย. 2019 11:13 am โดย thatsawan
B - การแสดงผล Database Summary [2019-06][007]
โดย tsukasaz จ 24 มิ.ย. 2019 10:56 am บอร์ด IIEC - Feedback Service System - Tester
1
2
จ 24 มิ.ย. 2019 11:54 am โดย tsukasaz