<button> เทียบกับ <input type =“ button” /> จะใช้อะไร

เมื่อดูไซต์ส่วนใหญ่ (รวมถึง SO) ส่วนใหญ่จะใช้:

<input type="button" />

แทน:

<button></button>

• อะไรคือความแตกต่างที่สำคัญระหว่างสองถ้ามี?
• มีเหตุผลที่ถูกต้องหรือไม่ที่จะใช้อันใดอันหนึ่งแทนอีกอัน?
• มีเหตุผลที่ถูกต้องในการใช้การรวมเข้าด้วยกันหรือไม่
• การใช้<button>มาพร้อมกับปัญหาความเข้ากันได้หรือไม่เพราะมันไม่ได้ใช้กันอย่างแพร่หลาย?

• นี่คือหน้าที่อธิบายความแตกต่าง (โดยทั่วไปคุณสามารถใส่ html ไว้ใน<button></button>)
• และอีกหน้าหนึ่งอธิบายว่าทำไมคนหลีกเลี่ยง<button></button>(เคล็ดลับ: IE6)

ปัญหา IE อื่นเมื่อใช้<button />:

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

เช่นเดียวกับบันทึกย่อด้านข้าง<button>จะส่งโดยนัยซึ่งอาจทำให้เกิดปัญหาหากคุณต้องการใช้ปุ่มในแบบฟอร์มโดยที่ไม่ต้องส่ง ดังนั้นอีกเหตุผลที่จะใช้<input type="button">(หรือ<button type="button">)

แก้ไข - รายละเอียดเพิ่มเติม

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

มีปุ่มรองรับ 3 ประเภท

submit ||  "submits the form when clicked (default)"
reset  ||  "resets the fields in the form when clicked"
button ||  "clickable, but without any event handler until one is assigned"

บทความนี้ดูเหมือนจะนำเสนอภาพรวมที่ดีงามของความแตกต่าง

จากหน้า:

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

องค์ประกอบปุ่ม - W3C

ภายใน<button>องค์ประกอบที่คุณสามารถใส่เนื้อหาเช่นข้อความหรือรูปภาพ

<button type="button">Click Me!</button> 

นี่คือความแตกต่างระหว่างองค์ประกอบนี้และปุ่มที่สร้างขึ้นด้วย<input>องค์ประกอบ

อ้างอิง

สำคัญ: หากคุณใช้องค์ประกอบปุ่มในรูปแบบ HTML เบราว์เซอร์ที่แตกต่างกันจะส่งค่าต่างกัน Internet Explorer จะส่งข้อความระหว่าง<button>และ</button>แท็กในขณะที่เบราว์เซอร์อื่นจะส่งเนื้อหาของแอตทริบิวต์ค่า ใช้องค์ประกอบอินพุตเพื่อสร้างปุ่มในรูปแบบ HTML

จาก: http://www.w3schools.com/tags/tag_button.asp

ถ้าฉันเข้าใจถูกต้องคำตอบคือความเข้ากันได้และความสอดคล้องของข้อมูลจากเบราว์เซอร์ไปยังเบราว์เซอร์

ฉันจะอ้างอิงบทความความแตกต่างระหว่างจุดยึดและปุ่ม :

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

การป้อนข้อมูล ( <input>) หมายถึงเขตข้อมูล: เพื่อให้ข้อมูลของผู้ใช้บางอย่างที่คุณหมายถึงการที่จะส่งไปยังเซิร์ฟเวอร์ มีหลายประเภทอินพุตที่เกี่ยวข้องกับปุ่ม:

• <input type="submit">
• <input type="image">
• <input type="file">
• <input type="reset">
• <input type="button">

แต่ละไฟล์มีความหมายตัวอย่างเช่น " file " ใช้ในการอัปโหลดไฟล์ " reset " จะเป็นการล้างฟอร์มและ " submit " จะส่งข้อมูลไปยังเซิร์ฟเวอร์ ตรวจสอบการอ้างอิง W3 ใน MDNหรือบน W3Schools

ปุ่ม ( <button>)องค์ประกอบค่อนข้างหลากหลาย:

• คุณสามารถซ้อนองค์ประกอบภายในปุ่มเช่นรูปภาพย่อหน้าหรือส่วนหัว
• ปุ่มยังสามารถมี::beforeและ::afterองค์ประกอบหลอก;
• ปุ่มสนับสนุนdisabledคุณสมบัติ สิ่งนี้ทำให้ง่ายต่อการเปิดและปิด

อีกครั้งให้ตรวจสอบการอ้างอิง W3 สำหรับ<button>แท็กบน MDNหรือบน W3Schools

การอ้างถึงหน้าแบบฟอร์มในคู่มือ HTML:

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

ใช้ปุ่มจากองค์ประกอบอินพุตหากคุณต้องการสร้างปุ่มในแบบฟอร์ม และใช้ปุ่มแท็กถ้าคุณต้องการสร้างปุ่มสำหรับการกระทำ

<button>

• โดยค่าเริ่มต้นจะทำงานเหมือนกับว่ามันมีแอตทริบิวต์ "type =" submit "
• สามารถใช้โดยไม่มีแบบฟอร์มเช่นเดียวกับในแบบฟอร์ม
• อนุญาตเนื้อหาข้อความหรือ HTML
• องค์ประกอบหลอก css อนุญาต (เช่น: ก่อน)
• ชื่อแท็กมักจะไม่ซ้ำกับแบบฟอร์มเดียว

เมื่อเทียบกับ

<input type='button'>

• ควรตั้งประเภทเป็น 'ส่ง' เพื่อให้ทำงานเป็นองค์ประกอบที่ส่ง
• สามารถใช้ได้ในรูปแบบเท่านั้น
• อนุญาตเฉพาะเนื้อหาข้อความ
• ไม่มีองค์ประกอบหลอก css
• ชื่อแท็กเดียวกันกับองค์ประกอบแบบฟอร์มส่วนใหญ่ (อินพุต)

-
ในเบราว์เซอร์ที่ทันสมัยองค์ประกอบทั้งสองสามารถจัดวางสไตล์ได้อย่างง่ายดายด้วย css แต่ในกรณีส่วนใหญ่buttonองค์ประกอบที่ต้องการคือคุณสามารถจัดรูปแบบได้มากขึ้นด้วยองค์ประกอบ html และหลอก

ตราบใดที่สไตล์ CSS มีความเกี่ยวข้อง<button type="submit" class="Btn">Example</button>จะดีกว่าเพราะจะช่วยให้คุณสามารถใช้ CSS :beforeและ:after คลาสหลอกที่สามารถช่วยคุณได้

เนื่องจากการ<input type="button">แสดงผลที่แตกต่างไปจากการมองเห็น<a>หรือ<span>เมื่อสไตล์กับคลาสในบางสถานการณ์ฉันหลีกเลี่ยงพวกเขา

มันคุ้มค่ามากสังเกตคำตอบด้านบนในปัจจุบันถูกเขียนขึ้นในปี 2009 IE6 ไม่ได้กังวลวันนี้เพื่อ<button type="submit">Wins</button>จัดแต่งทรงผมความสอดคล้องในสายตาของฉันออกมาด้านบน

มีความแตกต่างใหญ่ถ้าคุณใช้ jQuery jQuery รับรู้ถึงเหตุการณ์ต่าง ๆ ที่เกิดขึ้นกับอินพุตมากกว่าปุ่ม ที่ปุ่ม jQuery รับรู้เฉพาะเหตุการณ์ 'คลิก' ในอินพุต jQuery ตระหนักถึงเหตุการณ์ 'คลิก', 'โฟกัส' และ 'เบลอ'

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

<button>มีความยืดหยุ่นในการที่สามารถมี HTML ยิ่งไปกว่านั้นมันเป็นสไตล์ที่ง่ายกว่ามากเมื่อใช้ CSS และสไตล์จะถูกนำไปใช้กับเบราว์เซอร์ทั้งหมด อย่างไรก็ตามมีข้อบกพร่องบางประการเกี่ยวกับ Internet Explorer (Eww! IE!) Internet Explorer ตรวจไม่พบแอตทริบิวต์ของค่าอย่างถูกต้องโดยใช้เนื้อหาของแท็กเป็นค่า ค่าทั้งหมดในแบบฟอร์มจะถูกส่งไปยังฝั่งเซิร์ฟเวอร์โดยไม่คำนึงว่าจะคลิกปุ่มใดหรือไม่ ทำให้การใช้มันเป็น<button type="submit">เรื่องยุ่งยากและเจ็บปวด

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

ฉันแค่ต้องการเพิ่มบางอย่างในคำตอบที่เหลือที่นี่ องค์ประกอบอินพุตถือว่าเป็นองค์ประกอบที่ว่างเปล่าหรือโมฆะ (องค์ประกอบที่ว่างเปล่าอื่น ๆ คือพื้นที่ฐาน br, col, ชั่วโมง, img, อินพุต, ลิงค์, เมตาดาต้าและคุณยังสามารถตรวจสอบที่นี่ ) ซึ่งหมายความว่าพวกเขาไม่สามารถมีเนื้อหาใด ๆ นอกเหนือจากการไม่มีเนื้อหาใด ๆ องค์ประกอบที่ว่างเปล่าไม่สามารถมีองค์ประกอบหลอกๆเช่น :: after และ :: ก่อนซึ่งฉันพิจารณาข้อเสียเปรียบที่สำคัญ

นอกจากนี้หนึ่งในความแตกต่างอาจมาจากผู้ให้บริการของห้องสมุดและสิ่งที่พวกเขารหัส ตัวอย่างเช่นที่นี่ฉันใช้แพลตฟอร์ม Cordova ร่วมกับ mobile angular ui และในขณะที่แท็กอินพุต / div / etc ทำงานได้ดีกับ ng-click ปุ่มสามารถทำให้ดีบัก Visual Studio เกิดความผิดพลาดได้โดยความแตกต่างที่โปรแกรมเมอร์เกิดขึ้น โปรดทราบว่าคำตอบของ MattC ชี้ไปที่ปัญหาเดียวกัน jQuery เป็นเพียงแค่ lib และผู้ให้บริการไม่ได้คิดว่ามีฟังก์ชั่นการทำงานบางอย่างในองค์ประกอบหนึ่ง ดังนั้นเมื่อคุณใช้ห้องสมุดคุณอาจประสบปัญหากับองค์ประกอบหนึ่งซึ่งคุณจะไม่ต้องเจอกับอีกองค์ประกอบหนึ่ง และเพียงคนที่ได้รับความนิยมชอบinputส่วนใหญ่จะเป็นคนที่คงที่เพียงเพราะมันเป็นที่นิยมมากขึ้น

แม้ว่านี่จะเป็นคำถามที่เก่ามากและอาจไม่เกี่ยวข้องอีกต่อไปโปรดจำไว้ว่าปัญหาส่วนใหญ่ที่<button>แท็กเคยใช้ไม่ได้มีอยู่อีกต่อไปดังนั้นจึงแนะนำให้ใช้อย่างยิ่ง

ในกรณีที่คุณไม่สามารถทำได้ด้วยเหตุผลหลายประการโปรดจำไว้ว่าให้เพิ่มแอตทริบิวต์ attribute =” button” ในแท็กของคุณเมื่อเข้าถึงได้ บทความนี้มีข้อมูลค่อนข้างมาก: https://www.deque.com/blog/accessible-aria-buttons/