Vraag


Bij het bekijken van de meeste sites (inclusief SO), gebruiken de meesten:

<input type="button" />

in plaats van:

<button></button>
  • Wat zijn de belangrijkste verschillen tussen beide, indien van toepassing?
  • Zijn er geldige redenen om de ene in plaats van de andere te gebruiken?
  • Zijn er geldige redenen om ze te combineren?
  • Gebruikt <button> komen met compatibiliteitsproblemen, aangezien het niet erg veel wordt gebruikt?

1431
2018-01-22 13:14


oorsprong


antwoorden:


  • Hier is een pagina de verschillen beschrijven (eigenlijk kun je html in een <button></button>)
  • En nog een pagina beschrijven waarom mensen vermijden <button></button> (Hint: IE6)

Een ander IE-probleem bij gebruik <button />:

En terwijl we het over IE hebben, is het dat wel   kreeg een paar bugs gerelateerd aan de   breedte van knoppen. Het zal op mysterieuze wijze gebeuren   voeg extra opvulling toe als je het probeert   om stijlen toe te voegen, wat betekent dat je moet toevoegen   een kleine hack om dingen onder te krijgen   controle.


588
2018-01-22 13:20



Net als een kanttekening, <button> impliciet zal indienen, wat problemen kan veroorzaken als u een knop in een formulier wilt gebruiken zonder dat deze wordt ingediend. Dus, nog een reden om te gebruiken <input type="button"> (of <button type="button">)

Bewerk - meer details

Zonder een type, button ontvangt impliciet het type submit. Het maakt niet uit hoeveel ingeleverde knoppen of ingangen er zijn in de vorm, een van hen die expliciet of impliciet is getypt als verzenden, wanneer erop wordt geklikt, wordt het formulier verzonden.

Er zijn 3 ondersteunde typen voor een knop

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"

270
2018-04-09 20:13



Dit artikel lijkt een redelijk goed overzicht te bieden van het verschil.

Van de pagina:

Knoppen gemaakt met de BUTTON-elementfunctie net als knoppen   gemaakt met het INPUT-element, maar   ze bieden een rijkere weergave   mogelijkheden: het KNOP-element mag   hebben inhoud. Bijvoorbeeld een KNOP   element dat een afbeelding bevat   functies zoals en kunnen lijken op een   INPUT-element waarvan het type is ingesteld op   "Afbeelding", maar het type KNOOPelement   staat inhoud toe.

Het knopelement - W3C


159
2018-01-22 13:19



Binnen een <button> element kunt u inhoud plaatsen, zoals tekst of afbeeldingen.

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

Dit is het verschil tussen dit element en knoppen gemaakt met de <input> element.


38
2018-03-28 04:27



Citaat

Belangrijk: als u het knopelement in een HTML-formulier gebruikt, zullen verschillende browsers verschillende waarden verzenden. Internet Explorer verzendt de tekst tussen de <button> en </button> tags, terwijl andere browsers de inhoud van het waardeattribuut indienen. Gebruik het invoerelement om knoppen in een HTML-formulier te maken.

Van : http://www.w3schools.com/tags/tag_button.asp

Als ik het goed begrijp, is het antwoord compatibiliteit en invoerconsistentie van browser naar browser


36
2018-01-22 13:18



Gebruik de knop van het invoerelement als u de knop in een formulier wilt maken. En gebruik de knoptag als u een knop wilt maken voor een actie.


16
2018-03-01 08:17



Ik zal het artikel citeren Het verschil tussen ankers, ingangen en knoppen:

ankers (de <a> element) vertegenwoordigen hyperlinks, bronnen waar een persoon naartoe kan navigeren of die in een browser kunnen worden gedownload. Als u uw gebruiker wilt toestaan ​​naar een nieuwe pagina te gaan of een bestand te downloaden, gebruikt u een anker.

Een invoer (<input>) vertegenwoordigt een gegevensveld: dus enkele gebruikersgegevens die u bedoelt om naar de server te verzenden. Er zijn verschillende invoertypen gerelateerd aan knoppen: <input type="submit">, <input type="image">, <input type="file">, <input type="reset">, <input type="button">.
Elk van hen heeft een betekenis, bijvoorbeeld "het dossier"wordt gebruikt om een ​​bestand te uploaden,"reset"wist een formulier en"voorleggen"stuurt de gegevens naar de server. Controleer W3-referentie op MDN of op W3Schools.

De knop (<button>) element is vrij veelzijdig:

  • je kunt elementen binnen een knop nesten, zoals afbeeldingen, alinea's of headers;
  • knoppen kunnen ook bevatten ::before en ::after pseudo-elementen;
  • knoppen ondersteunen de disabled attribuut. Dit maakt het gemakkelijk om te draaien ze aan en uit.

Nogmaals, controleer de W3-referentie voor <button> label op MDN of op W3Schools.


16
2017-11-08 14:31



Het citeren van de Formulierenpagina in de HTML-handleiding:

Knoppen gemaakt met de BUTTON-elementfunctie lijken op knoppen gemaakt met het INPUT-element, maar ze bieden een rijkere weergavemogelijkheid: het BUTTON-element kan inhoud bevatten. Een KNOP-element dat een afbeelding bevat, functioneert bijvoorbeeld als en kan lijken op een INPUT-element waarvan het type is ingesteld op "image", maar het KNOP-elementtype staat inhoud toe.


15
2018-01-22 13:19