ปุ่ม HTML เพื่อไม่ส่งแบบฟอร์ม

ฉันมีแบบฟอร์ม นอกฟอร์มนั้นฉันมีปุ่ม ปุ่มง่าย ๆ เช่นนี้:

<button>My Button</button>

อย่างไรก็ตามเมื่อฉันคลิกมันก็จะส่งแบบฟอร์ม นี่คือรหัส:

<form id="myform">
    <input />
</form>
<button>My Button</button>

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

<button onclick="document.getElementById('myform').doNotSubmit();">My Button</button>

ฉันคิดว่านี่เป็นลักษณะเฉพาะที่น่ารำคาญที่สุดของ HTML ... ปุ่มนั้นต้องเป็นปุ่ม "type" เพื่อไม่ให้ส่ง

<button type="button">My Button</button>

อัปเดต 5-Feb-2019:ตามHTML Living Standard (และข้อกำหนด HTML 5 ):

หายไปค่าเริ่มต้นและเริ่มต้นค่าไม่ถูกต้องเป็นรัฐส่งปุ่ม

return false;ในตอนท้ายของตัวจัดการ onclick จะทำงาน อย่างไรก็ตามมันจะเป็นการดีกว่าถ้าคุณเพิ่มtype="button"เข้าไปใน<button>- วิธีนั้นจะทำงานได้อย่างถูกต้องแม้ว่าจะไม่มี JavaScript ก็ตาม

Dave Markle ถูกต้อง จากเว็บไซต์ของ W3School :

ระบุแอตทริบิวต์ type สำหรับปุ่มทุกครั้ง ประเภทเริ่มต้นสำหรับ Internet Explorer คือ "ปุ่ม" ในขณะที่เบราว์เซอร์อื่น ๆ (และในข้อกำหนด W3C) จะเป็น "ส่ง"

กล่าวอีกนัยหนึ่งเบราว์เซอร์ที่คุณใช้นั้นเป็นไปตามข้อกำหนดของ W3C

โดยค่าเริ่มต้นปุ่ม html จะส่งแบบฟอร์ม

นี่คือความจริงที่ว่าแม้ปุ่มที่อยู่ด้านนอกของแบบฟอร์มทำหน้าที่เป็นผู้ส่ง (ดูเว็บไซต์ W3Schools: http://www.w3schools.com/tags/att_button_form.asp )

กล่าวอีกนัยหนึ่งประเภทของปุ่มคือ "ส่ง" โดยค่าเริ่มต้น

<button type="submit">Button Text</button>

ดังนั้นวิธีที่ง่ายที่จะได้รับรอบนี้คือการใช้ประเภทปุ่ม

<button type="button">Button Text</button>

ตัวเลือกอื่น ๆ รวมถึงการคืนค่าเท็จเมื่อสิ้นสุดonclickหรือตัวจัดการอื่น ๆ เมื่อคลิกปุ่มหรือใช้แท็ก <input> แทน

หากต้องการข้อมูลเพิ่มเติมดูที่ปุ่มข้อมูลของ Mozilla Developer Network: https://developer.mozilla.org/en/docs/Web/HTML/Element/button

ขอแนะนำไม่ให้ใช้<Button>แท็ก ใช้<Input type='Button' onclick='return false;'>แท็กแทน (การใช้ "return false" ไม่ควรส่งแบบฟอร์ม)

วัสดุอ้างอิงบางอย่าง

ด้วยเหตุผลการเข้าถึงฉันไม่สามารถดึงออกด้วยtype=submitปุ่มหลายปุ่มได้ วิธีเดียวที่จะทำงานโดยกำเนิดกับformมีปุ่มหลาย แต่เพียงหนึ่งสามารถส่งแบบฟอร์มเมื่อกดปุ่มEnterที่สำคัญคือเพื่อให้แน่ใจว่ามีเพียงหนึ่งในนั้นคือของtype=submitในขณะที่คนอื่น ๆ ที่อยู่ในประเภทอื่น ๆ type=buttonเช่น ด้วยวิธีนี้คุณจะได้รับประโยชน์จากประสบการณ์การใช้งานที่ดีขึ้นในการจัดการแบบฟอร์มบนเบราว์เซอร์ในแง่ของการสนับสนุนแป้นพิมพ์

ตัวเลือกอื่นที่ใช้งานได้สำหรับฉันคือการเพิ่ม onsubmit = "return false;" ไปที่แท็กแบบฟอร์ม

<form onsubmit="return false;">

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