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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ภาษาซี กับ โจทย์ คำนวณ BMI
โดย Aussadawut ส 17 พ.ย. 2018 7:34 pm บอร์ด Share Knowledge
0
7
ส 17 พ.ย. 2018 7:34 pm โดย Aussadawut
list หัวข้อเเชร์ความรู้
โดย ธวัชชัย แสนหาญ ส 17 พ.ย. 2018 7:18 pm บอร์ด MT27 - ธวัชชัย แสนหาญ
0
2
ส 17 พ.ย. 2018 7:18 pm โดย ธวัชชัย แสนหาญ
การใช้ Foreach loop Statements ใน python
โดย ธวัชชัย แสนหาญ ส 17 พ.ย. 2018 7:16 pm บอร์ด Python Knowledge
0
8
ส 17 พ.ย. 2018 7:16 pm โดย ธวัชชัย แสนหาญ
การกำหนดค่าให้ for if
โดย จันนุสรณ์ ดีแก่ ส 17 พ.ย. 2018 7:12 pm บอร์ด PHP Knowledge
0
5
ส 17 พ.ย. 2018 7:12 pm โดย จันนุสรณ์ ดีแก่
การสร้างสูตรคูณ ในภาษา php แบบสั้นๆ
โดย จันนุสรณ์ ดีแก่ ส 17 พ.ย. 2018 6:55 pm บอร์ด PHP Knowledge
0
5
ส 17 พ.ย. 2018 6:55 pm โดย จันนุสรณ์ ดีแก่
การUpdateค่าในตัวแปรชนิด list ใน python
โดย ธวัชชัย แสนหาญ ส 17 พ.ย. 2018 6:45 pm บอร์ด Python Knowledge
0
6
ส 17 พ.ย. 2018 6:45 pm โดย ธวัชชัย แสนหาญ
การใชังานตัวแปร dictionary ใน python
โดย ธวัชชัย แสนหาญ ส 17 พ.ย. 2018 6:19 pm บอร์ด Share Knowledge
0
6
ส 17 พ.ย. 2018 6:19 pm โดย ธวัชชัย แสนหาญ
การใช้เงื่อนไข switch case
โดย จันนุสรณ์ ดีแก่ ส 17 พ.ย. 2018 6:12 pm บอร์ด PHP Knowledge
0
4
ส 17 พ.ย. 2018 6:12 pm โดย จันนุสรณ์ ดีแก่
ภาษาซี กับ โจทย์ Loop ในตำนาน (7) รับค่าตัวเลขไปเรื่อยๆจนกว่าจะเจอเลข 0 แล้วจึงหยุดรับค่า พร้อมทั้งนับว่าหารด้วย 5 ลงตัว
โดย Aussadawut ส 17 พ.ย. 2018 6:08 pm บอร์ด Share Knowledge
0
7
ส 17 พ.ย. 2018 6:08 pm โดย Aussadawut
การกำหนดตัวแปร ใน python
โดย ธวัชชัย แสนหาญ ส 17 พ.ย. 2018 5:09 pm บอร์ด Share Knowledge
0
7
ส 17 พ.ย. 2018 5:09 pm โดย ธวัชชัย แสนหาญ
ภาษาซี กับ โจทย์ Loop ในตำนาน (6) รับค่าตัวเลขไปเรื่อยๆจนกว่าจะเจอเลข 0 แล้วจึงหยุดรับค่า
โดย Aussadawut ส 17 พ.ย. 2018 4:59 pm บอร์ด Share Knowledge
0
9
ส 17 พ.ย. 2018 4:59 pm โดย Aussadawut
ภาษาซี กับ โจทย์ Loop ในตำนาน (5) แสดงเลขคู่/คี่ ด้วย Loop do while ตั้ง 0 จนถึง 100
โดย Aussadawut ส 17 พ.ย. 2018 4:23 pm บอร์ด Share Knowledge
0
9
ส 17 พ.ย. 2018 4:23 pm โดย Aussadawut
ภาษาซี กับ โจทย์ Loop ในตำนาน (4) แสดงเลขคู่/คี่ ด้วย Loop for ตั้ง 0 จนถึง 100
โดย Aussadawut ส 17 พ.ย. 2018 3:23 pm บอร์ด Share Knowledge
0
14
ส 17 พ.ย. 2018 3:23 pm โดย Aussadawut
การสืบทอด Class แบบ Object-Oriented หรือ OOP ใน Python
โดย ธวัชชัย แสนหาญ ส 17 พ.ย. 2018 3:20 pm บอร์ด Python Knowledge
0
10
ส 17 พ.ย. 2018 3:20 pm โดย ธวัชชัย แสนหาญ
ภาษาซี กับ โจทย์ Loop ในตำนาน (3) แสดงเลขคู่/คี่ ด้วย Loop while ตั้ง 0 จนถึง 100
โดย Aussadawut ส 17 พ.ย. 2018 2:57 pm บอร์ด Share Knowledge
0
14
ส 17 พ.ย. 2018 2:57 pm โดย Aussadawut
การใช้ Overriding Method ใน python
โดย ธวัชชัย แสนหาญ ส 17 พ.ย. 2018 2:33 pm บอร์ด Python Knowledge
0
9
ส 17 พ.ย. 2018 2:33 pm โดย ธวัชชัย แสนหาญ
VDO - วิธีการใช้งาน gitlab (กิตแลบ)
โดย prakon ส 17 พ.ย. 2018 1:58 pm บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
0
3
ส 17 พ.ย. 2018 1:58 pm โดย prakon
python 2.7 หารตัวเลขเป็น ทศนิยมไม่ได้ แก้ไขยังไงได้บ้างค่ะ
โดย thatsawan ส 17 พ.ย. 2018 12:48 pm บอร์ด Programming - C/C++ & java & Python
3
24
ส 17 พ.ย. 2018 1:14 pm โดย thatsawan
คำสั่งตัดสินใจการทำงาน if, if else if
โดย จันนุสรณ์ ดีแก่ ส 17 พ.ย. 2018 12:13 pm บอร์ด PHP Knowledge
0
10
ส 17 พ.ย. 2018 12:13 pm โดย จันนุสรณ์ ดีแก่
การใช้ operator ในการกำหนดเงื่อนไขใน php
โดย จันนุสรณ์ ดีแก่ ส 17 พ.ย. 2018 11:11 am บอร์ด PHP Knowledge
0
12
ส 17 พ.ย. 2018 11:11 am โดย จันนุสรณ์ ดีแก่