O HTML Button é um dos artifícios do HTML que permite introduzir botões a nossas página HTML. Nesse artigo vamos descobrir como utilizar o Button em nossas páginas. Os tópicos deste artigo são então:
Conteúdo
A tag <button>
O HTML Button pode ser definido pela tag de abertura <button> e a tag de fechamento </button>. Dentro de um elemento <button>, você pode colocar conteúdo, como texto ou imagens. Essa é a principal diferença entre esse elemento e os botões criados com o elemento <input>.
Dessa forma, podemos utilizar a seguinte sintaxe:
<button>Click Aqui</button>
Com isso, o resultado será conforme a imagem do exemplo abaixo:
Atributos do HTML Button
O HTML Button é um elemento que permite o uso dos atributos globais e também atributos de eventos. Além desses, temos também os seguintes atributos:
| Atributo | Valor | Descrição |
|---|---|---|
| autofocus | autofocus | especifica que ao ler a página, esse botão recebe um auto foco. |
| disabled | disabled | especifica que esse botão está desabilitado. |
| form | form_id | especifica um ou mais botões para formulários. |
| formaction | URL | especifica a URL a qual será enviado as informações do formulário. |
| formmethod | get post | especifica o método de envio do formulário. |
| name | name | especifica um nome ao botão. |
| type | button reset submit | especifica um tipo ao botão. |
| value | text | especifica uma valor inicial ao botão. |
Desses atributos, o mais importante a ser declarado e no HTML Button ó type, que pode exercer diferentes características nos diversos navegadores.
Porém, é fácil perceber que, boa parte desses botões são utilizados hoje em dia como input, A vantagem de utilizar o HTML Button é a liberdade de estilização permitida através do CSS, além de poder incluir elementos como imagens.
O atributo type
O tipo de HTML Button. O possíveis valores 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 especificado, 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.
Vejamos, então o exemplo abaixo:
<form>
<input type="text">
<button type="submit">Enviar</button>
</form> dessa forma, o resultado será como na imagem abaixo:
Ou ainda podemos usar o tipo button para chamar um script como no exemplo abaixo:
<button type="button" onclick="Evento()">Evento</button>
<script>
function Evento(){
alert('evento funcionando')
}
</script> onde ao clicar no botão, chamará a função evento, ou seja, um alerta com o texto “evento funcionando”.
Input do tipo Button
Também é possível chamar um input do tipo botão, com o atributo type button.
<input type="button" value="enviar">
Dessa forma temos o resultado como na imagem abaixo:
