HTML: Formulários - caixas de texto
HTML:
introdução a formulários e caixa de texto
(Elivelto Ebermam)
Formulários HTML são um dos
principais pontos de interação entre um usuário e um web site ou aplicativo.
Eles permitem que os usuários enviem dados para o web site. Na maior parte
do tempo, os dados são enviados para o servidor da web, mas a página da web também
pode interceptar para usá-los por conta própria [1].
A tag <form> é usada para
iniciar um formulário. Ela é o recipiente do formulário, ou seja, toda vez que
for criar um formulário em HTML, é necessário utilizar essa tag.
A tag possui abertura e fechamento,
veja:
<form>
</form>
Entre meio a abertura e o
fechamento da tag devem ser inseridos os campos do formulário, os quais possuem
tags específicas para inseri-los.
Atributos da tag <form>
A tag form possui alguns atributos:
Atributo action
Normalmente os dados dos campos de um formulário são
enviados para outra página web, a qual processa esses dados. Por exemplo, uma
página de login tem um formulário com dois campos, login e senha. O usuário
preenche esses campos e clica no botão de enviar e o site lhe retorna uma
resposta, que pode ser a página que o usuário quer acessar ou uma mensagem de
falha (login e senhas incorretos, acesso negado, etc). Essa verificação de
login e senha não é feita pela página HTML no navegador do usuário, mas sim em
uma página no servidor do site.
O atributo action serve justamente para definir para qual
página os dados daquele formulário serão enviados. Veja um exemplo:
<form action=”servidor.php”>
</form>
Nesse exemplo os dados serão enviados para uma página
chamada servidor.php (que é um arquivo com extensão .php localizado no servidor
do site).
Atributo method
Além do atributo action, que define para onde os dados serão
enviados, temos também o atributo method, que define qual a forma de envio dos
dados. Normalmente usa-se o valor “post” para ele, mas também existem outros
valores, como “get”. Veja um exemplo:
<form action=”servidor.php” method=”post”>
</form>
Tag <input>
Acima definimos um formulário, porém ele só é útil se conter
alguns campos a serem preenchidos. Podemos inserir um desses campos com a tag
<input>. Essa tag é usada para os controles interativos, ou campos de
entrada de dados. Essa tag possui apenas abertura. Essa tag deve ser utilizada
com o atributo type.
Atributo type
Esse atributo é muito importante, pois define qual tipo da
tag <input> será utilizado. O valor desse atributo pode modificar
bastante tanto o aspecto visual quanto funcional dessa tag. Veja alguns valores
possíveis para o atributo:
|
Valor
|
Forma de uso
|
Descrição
|
|
Text
|
<input type=”text”>
|
Caixa de texto.
|
|
Checkbox
|
<input type=”checkbox”>
|
Caixa de seleção.
|
|
Radio
|
<input type=”radio”>
|
Outro tipo de caixa de seleção.
|
|
password
|
<input type=”password”>
|
Campo do tipo senha.
|
|
Date
|
<input type=”date”>
|
Campo de seleção de data.
|
|
Time
|
<input type=”time”>
|
Campo de seleção de horário.
|
|
color
|
<input type=”color”>
|
Campo de seleção de cor.
|
Caixas de texto
As caixas de texto são usados para digitar pequenos textos.
Veja um exemplo de um código HTML completo:
<html>
<head>
<title>Exemplo</title>
</head>
<body>
<form
action="servidor.php" method="post">
Digite seu nome:
<input
type="text">
</form>
</body>
</html>
Se inserirmos esse código no editor online do site W3Schools [2],
acessado através link https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
, temos o seguinte resultado:
Referências
[1] Meu primeiro formulário em HTML. Mozilla, 2020. Disponível em <https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Forms/Meu_primeiro_formulario_HTML>.
Acesso em: 4 de mai. de 2020.
[2] HTML Tutorial. W3Schools,
2020. Disponível em <https://www.w3schools.com/html/>.
Acesso em: 4 de mai. de 2020.
Showw
ResponderExcluir