HTML: botoes
HTML:
botões
(Elivelto Ebermam)
Botões tem diversas finalidades
em uma página web, mas podemos dizer que a principal delas é enviar um
formulário.
Existem outras formas de inserir
um botão em HTML, mas usaremos a tag <button> para inserir um botão.
Normalmente a tag é acompanhada do atributo type. Existem dois tipos principais
de botões para um formulário: submit e reset.
Botão do tipo submit
A função desse botão é enviar os
dados do formulário para o servidor. Quando você clica nesse botão, todos os
dados do formulário são enviados para o servidor. Por exemplo, em um formulário
de login e senha, quando você preenche seu login e sua senha, eles são enviados
quando você clica no botão de enviar. Veja um exemplo:
<form action=”servidor.php”
method=”post”>
Login:
<input type=”text” name=”login”> <br>
Senha:
<input type=”text” name=”senha”> <br>
<button type=”submit”> Entrar </button>
</form>
Lembrando que para construir uma
página web, devemos escrever o código completo, observe:
<html>
<head>
<title> Exemplo
</title>
</head>
<body>
<form action=”servidor.php”
method=”post”>
Login:
<input type=”text” name=”login”>
<br>
Senha:
<input type=”text” name=”senha”>
<br>
<button type=”submit”> Entrar
</button>
</form>
</body>
</html>
Se inserirmos esse código no editor online do site W3Schools
[1], acessado através link https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
, e depois clicarmos em “run”, temos o seguinte resultado:
Na linha 11, fazemos a abertura
da tag <button> e usamos o valor “submit” para o atributo type, colocamos
o nome do botão, que no caso é Entrar e depois fazemos o fechamento da tag.
Quando clicarmos em enviar, aparece uma mensagem de erro. Isso acontece porque
a página “servidor.php”, que é o destino do formulário, não existe. Se ela
existisse, ela iria processar a informação enviada pelo formulário e retornar
uma página web. Porém não é o foco nesse momento mostrar como construir essa
página.
Botão do tipo reset
O botão do tipo reset, restaura
os valores padrões dos campos do formulário. Normalmente ele limpa os campos,
já que normalmente os campos são vazios por padrão. Para inserir esse botão,
devemos usar o valor “reset” para o atributo type. Veja um exemplo:
Observe que, fazemos a abertura
da tag <button> e usamos o valor “reset” para o atributo type, colocamos
o nome do botão, que no caso é Limpar e depois fazemos o fechamento da tag. Se
preenchermos os campos de login e senha e depois clicamos no botão limpar, o
que foi digitado irá sumir.
Referências
[1] HTML Tutorial. W3Schools,
2020. Disponível em <https://www.w3schools.com/html/>.
Acesso em: 4 de mai. de 2020.
Comentários
Postar um comentário