HTML Button
O 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!).
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: Loop Nerd
2.360 Visualizações
Deixe um comentário