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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
MOD_MTB_NEWS_RECENT
ปฏิทินจีนปี 2561
โดย mindphp ส 16 ธ.ค. 2017 1:25 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
5
ส 16 ธ.ค. 2017 1:25 pm โดย mindphp
แนบไฟล์ภาพ เขียน เขียน code insert จะนำข้อมูลลง DB
โดย Mmn ส 16 ธ.ค. 2017 1:12 pm บอร์ด SQL - Database
3
11
ส 16 ธ.ค. 2017 1:12 pm โดย mindphp
อัพเกรด Joomla 3.7 เป็น 3.8.3 แบบ Manual ไม่ได้ครับ
โดย Before Dong ศ 15 ธ.ค. 2017 7:07 pm บอร์ด Joomla Development
0
10
ศ 15 ธ.ค. 2017 7:07 pm โดย Before Dong
[ปัญหา] ได้ข้อมูลมา แต่ต้องการจะแยกข้อมูลทีละตัวเพื่อเอาไปใช้งานค่ะ
โดย Wallapa ศ 15 ธ.ค. 2017 7:02 pm บอร์ด Programming - C/C++ & java & Python
0
12
ศ 15 ธ.ค. 2017 7:02 pm โดย Wallapa
สงคราม OpenStack ปะทะ VMware ร้อนแรงเมื่อมี IoT และ NFV
โดย kubarnaza ศ 15 ธ.ค. 2017 5:48 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
13
ศ 15 ธ.ค. 2017 5:48 pm โดย kubarnaza
[ปัญหา] ดึงข้อมูลเพื่อให้แสดงค่าใน PDF แต่ Error ค่ะ
โดย Wallapa ศ 15 ธ.ค. 2017 10:59 am บอร์ด Programming - C/C++ & java & Python
4
58
ศ 15 ธ.ค. 2017 10:59 am โดย Wallapa
ปฏิทินบัญชี ที่รวบรวมวันยื่นภาษีที่ทุกองค์กรต้องยื่น ปี 2018/ ปฏิทิน 2561 พร้อมวันหยุด - โหลดก่อนได้ก่อนอย่ารอช้า!
โดย Before Dong ศ 15 ธ.ค. 2017 10:23 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
43
ศ 15 ธ.ค. 2017 10:23 am โดย Before Dong
ฝันร้ายของโปรแกรมเมอร์
โดย Before Dong ศ 15 ธ.ค. 2017 9:42 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
33
ศ 15 ธ.ค. 2017 9:42 am โดย mindphp
[ปัญหา] เขียน selenium เพื่อcheck error แต่โค้ดที่เขียนเกิด error
โดย Panchalee พฤ 14 ธ.ค. 2017 9:27 pm บอร์ด Programming - C/C++ & java & Python
2
27
พฤ 14 ธ.ค. 2017 9:27 pm โดย mindphp
รบกวนขอวิธีคำนวนหาจำนวนตามข้อความครับ
โดย Artayaarray Dear พฤ 14 ธ.ค. 2017 4:41 pm บอร์ด Programming - PHP
1
17
พฤ 14 ธ.ค. 2017 4:41 pm โดย thatsawan
อยากทราบขั้นตอนในการทำ selenium เพื่อเช็ค Error 404
โดย Panchalee พฤ 14 ธ.ค. 2017 3:55 pm บอร์ด Programming - C/C++ & java & Python
1
30
พฤ 14 ธ.ค. 2017 3:55 pm โดย nuattawoot
ม้าลายยุค 4.0
โดย Before Dong พฤ 14 ธ.ค. 2017 9:31 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
85
พฤ 14 ธ.ค. 2017 9:31 am โดย Before Dong
สร้างไฟล์เอกสารด้วย Reportlab (รีพอร์ตแล็บ)
โดย Wallapa พ 13 ธ.ค. 2017 5:39 pm บอร์ด Python Knowledge
0
25
พ 13 ธ.ค. 2017 5:39 pm โดย Wallapa
magento error แก้ยังไง ช่วยทีค่ะ !!!
โดย tipp3794 พ 13 ธ.ค. 2017 11:24 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
4
39
พ 13 ธ.ค. 2017 11:24 am โดย Akk Chu
Responsive Web Design Ver.ขนมปัง
โดย Before Dong พ 13 ธ.ค. 2017 10:19 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
67
พ 13 ธ.ค. 2017 10:19 am โดย Before Dong
การติดตั้ง Library บน Arduino IDE
โดย chayakan อ 12 ธ.ค. 2017 5:34 pm บอร์ด IOT - Internet of things
0
30
อ 12 ธ.ค. 2017 5:34 pm โดย chayakan
การติดตั้งโปรแกรม และการใช้งาน ArduinoIDE
โดย chayakan อ 12 ธ.ค. 2017 4:54 pm บอร์ด IOT - Internet of things
0
23
อ 12 ธ.ค. 2017 4:54 pm โดย chayakan
Arduino คืออะไร ?
โดย chayakan อ 12 ธ.ค. 2017 4:01 pm บอร์ด IOT - Internet of things
0
39
อ 12 ธ.ค. 2017 4:01 pm โดย chayakan
จะดึงข้อมูลจากฐานข้อมูล ให้มาแสดงใน PDF ค่ะ
โดย Wallapa อ 12 ธ.ค. 2017 11:33 am บอร์ด Programming - C/C++ & java & Python
4
83
อ 12 ธ.ค. 2017 11:33 am โดย Wallapa
รวมงานประจำปี 2560
โดย chayakan อ 12 ธ.ค. 2017 10:58 am บอร์ด M054 - ชญากาณฑ์ ชาญชัย
0
2
อ 12 ธ.ค. 2017 10:58 am โดย chayakan