Exemplo Incorreto
<button></button>
Botões, o que são e para que servem?
O Elemento HTML button representa um botão clicável, eles podem ser de três tipos: submit, reset e button
Observação: Os números mencionados nos exemplos, são as linhas do código fonte HTML.
← Retornar para página principal
Tipos de Botões
Existem três categorias de botões no HTML, que são:
- submit:
- O botão envia os dados do formulário para o servidor. Esse é o padrão se o atributo não for especifidado, ou se o atributo é dinamicamente mudado para um valor vazio ou inválido.
- reset:
- O botão restaura todos os controles para seus valores iniciais.
- button:
- O botão não possui comportamento padrão. Ele pode ter scripts do lado do cliente associado com os eventos do elemento, no qual são acionados quando o evento ocorrer.
Botão sem rótulo
São botões que não possuem descrição.
Exemplo Correto
<button>Enviar dados profissionais</button>
Exemplo prático
Semântica do elemento atrelada no rótulo
Exemplo Incorreto
<button aria-label="Exibir extrato, Botão">Exibir extrato</button>
Exemplo prático
Exemplo Correto
Observação: Os números mencionados nos exemplos, são as linhas do código fonte HTML.
<button>Exibir extrato</button>
Exemplo prático
Botão de alternância
O exemplo a seguir tem o objetivo que quando pressionado emita um alerta de boas vindas.
Exemplo Incorreto
<button id="alternancia2" aria-pressed="false">Liga/desliga</button>
<span id="demo1" aria-live="polite"></span>
Exemplo prático
Exemplo Correto
<button id="alternancia1" aria-pressed="false">Liga/Desliga</button>
<span id="demo" aria-live="polite"></span>
Exemplo prático
Botão expansível
O exemplo a seguir tem o objetivo que quando pressionado emita um alerta de boas vindas.
Exemplo Incorreto
<button id="expansivel">Saiba mais sobre botões expansíveis</button>
<span id="demo2" aria-live="polite"></span>
Exemplo prático
Exemplo Correto
<button id="expansivel" aria-expanded="false">Saiba mais sobre botões expansíveis</button>
<span id="demo3" aria-live="polite"></span>