input type="submit"
e button
tag são intercambiáveis? ou se houver alguma diferença, quando usar input type="submit"
e quando button
?
E se não há diferença, por que temos duas tags para a mesma finalidade?
html
accessibility
w3c
web-standards
semantic-markup
Jitendra Vyas
fonte
fonte
button
e ovalue
atributo em alguma versão do IEinput
enviará apenas o que você esperava, alguma versão do IE não funciona bem combutton
s.input type="button"
vsbutton type=button
: stackoverflow.com/questions/469059/…Respostas:
http://www.w3.org/TR/html4/interact/forms.html#h-17.5
Portanto, apenas para funcionalidade, eles são intercambiáveis!
(Não se esqueça,
type="submit"
é o padrão combutton
, então deixe-o desligado!)fonte
type="submit"
botão, como o padrãotype
ésubmit
.type
padrão erabutton
. Prefiro explicitar cada atributo para evitar qualquer inconsistência no navegador.O
<input type="button">
é apenas um botão e não fará nada por si só. O<input type="submit">
, quando estiver dentro de um elemento do formulário, enviará o formulário quando clicado.Outro botão 'especial' útil é o
<input type="reset">
que limpará o formulário.fonte
<input>
e<button>
tags. Você forneceu informações úteis sobre a<input>
sua resposta, mas ela não tem o<button>
lado.Use a tag <button> em vez de <input type = "button" ..> . É a prática recomendada no bootstrap 3.
http://getbootstrap.com/css/#buttons-tags
fonte
button
é muito mais explícito, acompanhaaria
recursos de acessibilidade e é muito mais fácil de estilizar. Também é uma visão de futuro, pois é HTML5.Embora ambos os elementos apresentem funcionalmente o mesmo resultado *, recomendo fortemente que você use
<button>
:input
sugere que o controle é editável ou pode ser editado pelo usuário;button
é muito mais explícito em termos da finalidade a que serveinput[type="submit"]
não são exibidas corretamente em alguns casosPOST
/GET
request ao servidor* Com exceção do qual, por padrão, não possui comportamento especificado.
<button type="button">
Em resumo, eu desencorajo o uso de
<input type="submit" />
.fonte
<input type='submit' />
não suporta HTML, pois é uma única tag de fechamento automático.<button>
, Por outro lado, suporta HTML, imagens, etc. dentro porque é um par de tags:<button><img src='myimage.gif' /></button>
.<button>
também é mais flexível quando se trata de estilo CSS.A desvantagem
<button>
é que não é totalmente suportado por navegadores mais antigos. O IE6 / 7, por exemplo, não o exibe corretamente.A menos que você tenha algum motivo específico, provavelmente é melhor manter-se
<input type='submit' />
.fonte
<input type="submit" value="Log In" />
<button>
em favor de algo novo. Isso significa que não devemos mencionar uma tag específica nas respostas, porque ela pode mudar em algum momento no futuro? Eu preferiria deixar como um exercício para o leitor determinar como as respostas se aplicam à sua situação. Enquanto as informações forem valiosas para o leitor, não vejo problema em incluí-las.Sei que essa é uma pergunta antiga, mas achei no mozilla.org e acho que se aplica.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form#And_a_<button>_to_finish
fonte
<button type="button">
para avançar um controle deslizante / carrossel para o próximo slide.<button>
é mais recente que<input type="submit">
, é mais semântico, fácil de estilizar e suportar HTML dentro dele.fonte
Enquanto as outras respostas são ótimas e respondem à pergunta, há uma coisa a considerar ao usar
input type="submit"
ebutton
. Com um,input type="submit"
você não pode usar um pseudo-elemento CSS na entrada, mas pode usar um botão!Esse é um dos motivos para usar um
button
elemento sobre uma entrada quando se trata de estilo.fonte
Não sei se isso é um bug ou um recurso, mas há uma diferença muito importante (pelo menos em alguns casos) que encontrei:
<input type="submit">
cria um par de valores-chave em sua solicitação e<button type="submit">
não. Testado no Chrome e Safari.Portanto, quando você tiver vários botões de envio em seu formulário e quiser saber qual deles foi clicado - não use
button
, useinput type="submit"
.fonte
Se você está falando
<input type=button>
, ele não envia o formulário automaticamentese você está falando sobre a
<button>
tag, é mais recente e não é enviado automaticamente em todos os navegadores.Conclusão: se você deseja enviar o formulário com um clique em todos os navegadores, use
<input type="submit">
fonte
<button type="submit">
para enviar formulários automaticamente.