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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
เปลี่ยน Default Python3 บนเครื่อง Ubuntu 16.04 จาก Python3.5 เป็น Python3.6
โดย mindphp พฤ 21 พ.ย. 2019 7:04 am บอร์ด Linux - Web Server
0
1
พฤ 21 พ.ย. 2019 7:04 am โดย mindphp
สร้าง Template ใน Joomla
โดย bankjittapol พ 20 พ.ย. 2019 8:06 pm บอร์ด Joomla Developing Knowledge
0
3
พ 20 พ.ย. 2019 8:06 pm โดย bankjittapol
list box เลือกแสดงรูปแบบของวันที่ (Date Format )
โดย bankjittapol พ 20 พ.ย. 2019 6:55 pm บอร์ด Joomla Developing Knowledge
0
7
พ 20 พ.ย. 2019 6:55 pm โดย bankjittapol
คำสั่งเข้าใช้งาน PostgreSQL ด้วย Command Line
โดย mindphp อ 30 ก.ค. 2017 11:24 pm บอร์ด PostgreSQL
6
1810
พ 20 พ.ย. 2019 6:38 pm โดย mindphp
replace() คำสั่งค้นหาแทนที่ใน javascript
โดย jamepiyawat พ 20 พ.ย. 2019 6:36 pm บอร์ด Jquery & Ajax Knowledge
0
6
พ 20 พ.ย. 2019 6:36 pm โดย jamepiyawat
VDO - แนะนำฟังก์ชั่นระบบ Webboard Mindphp.com ใหม่ (phpbb v.3.2)
โดย numtan5839 พ 20 พ.ย. 2019 6:31 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
0
5
พ 20 พ.ย. 2019 6:31 pm โดย numtan5839
วิธีการเขียน SQL เพื่ม เพิ่มคอลัมน์ ฐานข้อมูล
โดย Ittichai_chupol พ 20 พ.ย. 2019 6:06 pm บอร์ด SQL Knowledge
0
5
พ 20 พ.ย. 2019 6:06 pm โดย Ittichai_chupol
VDO - Program Exchange Rate
โดย numtan5839 อ 12 พ.ย. 2019 2:42 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
2
65
พ 20 พ.ย. 2019 6:01 pm โดย numtan5839
วิธีเช็คเวอร์ชั่น ของ Joomla
โดย bankjittapol พ 20 พ.ย. 2019 5:39 pm บอร์ด Joomla Developing Knowledge
0
13
พ 20 พ.ย. 2019 5:39 pm โดย bankjittapol
G - ข้อมูลสำหรับทำระบบ สรุปความต้องการ / ประชุมกับลูกค้า- ThaiVI
โดย mindphp พ 10 ต.ค. 2018 3:29 am บอร์ด ThaiVI (Main)
10
129
พ 20 พ.ย. 2019 4:15 pm โดย thatsawan
การปรับเปลี่ยนข้อมูลของ odject โดยใช้ javascript
โดย Ittichai_chupol พ 20 พ.ย. 2019 3:34 pm บอร์ด Jquery & Ajax Knowledge
0
7
พ 20 พ.ย. 2019 3:34 pm โดย Ittichai_chupol
ค้นหาแบบนี้ ใช้ส่วนเสริมตัวไหนครับ
โดย toonytoony2004 อ 19 พ.ย. 2019 8:25 pm บอร์ด Joomla Development
2
21
พ 20 พ.ย. 2019 1:12 pm โดย mindphp
ระหว่าง joomla กับ wordpress แตกต่างกันยังไงครับ
โดย aloha11x พ 13 พ.ย. 2019 2:12 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
65
พ 20 พ.ย. 2019 1:10 pm โดย mindphp
จะทำยังไงถึงจะแปลงวันที่ ให้อยู่ในรูปแบบของ universal date format ครับ
โดย bankjittapol พ 20 พ.ย. 2019 10:44 am บอร์ด Joomla Development
2
25
พ 20 พ.ย. 2019 6:24 pm โดย bankjittapol
งานประจำวันที่ 20 พฤศจิกายน 2562
โดย numtan5839 พ 20 พ.ย. 2019 10:10 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
1
17
พ 20 พ.ย. 2019 7:46 pm โดย numtan5839
list box เพื่อเลือกจังหวัดที่ต้องการให้แสดงผลพยากรณ์อากาศ
โดย bankjittapol อ 19 พ.ย. 2019 7:12 pm บอร์ด Joomla Developing Knowledge
0
15
อ 19 พ.ย. 2019 7:12 pm โดย bankjittapol
justify-content: space-between คำสั่ง flex ที่จะช่วยให้ระยะห่างแต่ละรูปเท่ากัน
โดย jamepiyawat อ 19 พ.ย. 2019 6:13 pm บอร์ด CSS Knowledge
0
7
อ 19 พ.ย. 2019 6:13 pm โดย jamepiyawat
วิธีการสร้าง form เมื่อกดปุ่ม โดยใช้ javascript
โดย Ittichai_chupol อ 19 พ.ย. 2019 6:09 pm บอร์ด Jquery & Ajax Knowledge
0
12
อ 19 พ.ย. 2019 6:09 pm โดย Ittichai_chupol
Introducing the new Mindphp.com Webboard system function (phpbb v.3.2)
โดย numtan5839 อ 19 พ.ย. 2019 6:06 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
0
7
อ 19 พ.ย. 2019 6:06 pm โดย numtan5839
อยากทราบวิธีการ Link ปุ่ม
โดย numtan5839 อ 19 พ.ย. 2019 5:06 pm บอร์ด MindPHP News / Feedback
2
29
อ 19 พ.ย. 2019 5:50 pm โดย numtan5839