ประเภทของ 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 เบราว์เซอร์รุ่นเก่าอาจจะไม่ support ก็จะแสดงผลแบบ <input type="text"> แทน ประเภทตัวเลข <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 ตัวอย่าง ลองเขียนโค้ด หน้าก่อน หน้าถัดไป