Atributos do HTML Button

•

Artes

0

mariana cosme

27/04/2024

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Metodologia Científica

174.474 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

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:
MENU
<!DOCTYPE html>
<html lang="pt-br">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Menu dropdown</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <nav class="dp-menu">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Produtos</a>
 <ul>
 <li><a href="#">Jogos</a></li>
 <li><a href="#">Filmes</a></li>
 <li><a href="#">Animes</a></li>
 <li><a href="#series">Séries</a></li>
 <li><a href="#">Notícias</a></li>
 </ul>
 </li>
 <li><a href="#">Contato</a></li>
 <li><a href="#">Quem somos</a></li>
 </ul>
 </nav>
</body>
</html>
CSS
:root {
 --cor-fundo: rgb(34, 41, 37);
 --cor-hover: rgb(118, 180, 145);
 --cor-primaria: rgb(231, 241, 236);
}
.dp-menu ul {
 list-style-type: none;
 padding: 0;
}
.dp-menu ul {
 background-color: var(--cor-fundo);
}
.dp-menu ul li {
 display: inline;
 position: relative;
}
.dp-menu ul li a {
 color: var(--cor-primaria);
 text-decoration: none;
 display: inline-block;
 padding: 10px;
 transition: background .3s;
}
.dp-menu ul li a:hover {
 background-color: var(--cor-hover);
}
/*sub menu*/
.dp-menu ul ul {
 display: none;
 left: 0;
 position: absolute;
}
.dp-menu ul li:hover ul {
 display: block;
}
.dp-menu ul ul {
 width: 150px
}
.dp-menu ul ul li a {
 display: block;
}
image1.jpeg
image2.jpeg