8

Estou com uma dúvida simples voltada para a parte semântica. O button eu posso modificar suas ações usando o Javascript. Quando devo usá-lo ou trocá-lo pelo submit ?

<input type="button"> e <input type="submit">
2
  • 1
    Não sei se é exatamente duplicada, mais veja se esta questão ajuda input type="submit" ou button type="submit"
    – abfurlan
    Commented 30/10/2014 às 17:28
  • 3
    Não vejo como uma duplicata, mas também não ficou clara a pergunta por carecer de contexto. Contexto esse que talvez pudesse classificar a pergunta como duplicata. Commented 30/10/2014 às 18:00

1 Resposta 1

11

Se pergunta a diferença entre <button type="submit" e <button type="button"

A diferença é que type="submit" faz o submit de uma form em que esse botão estiver inserido; enquanto que o type="button" não tem nenhuma ação por defeito.

Via JavaScript pode interceptar o evento submit no caso de, por exemplo, querer fazer uma validacão dos dados inseridos no formulário. O type="button" não faz mais do que ser um botão e acionar eventual código que o JavaScript possa ter para ele.

Se pergunta a diferença entre <input type="submit" e <button type="submit"

Eles são semelhantes mas diferentes. A semântica deve ser o fator de escolha:

Input do utilizador: use input
Click num botão: use button

"Antigamente" quando os browsers eram menos previsiveis e atuavam mais imprevisivelmente (estou a falar sobretudo do IE) o input type="submit" era o mais seguro.

A grande vantagem do button é que pode ter HTML dentro enquanto que o input é auto-fechado e o texto que ele mostra é definido no atributo value.

Não esqueça que o button sem type="button", ou seja sem type definido atua como um type="submit", é essa a sua funcionalidade "por defeito".

Button:

  • Tipos diferentes: submit, reset, button

Input:

  • Tipos diferentes: color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week, text, file, hidden, image, month, radio, reset, password e submit
6
  • 2
    Adorei o "por defeito". Commented 30/10/2014 às 17:36
  • E o <button>, quando devo usa-lo?
    – VitorLuizC
    Commented 30/10/2014 às 17:40
  • @Haxz Se você quiser colocar HTML dentro, como um svg ou um giff de um Loading por exemplo... Ou caso você esteja desenvolvendo pensando em Firefox < 30 e tenha problemas com o line-height no <input>. Commented 30/10/2014 às 17:43
  • @Sergio, "é auto-fechado e o texto que ele mostra é definido no atributo value." Na verdade por recomendação deve ser usado da seguinte maneira: <button type="submit">Save changes</button> Commented 30/10/2014 às 17:44
  • 1
    Li errado, ops! :) Commented 30/10/2014 às 17:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .