tag - input type button onclick html




<botão> vs.<tipo de entrada=“botão”/>. Qual usar? (10)

A resposta curta é que o botão se comporta de maneira diferente no IE6 / 7 em comparação com outros navegadores, enquanto o botão de entrada se comporta da mesma forma em todos os navegadores.

Ao olhar para a maioria dos sites (incluindo SO), a maioria deles usa:

<input type="button" />

ao invés de:

<button></button>
  • Quais são as principais diferenças entre os dois, se houver?
  • Existem razões válidas para usar um em vez do outro?
  • Existem razões válidas para usá-los?
  • O uso do <button> vem com problemas de compatibilidade, visto que não é muito usado?

Além disso, uma das diferenças pode vir do provedor da biblioteca e do código. por exemplo, aqui eu estou usando plataforma cordova em combinação com interface de usuário móvel angular e enquanto as tags input / div / etc funcionam bem com ng-click, o botão pode fazer com que o depurador do Visual Studio falhe, certamente por diferenças, causadas pelo programador; note que o MattC responde ao mesmo problema, o jQuery é apenas um lib, e o provedor não pensou em alguma funcionalidade em um elemento, que ele fornece em outro. Então, quando você está usando uma biblioteca, você pode enfrentar um problema com um elemento, que você não vai enfrentar com outro. e simplesmente o popular como input , será principalmente o fixo, só porque é mais popular.


Citando a página de formulários no manual em HTML:

Os botões criados com a função BUTTON do elemento são iguais aos botões criados com o elemento INPUT, mas oferecem possibilidades de renderização mais ricas: o elemento BUTTON pode ter conteúdo. Por exemplo, um elemento BUTTON que contém uma imagem funciona como e pode se assemelhar a um elemento INPUT cujo tipo é definido como "image", mas o tipo de elemento BUTTON permite o conteúdo.


Citar

Importante: Se você usar o elemento button em um formulário HTML, diferentes navegadores enviarão valores diferentes. O Internet Explorer enviará o texto entre as tags <button> e </button> , enquanto outros navegadores enviarão o conteúdo do atributo value. Use o elemento de entrada para criar botões em um formulário HTML.

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

Se bem entendi, a resposta é compatibilidade e consistência de entrada do navegador para o navegador


Eu só quero adicionar algo ao resto das respostas aqui. Elementos de entrada são considerados elementos vazios ou vazios (outros elementos vazios são área, base, br, col, hr, img, entrada, link, meta e param. Você também pode verificar here ), o que significa que eles não podem ter qualquer conteúdo. Além de não ter nenhum conteúdo, os elementos vazios não podem ter nenhum pseudo-elementos como :: after e :: before , o que considero uma grande desvantagem.


Há uma grande diferença se você estiver usando o jQuery. O jQuery está ciente de mais eventos nas entradas do que nos botões. Nos botões, o jQuery só está ciente dos eventos de 'clique'. Nas entradas, o jQuery está ciente dos eventos 'click', 'focus' e 'blur'.

Você sempre pode vincular eventos aos seus botões conforme necessário, mas esteja ciente de que os eventos dos quais o jQuery está automaticamente ciente são diferentes. Por exemplo, se você criou uma função que foi executada sempre que houvesse um evento 'focusin' em sua página, uma entrada acionaria a função, mas um botão não ativaria.


Use o botão do elemento de entrada se você quiser criar um botão em um formulário. E use a tag de botão se você quiser criar um botão para uma ação.


Vou citar o artigo A diferença entre âncoras, entradas e botões :

Âncoras (o elemento <a> ) representam hiperlinks, recursos que uma pessoa pode navegar ou baixar em um navegador. Se você quiser permitir que seu usuário mude para uma nova página ou baixe um arquivo, use uma âncora.

Uma entrada ( <input> ) representa um campo de dados: portanto, alguns dados do usuário que você pretende enviar para o servidor. Existem vários tipos de entrada relacionados aos botões: <input type="submit"> , <input type="image"> , <input type="file"> , <input type="reset"> , <input type="button"> .
Cada um deles tem um significado, por exemplo, " arquivo " é usado para fazer upload de um arquivo, " redefinir " limpa um formulário e " enviar " envia os dados para o servidor. Verifique a referência W3 no MDN ou no W3Schools .

O elemento de botão ( <button>) é bastante versátil:

  • você pode aninhar elementos dentro de um botão, como imagens, parágrafos ou cabeçalhos;
  • Os botões também podem conter pseudo-elementos ::before e ::after ;
  • botões suportam o atributo disabled . Isso facilita a sua ativação e desativação.

Novamente, verifique a referência W3 para a tag <button> no MDN ou http://www.w3schools.com/tags/tag_button.asp .


<button> é flexível, pois pode conter HTML. Além disso, é muito mais fácil estilizar usando CSS, e o estilo realmente é aplicado em todos os navegadores. No entanto, existem algumas desvantagens relacionadas ao Internet Explorer (Eww! IE!). O Internet Explorer não detecta o atributo value corretamente, usando o conteúdo da tag como o valor. Todos os valores em um formulário são enviados para o servidor, independentemente de o botão ser clicado ou não. Isso torna o uso como um <button type="submit"> complicado e doloroso.

<input type="submit"> por outro lado, não tem nenhum valor ou problemas de detecção, mas você não pode, no entanto, adicionar HTML como você pode com <button> . Também é mais difícil estilizar e o estilo nem sempre responde bem em todos os navegadores. Espero que isso tenha ajudado.


<button>
  • por padrão se comporta como se tivesse um atributo "type =" submit "
  • pode ser usado sem um formulário, bem como em formulários.
  • texto ou conteúdo html permitido
  • pseudo elementos css permitidos (como: antes)
  • o nome da tag geralmente é exclusivo para um único formulário

vs.

<input type='button'>
  • type deve ser definido como 'submit' para se comportar como um elemento de envio
  • só pode ser usado em formulários.
  • somente conteúdo de texto permitido
  • sem pseudo elementos css
  • mesmo nome de tag que a maioria dos elementos de formulários (entradas)

-
nos navegadores modernos, ambos os elementos são facilmente estilizáveis ​​com css, mas na maioria dos casos, o elemento de button é o preferido, pois você pode estilizar mais com elementos internos de html e pseudo





html-input