Trabalhando com formulários no HTML

Os formulários estão presentes no nosso dia-dia em basicamente tudo que fazemos, ao entrarmos em um site que exige que façamos um login, criar uma conta pela primeira vez, entrar em nossas contas bancárias, entre outras atividades que realizamos enquanto estamos conectados na internet.

Mas, como de fato criamos essa interação entre o usuário e o website? Vamos acompanhar este artigo e prestar muita atenção no passo a passo, para que assim, no final, tenhamos um formulário completo.

O que é?

Formulários são campos onde o usuário irá completar inserindo todos os dados necessários, seja seu nome completo, idade, e-mail, senha, entre outros, com a finalidade de se cadastrar e acessar uma página, por exemplo.

Curso HTML5 + CSS3 - Formulários

Conhecer o curso

Do mesmo modo, podemos montar um formulário com a finalidade de criar perguntas com respostas já preenchidas, onde o usuário irá apenas selecionar a resposta que mais se encaixa com a pergunta.

Dessa forma, observamos que é possível criar diversos tipos de formulários, não se privando apenas do preenchimento de dados pessoais.

Estrutura de um formulário

Antes de mais nada, precisamos entender que um formulário é definido com a tag form. Quando declaramos form, ele vem acompanhado de um atributo chamado action, sua função é apenas coletar e levar todas as informações que foram inseridas no formulário para nosso documento, seja ele HTML, PHP, entre outros. Para definirmos qual documento queremos que o usuário seja direcionado, basta colocarmos o caminho dele dentro do atributo action.

Vamos imaginar que criamos dois documentos HTML, um colocamos o nome de cadastro.html, e o outro de home.html. No cadastro.html, iremos abrir a tag form, e no atributo action, vamos colocar ./home.html, para que assim, o usuário seja direcionado para a página home.html ao concluir o preenchimento do formulário. Ficando dessa forma:

<form action="./home.html"></form>

Em seguida, dentro de form irá conter as demais tags, onde cada uma terá sua função, hoje, vamos conhecer um pouco sobre o input, sendo ele, uma das principais tags quando estamos trabalhando com formulários.

Input

O input nada mais é do que a “caixa” onde o usuário irá interagir com a página, digitando os dados que estão sendo solicitados. Uma característica muito importante dessa tag é que ela não necessita da tag de fechamento, porém, ela vem acompanhada de um atributo conhecido como type.

O type serve para definirmos como que o nosso input irá se comportar, temos diversas opções, veremos as mais utilizadas, sendo elas:

Curso HTML5 + CSS3 - Box model e Posicionamento de Elementos

Conhecer o curso

text
password
email
date
submit

Primeiramente falaremos sobre o type com o valor de text, nele podemos inserir letras e números, uma característica do type é que, quando não definimos qual tipo ele será, por padrão, ele assume o tipo text. No código, fica dessa forma:

<form action="./home.html">
	<input type="text">
</form>

Ainda assim, temos em sequência, o type com o valor de password, quando declaramos esse valor para type, ele irá se comportar como um campo responsável para ser inserido senhas, aceitando também letras e números. Por ele ser do tipo password, ele não irá permitir que visualize o que está sendo digitado, ficando apenas caracteres de bolinhas. No código irá ficar assim:

<form action="./home.html">
	<input type="password">
</form>

No navegador veremos dessa forma:

imagem de um input tipo password, com uma frase em cima solicitando ao usuário que insira sua senha.

Agora, temos o type com o valor de email, bom, como o próprio nome diz, aqui é onde iremos inserir nosso e-mail. No código, fica dessa forma:

<form action="./home.html">
	<input type="email">
</form>

Uma característica muito importante do type com o valor de email, é que ele por padrão, já possui uma validação de e-mail, não permitindo que o usuário digite seu e-mail sem o @.

imagem mostrando um aviso de validação do input do tipo e-mail, solicitando ao usuário que inclua o @ no seu e-mail.

Já o type com o valor de date, serve para inserir datas, podendo colocar dia, mês e o ano. Ficando assim:

<form action="./home.html">
	<input type="date">
</form>

Por fim, temos o type com o valor de submit, a função do submit é enviar os dados do formulário para a página onde definimos no atributo action. Ele vem acompanhado do atributo value, e nele colocamos o nome que fizer mais sentido, por exemplo, “enviar”, já que ele se comporta como um botão.

<form action="./home.html">
	<input type="submit" value="Enviar">
</form>

Exemplo de formulário

Só para exemplificar, vamos observar um formulário completo para que o entendimento fique melhor.

Antes de mais nada, vamos criar dois documentos html, um com o nome de cadastro.html e outro com o nome de home.html. Após isso, dentro de cadastro.html, declaramos o seguinte código:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cadastro</title>
</head>
<body>
    <form action="./home.html">
        <p>Insira seu nome completo:</p>
        <input type="text">
        <p>Insira sua senha:</p>
        <input type="password">
        <p>Digite seu e-mail</p>
        <input type="email">
        <p>Insira sua data de nascimento</p>
        <input type="date">
        <input type="submit" value="Enviar">
    </form>
</body>
</html>

No navegador, será apresentado dessa forma:

Curso HTML5 + CSS3 - Apresentação de Dados

Conhecer o curso

Imagem de um formulário HTML solicitando ao usuário que informe seu nome completo, senha, e-mail e data de nascimento.

Agora, em home.html, iremos declarar a tag h1 para inserirmos um título com a seguinte frase: “Parabéns, você acaba de concluir seu primeiro formulário!”. Com isso, teremos uma pequena interação com o usuário e a página web.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
</head>
<body>
    <h1>Parabéns, você acaba de concluir seu primeiro formulário!</h1>
</body>
</html>

No navegador, veremos dessa forma:

Imagem com título escrito “Parabéns, você acaba de concluir seu primeiro formulário!

O que vimos aqui é um formulário onde não há um visual agradável para os usuários. Caso queira mudar isso, existe uma linguagem chamada CSS que trabalha em conjunto ao HTML. Sua função é realizar estilizações nos documentos.

Veja na prática como trabalhar com formulários em seus projetos

Conclusão

No artigo de hoje, vimos que usando apenas a nossa criatividade, conseguimos criar uma interação entre o usuário e a página web fantástica!

Além do mais, para o desenvolvimento de páginas, esse recurso é essencial, pois é através dele que iremos coletar as informações necessárias do usuário.