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

148

มีตำนานมากมายเกี่ยวกับพวกเขา ฉันต้องการรู้ความจริง อะไรคือความแตกต่างระหว่างสองตัวอย่างต่อไปนี้?

<input type='submit' value='text' />
<button type='submit'>text</button>

html button

— เจมส์
แหล่งที่มา

คุณหมายถึง<input type="submit">และ<button type="submit">?

— kennytm

มีความเป็นไปได้ที่ซ้ำกันของความแตกต่างระหว่าง <input type = 'button' /> และ <input type = 'submit' />

— Hakan Fıstık

inputเป็นองค์ประกอบที่เป็นโมฆะ อย่าใช้ใช้เพียง<input /> <input>

— CDT

@ HakanFıstıkไม่ซ้ำซ้อนของที่อยู่ที่นั่นว่าเป็น (มากหรือน้อยอย่างละเอียด) หนึ่งที่แตกต่างกันเช่นtype=submitสำหรับbuttonก็ไม่ได้กังวลมี (น่าจะเพราะมันก็ไม่ได้เป็นส่วนหนึ่งของมาตรฐานได้. กลับมาแล้ว (AFAIK) เมื่อถูกถามคำถามอื่น)

— Sz.

คำตอบ:

120

ไม่แน่ใจว่าคุณได้รับตำนานมาจากที่ใด:

ส่งปุ่มด้วย `<button>`

เช่นเดียวกับ:

<button type="submit">(html content)</button>

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

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

ปุ่มด้วย `<input>`

เช่นเดียวกับ:

<input type="button" />

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

ปุ่มส่งปกติด้วย `<input>`

เช่นเดียวกับ:

<input type="submit" />

เหมือนในอดีต แต่จริง ๆ แล้วส่งแบบฟอร์มโดยรอบ

ปุ่มส่งรูปภาพพร้อม `<input>`

เช่นเดียวกับ:

<input type="image" />

เช่นเดิม (ส่ง) ก็จะส่งแบบฟอร์ม แต่คุณสามารถใช้ภาพใด ๆ สิ่งนี้เคยเป็นวิธีที่ต้องการใช้ภาพเป็นปุ่มเมื่อต้องการส่งแบบฟอร์ม สำหรับการควบคุมที่มากขึ้น<button>ตอนนี้ใช้ สิ่งนี้สามารถใช้สำหรับการแมปอิมเมจฝั่งเซิร์ฟเวอร์แต่นั่นก็เป็นสิ่งที่หายากในปัจจุบัน เมื่อคุณใช้usemap-attribute และ (มีหรือไม่มีแอตทริบิวต์นั้น) เบราว์เซอร์จะส่งพิกัด X / Y ตัวชี้เมาส์ไปที่เซิร์ฟเวอร์ (แม่นยำยิ่งขึ้นตำแหน่งของตัวชี้เมาส์ภายในปุ่มของช่วงเวลาที่คุณคลิก) หากคุณไม่สนใจสิ่งเหล่านี้มันไม่มีอะไรมากไปกว่าปุ่มส่งที่ปลอมตัวเป็นภาพ

มีความแตกต่างเล็กน้อยระหว่างเบราว์เซอร์ แต่ทั้งหมดจะส่งค่าแอตทริบิวต์ยกเว้น<button>แท็กตามที่อธิบายไว้ข้างต้น

— อาเบล
แหล่งที่มา

เนื่องจากคุณได้ทำการแก้ไขจุดเกี่ยวกับ IE6 ยังคงเป็นจริงกับ IE11 ในโหมด quirks (อีกเหตุผลหนึ่งที่ไม่ใช้โหมดนิสัยใจคอ) แก้ไขใน Edge ว่า โอ้และมีความแตกต่างระหว่าง <input> และ <button>: <input> เป็นwhite-space:preค่าเริ่มต้น <button> ไม่มี สิ่งนี้จะชัดเจนเมื่อพยายามทำให้ปุ่มกว้างกว่าวิวพอร์ต

— นาย Lister

ด้วย<button>คุณสามารถใช้ img แท็ก ฯลฯ ในกรณีที่ข้อความอยู่

<button type='submit'> text -- can be img etc.  </button>

ด้วย<input>ประเภทคุณถูก จำกัด ที่ข้อความ

— สปาร์ก
แหล่งที่มา

เมื่อ<input type="image" />คุณไม่ได้ จำกัด อยู่ที่ข้อความและยังทำการส่ง

— Abel

@Abel: มีอีกมากที่จะสร้างแผนที่รูปภาพซึ่งจะส่งตำแหน่งตัวชี้เมาส์เป็นname.xและname.yพารามิเตอร์ (โปรดทราบว่าไม่มีnameพารามิเตอร์!) ฉันควรใช้<input type="submit">กับพื้นหลัง CSS หากวัตถุประสงค์เดียวคือมีปุ่มที่มีภาพพื้นหลัง

— BalusC

@BalusC: จริง แต่มันมีจุดประสงค์ในขณะที่เขียนมาตรฐาน HTML 2.0 เมื่อไม่มี CSS เป็นตามที่อธิบายไว้เพื่อใช้รูปภาพเป็นปุ่มหรือเป็นแผนที่รูปภาพฝั่งเซิร์ฟเวอร์ แต่แน่นอนคุณสามารถ (ab) ใช้ปุ่มปกติพร้อมภาพพื้นหลังเพื่อทำสิ่งเดียวกันกับ CSS และ HTML

— Abel

@Abel: input type="image"นั่นก็ไม่เคยได้รับความตั้งใจที่จะ สำหรับสิ่งนั้น<button type="submit">คือเจตนา

— BalusC

@BalusC: บางทีเราเข้าใจมาตรฐานที่แตกต่างกัน แต่นี่เป็นข้อความต้นฉบับของ Lee สำหรับมาตรฐาน HTML 2.0: " TYPE=IMAGE' implies การประมวลผล TYPE = SUBMIT 'นั่นคือเมื่อเลือกพิกเซลแล้วจะส่งแบบฟอร์มโดยรวม" . ทำให้มันสิ่งที่คุณคิดว่าเป็น :) เจตนาแท้จริง

— อาเบล

สรุป :

<input type="submit">

<button type="submit"> Submit </button>

โดยค่าเริ่มต้นทั้งสองจะมองเห็นปุ่มที่ดำเนินการเหมือนกัน (ส่งแบบฟอร์ม)

อย่างไรก็ตามขอแนะนำให้ใช้<button type="submit">เพราะมีความหมายที่ดีกว่ารองรับ ARIA ที่ดีขึ้นและมีสไตล์ที่ง่ายขึ้น

— Juanma Menendez
แหล่งที่มา

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

ส่งปุ่มด้วย <button>

ปุ่มด้วย <input>

ปุ่มส่งปกติด้วย <input>

ปุ่มส่งรูปภาพพร้อม <input>

ส่งปุ่มด้วย `<button>`

ปุ่มด้วย `<input>`

ปุ่มส่งปกติด้วย `<input>`

ปุ่มส่งรูปภาพพร้อม `<input>`