ประเภทของ Input


บทนี้จะอธิบายเกี่ยวกับ Input ประเภทต่างๆของ Element <input>


ประเภทข้อความ

<input type="text"> ใช้สร้างกล่องใส่ข้อความบรรทัดเดียว

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


ประเภทรหัสผ่าน

<input type="password"> ใช้สร้างกล่องใส่รหัสผ่าน

สิ่งที่พิมพ์ลงไปจะถูกซ่อนไว้ในรูปแบบวงกลมสีดำ

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


ประเภทปุ่ม Submit

<input type="submit"> ใช้สร้างปุ่ม Submit ให้กับฟอร์ม เพื่อส่งข้อมูลไปยัง form-handler

form-handler คือหน้าเว็บของเซิฟเวอร์ที่มีสคริปในการรับข้อมูลไปประมวลผล

ซึ่ง URL ของไฟล์นั้นจะถูกระบุอยู่ใน Attribute action ของฟอร์ม

ตัวอย่าง


                        
                        

ลองเขียนโค้ด

ถ้าไม่ระบุค่าใน Attribute value ปุ่มจะใช้ค่าเริ่มต้น "Submit" ให้อัตโนมัติ

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


ประเภทปุ่มรีเซ็ต

<input type="reset"> ใช้สร้างปุ่มรีเซ็ตให้กับฟอร์ม เพื่อรีเซ็ตค่าทุกช่องในฟอร์มกลับไปสู่ค่าเริ่มต้น

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


ประเภทตัวเลือกแบบ Radio

<input type="radio"> ใช้สร้างตัวเลือกค่าใดค่าหนึ่ง (Radio Button)

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


ประเภทตัวเลือกแบบ Checkbox

<input type="checkbox"> ใช้สร้างตัวเลือกได้มากกว่า 1 ค่า หรือไม่เลือกเลย (Checkbox)

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


ปะเภทปุ่มทั่วไป

<input type="button"> ใช้สร้างปุ่ม

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


ประเภทที่เพิ่มมาใน HTML5

ใน HTML5 ได้เพิ่มประเภท Input ได้แก่

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week


ประเภทตัวเลข

<input type="number"> ใช้สร้างช่องกรอกตัวเลข

และยังสามารถใส่เงื่อนไขได้ว่าจะสามารถกรอกตัวเลขได้ตั้งแต่เลขเท่าไหร่ถึงเลขเท่าไหร่

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


การใส่เงื่อนไข Input

การใส่เงื่อนไขต่างๆ ใน Input ใส่ได้โดยการใช้ Attribute เป็นการระบุเงื่อนไข ได้แก่

Attributeอธิบาย
disabledช่องกรอกถูกยกเลิกไม่ให้ใช้
maxระบุค่าสูงสุดที่สามารถกรอกได้
maxlengthระบุความยาวตัวอักษรสูงสุดที่สามารถกรอกได้
minระบุค่าต่ำสุดที่สามารถกรอกได้
patternระบุ regular expression เพื่อตรวจสอบความถูกต้อง
readonlyให้ช่องกรอกข้อมูลนี้อ่านได้อย่างเดียว แก้ไขไม่ได้
requiredระบุว่าช่องกรอกข้อมูลนี้บังคับกรอก ห้ามเว้นว่าง
sizeระบุความกว้างของช่องกรอกข้อมูล
stepระบุให้กรอกตัวเลขแบบก้าวกระโดด
valueระบุค่าเริ่มต้นของช่องกรอกข้อมูล

เราจะได้เรียนรู้รายละเอียดเกี่ยวกับเงื่อนไขต่างๆ ในบทถัดไป

จากตัวอย่างด้านล่าง เป็นตัวอย่างช่องกรอกตัวเลขที่ระบุเงื่อนไขสามารถกรอกเลขได้ตั้งแต่ 0 - 100 และเลขกระโดดทีละ 10 โดยมีค่าเริ่มต้นที่ 30

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


ประเภทวันที่

<input type="date"> ใช้สร้างช่องกรอกวันที่

ใช้กับเบราว์เซอร์ Firefox ไม่ได้ และใช้กับ IE ที่ version ต่ำกว่า 11 ไม่ได้

ตัวอย่าง


                        
                        

ลองเขียนโค้ด

คุณสามารถใส่เงื่อนไขกับวันที่ได้เช่นเดียวกัน

ตัวอย่าง


                        
                        

ลองเขียนโค้ด

ประเภทสี

<input type="color"> ใช้สร้างช่องกรอกสี

ใช้ไม่ได้กับ Internet Explorer เวอร์ชั่นต่ำกว่า 11 และ Safari เวอร์ชั่นต่ำกว่า 9.1

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


ประเภทระยะ

<input type="range"> ใช้สร้างช่องกรอกตัวเลขในระยะที่กำหนด

ใช้ไม่ได้กับ Internet Explorer เวอร์ชั่นต่ำกว่า 9

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


ประเภทเดือน

<input type="month"> ใช้สร้างช่องกรอกเดือนและปี

ใช้ไม่ได้กับ Firefox และ Internet Explorer เวอร์ชั่นต่ำกว่า 11

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


ประเภทสัปดาห์

<input type="week"> ใช้สร้างช่องกรอกสัปดาห์และปี

ใช้ไม่ได้กับ Firefox และ Internet Explorer เวอร์ชั่นต่ำกว่า 11

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


ประเภทเวลา

<input type="time"> ใช้สร้างช่องกรอกเวลา (ไม่มี time zone)

ใช้ไม่ได้กับ Firefox และ Internet Explorer เวอร์ชั่นต่ำกว่า 12

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


ประเภทวันที่และเวลา

<input type="datetime-local"> ใช้สร้างช่องกรอกวันที่และเวลา (ไม่มี time zone)

ใช้ไม่ได้กับ Firefox และ Internet Explorer เวอร์ชั่นต่ำกว่า 12

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


ประเภทอีเมล

<input type="email"> ใช้สร้างช่องกรอกอีเมลโดยเฉพาะ

เวลากด submit ฟอร์มเบราว์เซอร์จะตรวจสอบความถูกต้องให้อัตโนมัติว่ากรอกอีเมลมาถูกต้องหรือไม่ เช่น มี "@" หรือมี "." รึเปล่า

ใช้ไม่ได้กับ Internet Explorer เวอร์ชั่นต่ำกว่า 9

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


ประเภทค้นหา

<input type="search"> ใช้สร้างช่องค้นหาโดยเฉพาะ (หน้าตาจะเหมือนช่องกรอกข้อความธรรมดา)

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


ประเภทเบอร์โทรศัพท์

<input type="tel"> ใช้สร้างช่องกรอกเบอร์โทรศัพท์

ใช้ได้กับ Safari เวอร์ชั่น 8 ขึ้นไป

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


ประเภท URL

<input type="tel"> ใช้สร้างช่องกรอก URL

เวลากด submit ฟอร์มเบราว์เซอร์จะตรวจสอบความถูกต้องให้อัตโนมัติว่ากรอก URL มาถูกต้องหรือไม่ เช่น มี ".com" รึเปล่า

ใช้ไม่ได้กับ Internet Explorer เวอร์ชั่นต่ำกว่า 9

ตัวอย่าง


                        
                        

ลองเขียนโค้ด