Botões: button e os tipos submit, reset e button

Depois de preencher todos os campos de um formulário, o usuário precisa de uma forma de interagir com ele, seja para enviar os dados, limpar o que foi digitado ou executar alguma outra ação. Para isso, usamos os botões.

No HTML, podemos criar botões de duas formas principais: com a tag <button> ou com <input type="button">. Vamos focar na tag <button> por ser mais flexível e semântica, e entender seus diferentes tipos.

A tag <button>: o botão flexível

A tag <button> é a forma mais recomendada para criar botões em HTML. Ela é uma tag de contêiner, o que significa que você pode colocar texto, imagens ou outros elementos HTML dentro dela.

Exemplo básico:

<button>Clique aqui</button>
<button><img src="icone.png" alt="Ícone"> Enviar</button>

Tipos de botões (type):

O atributo type da tag <button> é crucial, pois ele define o comportamento do botão dentro de um formulário.

1. type="submit" (padrão)

• Este é o tipo de botão mais comum em formulários.
• Quando clicado, ele envia os dados do formulário para a URL especificada no atributo action da tag <form>, usando o method definido.
• Se você omitir o atributo type em um <button> dentro de um <form>, ele se comportará como type="submit" por padrão.

<form action="/processar" method="post">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome_usuario">
  <button type="submit">Enviar Formulário</button>
</form>

2. type="reset"

• Quando clicado, ele limpa todos os campos do formulário, restaurando-os aos seus valores iniciais (ou vazios, se não houver valor inicial).
• Use com cautela, pois pode ser frustrante para o usuário limpar acidentalmente um formulário longo.

<form>
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email_usuario">
  <button type="reset">Limpar Campos</button>
  <button type="submit">Enviar</button>
</form>

3. type="button"

• Este é um botão genérico que não tem nenhum comportamento padrão associado a formulários.
• Ele não envia o formulário nem limpa os campos.
• É usado principalmente quando você quer que o botão execute alguma ação via JavaScript (ex: abrir um modal, adicionar um item à lista, etc.) sem interferir no envio do formulário.

<form>
  <label for="item">Item:</label>
  <input type="text" id="item" name="novo_item">
  <button type="button" onclick="adicionarItem()">Adicionar Item</button>
  <button type="submit">Finalizar</button>
</form>

<button type="button" onclick="abrirMenu()">Abrir Menu</button> <!-- Botão fora de um formulário -->

<input type="submit">, <input type="reset"> e <input type="button">

Embora a tag <button> seja geralmente preferida, você também pode criar botões usando a tag <input> com o atributo type apropriado:

• <input type="submit" value="Enviar">: Funciona exatamente como <button type="submit">Enviar</button>. O texto do botão é definido pelo atributo value.
• <input type="reset" value="Limpar">: Funciona exatamente como <button type="reset">Limpar</button>.
• <input type="button" value="Ação">: Funciona exatamente como <button type="button">Ação</button>.

Por que <button> é geralmente preferido?

• Flexibilidade de conteúdo: <button> pode conter HTML (imagens, tags de formatação), enquanto <input> só aceita texto simples no atributo value.
• Acessibilidade: É considerado ligeiramente mais semântico e flexível para estilização e acessibilidade.

<!-- Equivalente ao exemplo anterior com input -->
<form>
  <label for="nome_input">Nome:</label>
  <input type="text" id="nome_input" name="nome_input_usuario">
  <input type="submit" value="Enviar com Input">
  <input type="reset" value="Limpar com Input">
  <input type="button" value="Ação com Input" onclick="alert('Ação!')">
</form>

Atributos comuns para botões

• name: (Apenas para type="submit") O nome do botão que será enviado ao servidor junto com seu value se ele for clicado. Útil para identificar qual botão de envio foi usado se houver vários.
• value: (Apenas para type="submit") O valor que será enviado ao servidor se o botão for clicado.
• disabled: Desabilita o botão, impedindo o clique.

Resumindo

• Use a tag <button> para criar botões, pois é mais flexível.
• O atributo type define o comportamento do botão:
  • type="submit": Envia o formulário (padrão se omitido dentro de <form>).
  • type="reset": Limpa os campos do formulário.
  • type="button": Não tem comportamento padrão, usado para ações via JavaScript.
• Você também pode usar <input type="submit">, <input type="reset"> e <input type="button">, mas são menos flexíveis.
• O atributo name e value são relevantes para type="submit" se você precisar identificar qual botão de envio foi clicado no servidor.