Diferença entre <input type = 'submit' /> e <button type = 'submit'> texto </button>

Existem muitas lendas sobre eles. Eu quero saber a verdade. Quais são as diferenças entre os dois exemplos a seguir?

1. <input type='submit' value='text' />

2. <button type='submit'>text</button>

Não sei de onde você tira suas lendas, mas:

Botão Enviar com <button>

Como com:

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

O IE6 enviará todo o texto desse botão entre as tags, outros navegadores enviarão apenas o valor. O uso <button>oferece mais liberdade de layout sobre o design do botão. Em todas as suas intenções e propósitos, parecia excelente a princípio, mas várias peculiaridades do navegador dificultam o uso às vezes.

No seu exemplo, o IE6 enviará textpara o servidor, enquanto a maioria dos outros navegadores não enviará nada. Para torná-lo compatível com vários navegadores, use <button type="submit" value="text">text</button>. Melhor ainda: não use o valor, porque se você adicionar HTML, torna-se bastante complicado o que é recebido no servidor. Em vez disso, se você deve enviar um valor extra, use um campo oculto.

Botão com <input>

Como com:

<input type="button" />

Por padrão, isso faz quase nada. Nem mesmo enviará seu formulário. Você só pode colocar texto no botão e atribuir um tamanho e uma borda por meio de CSS. Sua intenção original (e atual) era executar um script sem a necessidade de enviar o formulário ao servidor.

Botão de envio normal com <input>

Como com:

<input type="submit" />

Como o primeiro, mas na verdade envia o formulário ao redor.

Botão de envio de imagem com <input>

Como com:

<input type="image" />

Como o primeiro (enviar), ele também enviará um formulário, mas você pode usar qualquer imagem. Essa costumava ser a maneira preferida de usar imagens como botões quando um formulário precisava ser enviado. Para mais controle, <button>agora é usado. Isso também pode ser usado para mapas de imagens no servidor, mas isso é uma raridade atualmente. Quando você usa o usemapatributo - e (com ou sem esse atributo), o navegador envia as coordenadas X / Y do ponteiro do mouse para o servidor (mais precisamente, o local do ponteiro do mouse dentro do botão no momento em que você clica nele). Se você simplesmente ignorar esses extras, não passa de um botão de envio, disfarçado de imagem.

Existem algumas diferenças sutis entre os navegadores, mas todos enviarão o atributo value, exceto a <button>tag conforme explicado acima.

Com <button>, você pode usar tags img etc. onde o texto é

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

com o <input>tipo, você está limitado ao texto

Em suma :

<input type="submit">

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

Ambos, por padrão, desenham visualmente um botão que executa a mesma ação (envie o formulário).

No entanto, é recomendável usar <button type="submit">porque possui melhor semântica, melhor suporte ao ARIA e é mais fácil de estilizar.