ประเภทอินพุต =“ ส่ง” แท็กปุ่ม Vs พวกมันสามารถใช้แทนกันได้หรือไม่

input type="submit"และbuttonแท็กใช้แทนกันได้หรือไม่ หรือหากมีความแตกต่างจากนั้นเมื่อใดควรใช้input type="submit"และเมื่อbuttonใด

และถ้าไม่มีความแตกต่างทำไมเรามี 2 แท็กเพื่อจุดประสงค์เดียวกัน

http://www.w3.org/TR/html4/interact/forms.html#h-17.5

ปุ่มที่สร้างขึ้นด้วยฟังก์ชั่นองค์ประกอบ BUTTON เช่นเดียวกับปุ่มที่สร้างขึ้นด้วยองค์ประกอบ INPUT แต่พวกมันให้ความเป็นไปได้ในการเรนเดอร์ที่ดียิ่งขึ้น: องค์ประกอบของปุ่มอาจมีเนื้อหา ตัวอย่างเช่นองค์ประกอบปุ่มที่มีฟังก์ชั่นภาพเช่นและอาจมีลักษณะคล้ายกับองค์ประกอบ INPUT ซึ่งมีการตั้งค่าประเภทเป็น "ภาพ" แต่ประเภทองค์ประกอบปุ่มช่วยให้เนื้อหา

ดังนั้นสำหรับฟังก์ชั่นการใช้งานเท่านั้น

(อย่าลืมว่าtype="submit"เป็นค่าเริ่มต้นด้วยbuttonดังนั้นโปรดทิ้งไว้!)

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

อีกปุ่ม 'พิเศษ' ที่มีประโยชน์คือปุ่ม<input type="reset">ที่จะเคลียร์ฟอร์ม

การใช้งาน <ปุ่ม> แท็กแทน <input type = "ปุ่ม" .. > มันเป็นแนวทางปฏิบัติที่แนะนำใน bootstrap 3

http://getbootstrap.com/css/#buttons-tags

"การแสดงผลข้ามเบราว์เซอร์

เพื่อเป็นการปฏิบัติที่ดีที่สุดเราขอแนะนำให้ใช้องค์ประกอบ <button> เมื่อใดก็ตามที่เป็นไปได้เพื่อให้แน่ใจว่าการแสดงผลข้ามเบราว์เซอร์ตรงกัน

เหนือสิ่งอื่นใดมีข้อบกพร่องของ Firefox ที่ทำให้เราไม่สามารถตั้งค่าความสูงบรรทัดของ <input> - ตามปุ่มทำให้พวกเขาไม่ตรงกับความสูงของปุ่มอื่น ๆ บน Firefox "

แม้ว่าองค์ประกอบทั้งสองส่งมอบหน้าที่ผล * เดียวกันผมขอแนะนำให้คุณใช้<button> :

• ชัดเจนยิ่งขึ้นและสามารถอ่านได้ inputแสดงให้เห็นว่าการควบคุมสามารถแก้ไขได้หรือสามารถแก้ไขได้โดยผู้ใช้; buttonมีความชัดเจนมากขึ้นในแง่ของวัตถุประสงค์ที่ให้บริการ
• สไตล์ใน CSS ง่ายขึ้น ตามที่ระบุไว้ข้างต้น FIrefox และ IE มีนิสัยใจคอที่input[type="submit"]ไม่แสดงอย่างถูกต้องในบางกรณี
• คำขอที่คาดการณ์ได้: IE มีพฤติกรรมที่น่าสนใจมากเมื่อมีการส่งค่าในPOST/ GETคำขอไปยังเซิร์ฟเวอร์
• มาร์กอัปง่าย; คุณสามารถซ้อนรายการต่างๆได้เช่นไอคอนภายในปุ่ม
• HTML5, การคิดล่วงหน้า ในฐานะนักพัฒนามันเป็นความรับผิดชอบของเราที่จะนำไปใช้กับสเป็คใหม่เมื่อมันเป็นทางการ HTML5, ณ ตอนนี้ได้รับอย่างเป็นทางการมานานกว่าหนึ่งปีในขณะนี้และได้รับการแสดงในหลาย ๆ กรณีที่จะเพิ่ม SEO

* _{ด้วยข้อยกเว้นตามค่าเริ่มต้นที่ไม่มีการระบุพฤติกรรม<button type="button">}

โดยสรุปผมขอกีดกันการใช้งานของ<input type="submit" />

<input type='submit' />ไม่รองรับ HTML ที่อยู่ภายในเนื่องจากเป็นแท็กปิดตัวเองเพียงครั้งเดียว <button>บนมืออื่น ๆ ที่สนับสนุน HTML, ภาพ ฯลฯ <button><img src='myimage.gif' /></button>ภายในเพราะมันเป็นคู่แท็ก: <button>มีความยืดหยุ่นมากขึ้นเมื่อพูดถึงสไตล์ CSS

ข้อเสียของ<button>คือไม่รองรับเบราว์เซอร์รุ่นเก่าอย่างเต็มที่ ตัวอย่างเช่น IE6 / 7 ไม่แสดงอย่างถูกต้อง

<input type='submit' />ถ้าคุณมีเหตุผลที่เฉพาะเจาะจงบางอย่างก็อาจจะดีที่สุดที่จะติด

ฉันรู้ว่านี่เป็นคำถามเก่า แต่ฉันพบใน mozilla.org และคิดว่ามันใช้ได้

ปุ่มสามารถมีได้สามประเภท: ส่ง, รีเซ็ตหรือปุ่ม คลิกที่ปุ่มส่งส่งข้อมูลของแบบฟอร์มไปยังหน้าเว็บที่กำหนดโดยแอตทริบิวต์การกระทำขององค์ประกอบ

การคลิกที่ปุ่มรีเซ็ตจะเป็นการรีเซ็ตวิดเจ็ตฟอร์มทั้งหมดเป็นค่าเริ่มต้นทันที จากมุมมองของ UX ถือว่าเป็นการปฏิบัติที่ไม่ดี

การคลิกที่ปุ่มปุ่มไม่ทำอะไรเลย! ฟังดูงี่เง่า แต่มีประโยชน์อย่างยิ่งในการสร้างปุ่มที่กำหนดเองด้วย JavaScript

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form#And_a_<button>_to_finish

<button>ใหม่กว่า<input type="submit">มีความหมายง่ายต่อการตกแต่งและรองรับ HTML ภายใน

ในขณะที่คำตอบอื่น ๆ ที่ดีและตอบคำถามมีสิ่งหนึ่งที่จะต้องพิจารณาเมื่อมีการใช้และinput type="submit" buttonด้วยการที่input type="submit"คุณไม่สามารถใช้องค์ประกอบหลอก CSS บนอินพุต แต่คุณสามารถทำได้เพียงปุ่มเดียว!

นี่คือเหตุผลหนึ่งในการใช้buttonองค์ประกอบเหนืออินพุตเมื่อมีการกำหนดสไตล์

ฉันไม่รู้ว่านี่เป็นข้อผิดพลาดหรือคุณลักษณะ แต่มีความแตกต่างที่สำคัญมาก (อย่างน้อยในบางกรณี) ที่ฉันพบ: <input type="submit">สร้างคู่ค่าคีย์ในคำขอของคุณและ<button type="submit">ไม่ ทดสอบใน Chrome และ Safari

ดังนั้นเมื่อคุณมีปุ่มส่งหลายปุ่มในแบบฟอร์มของคุณและต้องการทราบว่ามีการคลิกปุ่มใด - อย่าใช้buttonให้ใช้input type="submit"แทน

หากคุณกำลังพูดถึง<input type=button>มันจะไม่ส่งแบบฟอร์มโดยอัตโนมัติ

หากคุณกำลังพูดถึง<button>แท็กแสดงว่าเป็นแท็กที่ใหม่กว่าและไม่ส่งโดยอัตโนมัติในเบราว์เซอร์ทั้งหมด

บรรทัดล่างหากคุณต้องการให้แบบฟอร์มส่งเมื่อคลิกในเบราว์เซอร์ทั้งหมดให้ใช้ <input type="submit">