inputé um elemento nulo. Não use <input />, apenas use <input>.
CDT
@ HakanFıstık, não é um idiota disso, já esteve lá, é um (mais ou menos sutilmente) diferente, por exemplo, type=submitporque buttonnem havia uma preocupação lá (provavelmente porque nem fazia parte do padrão naquela época (AFAIK), quando essa outra pergunta foi feita).
Sz.
Respostas:
120
Não sei de onde você tira suas lendas, mas:
Botão Enviar com <button>
Como com:
<buttontype="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:
<inputtype="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:
<inputtype="submit"/>
Como o primeiro, mas na verdade envia o formulário ao redor.
Botão de envio de imagem com <input>
Como com:
<inputtype="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.
Desde que você editou de qualquer maneira, o argumento sobre o IE6 ainda é verdadeiro com o IE11 no modo quirks. (Mais um motivo para não usar o modo peculiar). Corrigido no Edge embora. Ah, e há mais diferenças entre <input> e <button>: <input> tem white-space:prepor padrão, <button> não. Isso fica aparente ao tentar tornar um botão mais largo que a janela de visualização.
Sr. Lister
19
Com <button>, você pode usar tags img etc. onde o texto é
<buttontype='submit'> text -- can be img etc. </button>
com <input type="image" />você não está limitado a texto e também realiza um envio.
Abel
2
@ Abel: é mais para criar um mapa de imagem que, por sua vez, envia a posição do ponteiro do mouse como name.xe name.yparâmetros (observe que o nameparâmetro não está presente!). Eu prefiro usar <input type="submit">com um plano de fundo CSS se o único objetivo é ter um botão com uma imagem de plano de fundo.
precisa saber é o seguinte
@BalusC: Verdade, mas seu objetivo, no momento da redação do padrão HTML 2.0, quando não havia CSS, era, conforme descrito, usar uma imagem como um botão ou como um mapa de imagem do servidor. Mas, de fato, você pode (ab) usar um botão normal com uma imagem de plano de fundo para fazer o mesmo com CSS e HTML.
Abel
@Abel: Essa nunca foi a intenção de input type="image". Para isso o <button type="submit">intencionado.
precisa saber é o seguinte
1
@ BalusC: talvez entendamos o padrão de maneira diferente, mas isso está no texto original de Lee para o padrão HTML 2.0: " TYPE=IMAGE' implies TIPO = ENVIAR 'o processamento; ou seja, quando um pixel é escolhido, o formulário como um todo é enviado". . Faça dela o que você acha que é o :) real intenção
<input type="submit">e<button type="submit">?inputé um elemento nulo. Não use<input />, apenas use<input>.type=submitporquebuttonnem havia uma preocupação lá (provavelmente porque nem fazia parte do padrão naquela época (AFAIK), quando essa outra pergunta foi feita).Respostas:
Não sei de onde você tira suas lendas, mas:
Botão Enviar com
<button>Como com:
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:
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:
Como o primeiro, mas na verdade envia o formulário ao redor.
Botão de envio de imagem com
<input>Como com:
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 ousemapatributo - 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.fonte
white-space:prepor padrão, <button> não. Isso fica aparente ao tentar tornar um botão mais largo que a janela de visualização.Com
<button>, você pode usar tags img etc. onde o texto écom o
<input>tipo, você está limitado ao textofonte
<input type="image" />você não está limitado a texto e também realiza um envio.name.xename.yparâmetros (observe que onameparâmetro não está presente!). Eu prefiro usar<input type="submit">com um plano de fundo CSS se o único objetivo é ter um botão com uma imagem de plano de fundo.input type="image". Para isso o<button type="submit">intencionado.TYPE=IMAGE' impliesTIPO = ENVIAR 'o processamento; ou seja, quando um pixel é escolhido, o formulário como um todo é enviado". . Faça dela o que você acha que é o :) real intençãoEm suma :
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.fonte