ความแตกต่างระหว่าง <input type = 'button' /> และ <input type = 'submit' />

ไม่มีสิ่งเช่นคำถามโง่ดังนั้นที่นี่เราไป: อะไรคือความแตกต่างระหว่าง<input type='button' />และ<input type='submit' />?

<input type="button" />ปุ่มจะไม่ส่งแบบฟอร์ม - พวกเขาไม่ได้ทำอะไรตามค่าเริ่มต้น โดยทั่วไปจะใช้ร่วมกับ JavaScript เป็นส่วนหนึ่งของแอปพลิเคชัน AJAX

<input type="submit"> ปุ่มจะส่งแบบฟอร์มที่พวกเขาอยู่เมื่อผู้ใช้คลิกที่พวกเขาเว้นแต่คุณจะระบุเป็นอย่างอื่นด้วย JavaScript

'ปุ่ม' คือปุ่มซึ่งคุณสามารถเพิ่มฟังก์ชันการทำงานเพิ่มเติมโดยใช้ Javascript ประเภทการป้อนข้อมูล 'ส่ง' มีฟังก์ชันการทำงานเริ่มต้นของการส่งแบบฟอร์มที่อยู่ใน (แต่แน่นอนว่าคุณยังสามารถเพิ่มฟังก์ชันการทำงานเพิ่มเติมได้โดยใช้ Javascript)

ปุ่มจะไม่ส่งแบบฟอร์มด้วยตัวเองมันเป็นปุ่มแบบง่าย ๆ ที่ใช้ในการดำเนินการบางอย่างโดยใช้จาวาสคริปต์ในขณะที่ปุ่มส่งเป็นปุ่มชนิดหนึ่งซึ่งโดยปกติแล้วจะส่งแบบฟอร์มเมื่อผู้ใช้คลิกที่ปุ่มส่ง

IE 8 ใช้ปุ่มแรกในการส่งหรือปุ่มจริง แทนที่จะระบุว่าต้องการได้อย่างง่ายดายโดยทำให้เป็นประเภทอินพุต = ส่งคำสั่งซื้อในหน้านั้นมีความสำคัญจริง ๆ

ควรระบุด้วยว่าอินพุตที่มีชื่อของ type = "submit" จะถูกส่งไปพร้อมกับฟิลด์ที่มีชื่อของฟอร์มอื่นในขณะที่อินพุตที่มีชื่อ type = "button" จะไม่ส่ง

ด้วยคำอื่น ๆ ในตัวอย่างด้านล่างอินพุตที่มีชื่อname=button1 จะไม่ถูกส่งในขณะที่อินพุตที่มีชื่อname=submit1 จะถูกส่ง

ตัวอย่างแบบฟอร์ม HTML (index.html):

<form action="checkout.php" method="POST">

  <!-- this won't get submitted despite being named -->
  <input type="button" name="button1" value="a button">

  <!-- this one does; so the input's TYPE is important! -->
  <input type="submit" name="submit1" value="a submit button">

</form>

สคริปต์ PHP (checkout.php) ที่ประมวลผลการทำงานของแบบฟอร์มด้านบน:

<?php var_dump($_POST); ?>

ทดสอบข้างต้นบนเครื่องโลคัลของคุณโดยการสร้างสองไฟล์ในโฟลเดอร์ชื่อ / tmp / test / จากนั้นเรียกใช้เว็บเซิร์ฟเวอร์ PHP ในตัวจากเชลล์:

php -S localhost:3000 -t /tmp/test/

เปิดเบราว์เซอร์ของคุณที่http: // localhost: 3000และดูด้วยตัวคุณเอง

ใครจะสงสัยว่าทำไมเราต้องส่งปุ่มชื่อ? ขึ้นอยู่กับสคริปต์แบ็คเอนด์ ตัวอย่างเช่นปลั๊กอิน WordPress ของ WooCommerce จะไม่ดำเนินการกับหน้าชำระเงินที่โพสต์เว้นแต่Place Orderว่ามีการส่งปุ่มที่ระบุชื่อด้วย หากคุณเปลี่ยนประเภทจากปุ่มส่งเป็นปุ่มปุ่มนี้จะไม่ได้รับการส่งและทำให้ฟอร์มการชำระเงินไม่ถูกประมวลผล

นี่อาจเป็นรายละเอียดเล็กน้อย แต่คุณก็รู้มารอยู่ในรายละเอียด

<input type="button">สามารถใช้ได้ทุกที่ไม่เพียง แต่อยู่ในรูปแบบและพวกเขาจะไม่ส่งแบบฟอร์มหากอยู่ในรูปแบบเดียว Javascriptเหมาะมากที่ดีขึ้นด้วย

<input type="submit">ควรใช้ในรูปแบบเท่านั้นและพวกเขาจะส่งคำขอ (ทั้ง GET หรือ POST) ไปยัง URL ที่ระบุ ไม่ควรใส่ในตำแหน่ง HTML ใด ๆ

W3C ทำให้ชัดเจนในสเปคเกี่ยวกับองค์ประกอบปุ่ม

ปุ่มอาจถูกมองว่าเป็นคลาสทั่วไปสำหรับทุกประเภทของปุ่มโดยไม่มีพฤติกรรมเริ่มต้น

W3C

type='Submit'ถูกตั้งค่าให้ส่งต่อและรับค่าเป็น BACK-END (PHP, .NET และอื่น ๆ ) type='button'จะแสดงพฤติกรรมของปุ่มปกติ