แท็ก input

แท็ก input สร้างองค์ประกอบฟอร์ม HTML ที่หลากหลาย: ช่องป้อนข้อมูลปกติ, ช่องสำหรับป้อนรหัสผ่าน, กล่องกาเครื่องหมาย checkbox, ปุ่มวิทยุ (radio), ปุ่ม

แท็ก input ควรอยู่ภายในแท็ก form ไม่จำเป็นต้องทำ แต่จำเป็นสำหรับการส่ง ข้อมูลไปยังเซิร์ฟเวอร์และการประมวลผลในภายหลัง ผ่าน PHP

ไม่จำเป็นต้องมีแท็กปิด

แอตทริบิวต์

แอตทริบิวต์	คำอธิบาย
type	กำหนดประเภทของช่องป้อนข้อมูล ดูตัวเลือกด้านล่าง
value	ค่าเริ่มต้นในช่องป้อนข้อมูล ในกรณีของปุ่ม จะกำหนดข้อความของปุ่ม ดูรายละเอียดเพิ่มเติมได้ที่แอตทริบิวต์ value
placeholder	คำแนะนำในช่องป้อนข้อมูล ดูรายละเอียดเพิ่มเติมได้ที่ แอตทริบิวต์ placeholder
name	ชื่อช่องป้อนข้อมูล จำเป็นเพื่อดึงข้อมูลช่องป้อนข้อมูลใน PHP สำหรับการทำงานที่ถูกต้องของฟอร์ม ชื่อช่องป้อนข้อมูลไม่ควรซ้ำกัน (ในฟอร์มเดียว) หากซ้ำกัน - ใน PHP จะได้รับข้อมูล จากช่องป้อนข้อมูลที่อยู่ล่างในโค้ด HTML
disabled	บล็อกองค์ประกอบฟอร์ม (ไม่ใช่แค่ input เท่านั้น แต่เกือบทุกอย่าง) ดูรายละเอียดเพิ่มเติมได้ที่แอตทริบิวต์ disabled

ค่าของแอตทริบิวต์ type

ค่า	คำอธิบาย
text	สร้างช่องป้อนข้อมูลข้อความปกติ
password	สร้างช่องป้อนข้อมูลข้อความสำหรับรหัสผ่าน ลองพิมพ์ข้อความลงไป - จะแสดงเป็นเครื่องหมายดอกจัน
checkbox	สร้างกล่องกาเครื่องหมาย checkbox ดูรายละเอียดเพิ่มเติมได้ที่ checkbox
radio	สร้างปุ่มสลับวิทยุ (radio) ดูรายละเอียดเพิ่มเติมได้ที่ radio
hidden	สร้างอินพุตที่ซ่อนอยู่ ซึ่งจะไม่ปรากฏบนหน้าจอ แต่จะส่งข้อมูลที่บรรจุอยู่ ในแอตทริบิวต์ value ไปยังเซิร์ฟเวอร์
button	สร้างปุ่ม การกดปุ่มนี้ จะไม่ส่งฟอร์มไปยังเซิร์ฟเวอร์ สามารถใช้ภายใน ลิงก์ หรือผ่าน JavaScript โดยค่าเริ่มต้น ปุ่มไม่มีข้อความ (ตัวอย่างปุ่มที่ไม่มีข้อความ: ) กำหนดได้โดยใช้ value ดูเพิ่มเติมที่แท็ก button ซึ่งสร้างปุ่มได้เช่นกัน
submit	สร้างปุ่มที่จะส่งข้อมูลไปยังเซิร์ฟเวอร์ ข้อความปุ่มขึ้นอยู่กับเบราว์เซอร์ สามารถเปลี่ยนได้ โดยใช้ value ดูเพิ่มเติมที่แท็ก button ซึ่งสร้างปุ่มได้เช่นกัน
reset	สร้างปุ่มที่ล้างฟอร์มที่กรอกไว้ ข้อความปุ่มขึ้นอยู่กับเบราว์เซอร์ สามารถเปลี่ยนได้ โดยใช้ value
file	สร้างปุ่มเลือกไฟล์ การออกแบบปุ่มนี้ไม่อนุญาตให้เปลี่ยน ผ่าน CSS (อย่างไรก็ตามมีวิธีที่ซับซ้อน) หากคุณต้องการช่องดังกล่าวในฟอร์ม แท็ก form ต้องมีแอตทริบิวต์ enctype โดยมีค่าเป็น multipart/form-data

ค่าของแอตทริบิวต์ type ใหม่ใน HTML5

ค่าเหล่านี้ของแอตทริบิวต์เป็นค่าใหม่ ปรากฏ เฉพาะใน HTML5 เท่านั้น ดังนั้นในบางเบราว์เซอร์ อาจไม่ทำงานหรือทำงานแตกต่างกัน ในเบราว์เซอร์ต่างๆ

หากเบราว์เซอร์ไม่เข้าใจเนื้อหาของ แอตทริบิวต์ type (ตัวอย่างเช่น ถ้ามัน ไม่ได้รับการสนับสนุนหรือป้อนผิด) มันจะถือว่าองค์ประกอบเป็นอินพุตข้อความปกติ เหมือนกับว่าใน type มีค่า text

ดูตัวอย่างด้านล่างใน เบราว์เซอร์ต่างๆ ลองป้อน ข้อความลงในอินพุตและกดปุ่มส่ง หากข้อความไม่ถูกต้องหรือช่องว่าง - เบราว์เซอร์จะแสดงข้อผิดพลาด ตัวอย่างเช่น หากใน ช่องที่มีประเภท email ป้อนอีเมลที่ไม่ถูกต้อง - เบราว์เซอร์จะไม่อนุญาตให้ส่งฟอร์มและ แสดงข้อความแสดงข้อผิดพลาด (ข้อความแสดงข้อผิดพลาด และรูปลักษณ์ภายนอกบน html css ไม่สามารถเปลี่ยนแปลงได้) หากช่องว่าง - เบราว์เซอร์ก็จะแสดงข้อผิดพลาด สิ่งนี้ทำได้โดยใช้แอตทริบิวต์ required:

ค่า	คำอธิบาย
email
number
url
tel
search
color
date
month
week
datetime
datetime-local
range

ดูเพิ่มเติม