ใช้แท็กป้อนข้อมูลเพื่อส่งแบบฟอร์ม
รูปแบบ HTML เป็นวิธีที่ง่ายที่สุดในการเพิ่มการโต้ตอบในเว็บไซต์ของคุณ คุณสามารถถามคำถามและขอคำตอบจากผู้อ่านให้ข้อมูลเพิ่มเติมจากฐานข้อมูลตั้งค่าเกมและอื่น ๆ มีองค์ประกอบ HTML จำนวนมากที่คุณสามารถใช้เพื่อสร้างฟอร์มได้ เมื่อคุณได้สร้างฟอร์มของคุณแล้วมีหลายวิธีในการส่งข้อมูลนั้นไปยังเซิร์ฟเวอร์หรือเพียงแค่เริ่มดำเนินการแบบฟอร์ม
นี่เป็นวิธีต่างๆที่คุณสามารถส่งแบบฟอร์มของคุณ:
-
- นี่เป็นวิธีที่ใช้กันมากที่สุดในการรับข้อมูลไปยังเซิร์ฟเวอร์ แต่สามารถมองหาได้ง่ายมาก
-
- การใช้ภาพทำให้ง่ายมากที่จะทำให้ปุ่มส่งของคุณพอดีกับรูปแบบของไซต์ของคุณ แต่บางคนอาจไม่รู้จักว่าเป็นปุ่มส่ง
-
- ปุ่ม INPUT ปุ่มมีตัวเลือกเดียวกับแท็ก INPUT ภาพ แต่มีลักษณะคล้ายกับประเภทการส่งแบบมาตรฐาน ต้องใช้ JavaScript เพื่อเปิดใช้งาน
- <ปุ่ม>
- แท็ก BUTTON เป็นปุ่มประเภทอเนกประสงค์มากกว่าแท็ก INPUT แท็กนี้ต้องใช้ Javacript เพื่อเปิดใช้งาน
-
- องค์ประกอบ COMMAND เป็นรูปแบบใหม่ใน HTML5 และเป็นวิธีการเปิดใช้สคริปต์และแบบฟอร์มที่มีการกระทำที่เกี่ยวข้อง มีการเปิดใช้งานด้วย JavaScript
องค์ประกอบ INPUT
องค์ประกอบ INPUT เป็นวิธีที่ใช้กันมากที่สุดในการส่งแบบฟอร์มทั้งหมดที่คุณต้องทำคือเลือกประเภท (ปุ่มภาพหรือส่ง) และถ้าจำเป็นให้เพิ่มการเขียนสคริปต์เพื่อส่งไปยังการดำเนินการของแบบฟอร์ม
องค์ประกอบสามารถเขียนได้เช่นเดียวกับที่ แต่ถ้าทำคุณจะมีผลลัพธ์ที่แตกต่างกันในเบราว์เซอร์ต่างๆ เบราว์เซอร์ส่วนใหญ่ทำเป็นปุ่มว่า "Submit" แต่ Firefox จะสร้างปุ่มว่า "Submit Query" หากต้องการเปลี่ยนสิ่งที่ปุ่มพูดคุณควรเพิ่มแอตทริบิวต์:
value = "Submit Form">
องค์ประกอบนี้เขียนไว้เช่นนั้น แต่ถ้าคุณปล่อยให้แอตทริบิวต์อื่น ๆ ทั้งหมดสิ่งที่จะแสดงในเบราว์เซอร์เป็นปุ่มสีเทาว่างเปล่า หากต้องการเพิ่มข้อความลงในปุ่มให้ใช้แอตทริบิวต์ value แต่ปุ่มนี้จะไม่ส่งฟอร์มยกเว้นกรณีที่คุณใช้ JavaScript
onclick = "ส่ง ();">
คล้ายกับปุ่มชนิดที่ต้องการสคริปต์เพื่อส่งแบบฟอร์ม ยกเว้นว่าแทนที่จะเป็นค่าข้อความคุณต้องเพิ่ม URL ของแหล่งที่มาของภาพ
src = "submit.gif">
องค์ประกอบ BUTTON
องค์ประกอบ BUTTON ต้องใช้ทั้งแท็กเปิดและแท็กปิดเมื่อคุณใช้เนื้อหาใด ๆ ที่คุณใส่ไว้ในแท็กจะมีอยู่ในปุ่ม จากนั้นคุณเปิดใช้งานปุ่มด้วยสคริปต์
ส่งแบบฟอร์ม
คุณสามารถรวมรูปภาพไว้ในปุ่มหรือรวมรูปภาพและข้อความเพื่อสร้างปุ่มที่น่าสนใจยิ่งขึ้น
ส่งแบบฟอร์ม
องค์ประกอบ COMMAND
องค์ประกอบ COMMAND เป็นรูปแบบใหม่ที่มี HTML5 ไม่จำเป็นต้องมีรูปแบบที่จะใช้ แต่ก็สามารถทำหน้าที่เป็นปุ่มส่งสำหรับฟอร์มได้ องค์ประกอบนี้ช่วยให้คุณสามารถสร้างเพจที่มีการโต้ตอบมากขึ้นโดยไม่ต้องมีแบบฟอร์มเว้นแต่ว่าคุณต้องการแบบฟอร์มจริงๆ ถ้าคุณต้องการให้คำสั่งพูดอะไรคุณจะเขียนข้อมูลในแอตทริบิวต์ label
label = "ส่งแบบฟอร์ม">
ถ้าคุณต้องการให้คำสั่งของคุณแสดงโดยรูปภาพคุณจะใช้แอตทริบิวต์ icon
ไอคอน = "submit.gif">
บทความนี้เป็นส่วนหนึ่งของ HTML Forms Tutorial อ่านบทแนะนำแบบเต็มเพื่อเรียนรู้วิธีใช้แบบฟอร์ม HTML
แบบฟอร์ม HTML มีรูปแบบต่างๆในการส่งตามที่คุณได้เรียนรู้ในหน้าก่อนหน้านี้ สองวิธีคือแท็ก INPUT และ BUTTON มีเหตุผลที่ดีที่จะใช้ทั้งสององค์ประกอบเหล่านี้
องค์ประกอบ INPUT
แท็กเป็นวิธีที่ง่ายที่สุดในการส่งแบบฟอร์ม ไม่จำเป็นต้องมีอะไรนอกเหนือจากแท็กตัวเองไม่ใช่แม้แต่ค่า เมื่อลูกค้าคลิกปุ่มจะส่งข้อมูลโดยอัตโนมัติ คุณไม่จำเป็นต้องเพิ่มสคริปต์ใด ๆ เบราว์เซอร์จะต้องส่งฟอร์มเมื่อมีการคลิกปุ่มส่ง INPUT
ปัญหาคือปุ่มนี้ดูน่าเกลียดและเรียบง่าย คุณไม่สามารถเพิ่มภาพลงไปได้ คุณสามารถจัดรูปแบบได้เหมือนกับองค์ประกอบอื่น ๆ แต่ก็ยังรู้สึกเหมือนปุ่มที่น่าเกลียด
ใช้วิธี INPUT เมื่อฟอร์มของคุณต้องสามารถเข้าถึงได้แม้ในเบราว์เซอร์ที่ปิดใช้ JavaScript
องค์ประกอบ BUTTON
องค์ประกอบ BUTTON มีตัวเลือกเพิ่มเติมสำหรับการส่งแบบฟอร์ม คุณสามารถใส่อะไรก็ได้ภายในองค์ประกอบ BUTTON และเปลี่ยนเป็นปุ่ม submit คนส่วนใหญ่ใช้รูปภาพและข้อความ แต่คุณสามารถสร้าง DIV และทำให้สิ่งที่ทั้งปุ่มส่งถ้าคุณต้องการ
ข้อเสียเปรียบที่ใหญ่ที่สุดขององค์ประกอบ BUTTON คือไม่ส่งแบบฟอร์มโดยอัตโนมัติ ซึ่งหมายความว่าต้องมีสคริปต์บางประเภทเพื่อเปิดใช้งาน ดังนั้นจึงสามารถเข้าถึงได้น้อยกว่าวิธี INPUT ผู้ใช้ที่ไม่ได้เปิดใช้ JavaScript จะไม่สามารถส่งแบบฟอร์มที่มีเฉพาะองค์ประกอบ BUTTON เพื่อส่งได้
ใช้เมธอด BUTTON บนฟอร์มที่ไม่สำคัญ นอกจากนี้นี่เป็นวิธีที่ดีในการเพิ่มตัวเลือกการส่งเพิ่มเติมภายในฟอร์มเดียว
บทความนี้เป็นส่วนหนึ่งของ HTML Forms Tutorial อ่านเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการใช้แบบฟอร์ม HTML