HTML Button

Postado: 24 de março de 2022

HTML Button

Elemento HTML <button> representa um botão clicável.

A tag <button> no HTML faz parte do conjunto de elementos da linguagem de marcação. Esse elemento tem a função de executar algo ao receber um clique pelo usuário. Por isso é um recurso muito útil em formulários HTML.

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>, podemos colocar conteúdo, como texto, icones ou imagem. Essa é a principal diferença entre esse elemento e os botões criados com o elemento <input>.

Veja o exemplo abaixo:

<button>Clique</button>

Atributos do HTML Button

O HTML Button é um elemento que permite o uso dos atributos globais e atributos de eventos.

Além desses, veja também os seguintes atributos:

autofocus – especifica que ao ler a página, esse botão recebe um auto foco.

disabled – especifica que esse botão está desabilitado.

form id – especifica um ou mais botões para formulários.

action – especifica a URL a qual será enviado as informações do formulário.

method – (get ou post) especifica o método de envio do formulário.

name – especifica um nome ao botão.

type – especifica um tipo ao botão.

value – especifica uma valor inicial ao botão.

Esses atributos, são os mais importante a ser declarado e no HTML Button o type, que pode exercer diferentes características nos diversos navegadores.

Boa parte desses botões são utilizados 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 ícones.

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 Reseta os valores iniciais dos campos.
  • button: O botão não possui comportamento padrão. Ele pode conter scripts. associado com os eventos do elemento, no qual são acionados quando o evento ocorrer quando clicado.

Veja o exemplo abaixo:

<form>
    <input type="text">
    <button type="submit">Enviar Dados</button>
</form>

Usando eventos de click no script veja o exemplo abaixo:

<!DOCTYPE html>
<html>
<head>
<title>Blog Loop Nerd - Códigos Html e Css Prontos</title>

<script>
  function LoopNerd(){
   alert("Acabei de clicar no Button HTML!");
  }
</script>
</head>
<body>

<input type="button" onclick="LoopNerd()" value="Exibir Alerta" />

</body>
</html>

Ao clicar no botão chamamos a função  evento, ou seja, um alerta com o texto (Acabei de clicar no Button HTML!).

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 Dados">
Veja na pratica abaixo:

<form>
    <input type="button" value="Enviar Dados">
</form>

Publicado por: loopnerd

955 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado.