Formulários

Os formulários são elementos fundamentais na web, permitindo que os

usuários realizem ações como login, cadastro, envio de mensagens,
preenchimento de pesquisas e muito mais; eles existem como a ponte entre o
usuário e a coleta de dados em uma página, criando experiências interativas e
funcionais. Nesta apostila, exploraremos os fundamentos dos formulários em
HTML, entendendo como estruturá-los com as tags básicas – como <form> ,
<input> e <label> . Também veremos os diferentes tipos de campos e elementos

interativos, como botões, menus suspensos e áreas de texto, que ampliam as

possibilidades de interação. Por fim, será apresentado o conceito de
validação básica de dados, garantindo que os formulários sejam mais
confiáveis e atendam às necessidades dos usuários de maneira eficiente.
Os formulários em HTML servem para criar um contêiner lógico que permite
capturar, organizar e enviar dados do usuário para um servidor, ou processá-
los diretamente no lado do cliente.
Os dados capturados por um formulário podem ser manipulados de duas
formas principais: no lado do cliente e no lado do servidor , dependendo das
necessidades da aplicação.

Lado do Cliente
No lado do cliente, os dados do formulário podem ser processados diretamente
no navegador do usuário, geralmente utilizando JavaScript. Por exemplo, é
possível validar se um campo obrigatório foi preenchido ou se um endereço de
e-mail está no formato correto antes que os dados sejam enviados ao servidor.
Isso melhora a experiência do usuário ao fornecer feedback imediato e reduzir
a necessidade de solicitações desnecessárias ao servidor. Um exemplo
simples com a utilização de um script JavaScript seria:

Formulários 1
 Nesse exemplo, o JavaScript faz a validação do campo de e-mail antes que
os dados sejam enviados, proporcionando uma checagem rápida e eficiente
no lado do cliente.

Lado do Servidor
Os dados do formulário são enviados para um servidor que processa essas
informações de forma mais robusta e segura. Isso é necessário quando os
dados precisam ser armazenados em um banco de dados, validados com
precisão ou utilizados para outras lógicas de negócio. O envio dos dados é
geralmente realizado através do método HTTP POST ou GET, dependendo do
propósito.

No back-end, os dados são processados por linguagens de programação e

frameworks que gerenciam a lógica do servidor. Exemplo que aprenderemos:
PHP: uma linguagem amplamente utilizada para manipulação de formulários e
integração com bancos de dados.

Exemplo:

Formulários 2
 Elementos Básicos de um Formulário
Os formulários apresentam várias funções e propósitos, como:

Coletar dados de usuário

Organizar elementos de entrada

Envio de dados

Validação de dados

Interatividade e conexão com Back-End

Com a evolução do HTML5, o formulário ganhou varios atributos e recursos

novos, com o objetivo de tornar sua manipulação mais eficiente.
Atributos novos e melhorados:

Tag <form>
O elemento principal é a tag <form> , que inicia o formulário, ele possuí varios
atributos que aos poucos vamos conhecendo:

<form action="[Link]" method="post">

</form>

action: define para onde os dados serão enviados (um script ou URL).

method: define como os dados serão enviados ( get ou post ).

Método GET

Formulários 3
 Os métodos GET e POST são utilizados como ferramenta para envio de dados
em formulários HTML, empregados no protocolo HTTP para comunicação
entre o cliente (navegador) e o servidor. Ambos têm finalidades diferentes e
comportamentos específicos, sendo fundamentais para o funcionamento de
aplicações web. A escolha entre eles depende do tipo de operação que se
deseja realizar.

O método GET é utilizado principalmente para solicitar dados do servidor.

Quando um formulário é enviado usando o método GET, os valores dos
campos são anexados à URL na forma de parâmetros de consulta (query
strings). A URL resultante contém os dados em pares chave-valor separados
por & após o símbolo ?
Características do método GET:

1. Dados visíveis na URL.

2. Tamanho limitado: depende do

navegador e do servidor (geralmente entre 2.000 e 8.000 caracteres).

3. Cacheável: os dados enviados por GET podem ser armazenados em cache

pelo navegador ou em logs do servidor, permitindo que as requi-
sições sejam facilmente reutilizadas.

4. Requisições repetidas: o mesmo pedido GET pode ser repetido.

5. Usado em busca e navegação: é comum em formulários de pesquisa,

filtros de páginas ou envio de parâmetros de navegação.

Método POST
O método POST é utilizado para enviar dados ao servidor com o objetivo de
criar, atualizar ou processar informações. Diferentemente do GET, os dados
enviados por POST não são visíveis na URL; em vez disso, são incluídos no
corpo da requisição HTTP.
Características do método POST:

1. Dados ocultos: os dados não aparecem na URL, tornando o POST

mais seguro para envio de informações sensíveis, como senhas e dados
pessoais.

2. Sem limite de tamanho prático: como os dados são incluídos no corpo

da requisição, é possível enviar volumes maiores de informação, como
arquivos ou formulários extensos.

Formulários 4
 3. Não armazenável em cache: as requisições POST não são armazenadas
em cache por padrão.

4. Impacta o servidor: o POST altera o estado do servidor, criando ou

modificando recursos. Por isso, ele não é idempotente; enviar a mesma
requisição repetidamente pode gerar duplicação ou efeitos colaterais.

5. Usado para envio de dados complexos: é apropriado para formulários

que exigem validações robustas, processamento no back-end ou upload
de arquivos.

GET X POST

Aspecto GET POST

Dados enviados no corpo da

Visibilidade Dados visíveis na URL
requisição

Menos seguro; dados ficam Mais seguro; dados não são

Segurança
expostos visíveis

Tamanho dos
Limitado pelo tamanho da URL Sem limite prático
dados

Pode ser armazenado em

Cache Não armazenado em cache
cache

Sim, não altera o estado do Não, pode alterar o estado do

Idempotência
servidor servidor

Busca, filtros e links de Login, cadastros e uploads de

Uso comum
navegação arquivos

Tag <input>
A tag input é bastante versátil, projetada para criar campos de formulário
interativos que permitem aos usuários inserirem dados de diversas naturezas;
a flexibilidade vem do atributo type, que especifica o tipo de campo e o dado
que ele pode receber. É possível, por exemplo, utilizá-lo para criar campos
simples como texto, senhas protegidas, números, ou até para funcionalidades
mais específicas, como botões de envio de formulário, seleção de arquivos ou
caixas de verificação.
Os atributos mais comuns dessa tag são:

type:

Formulários 5
 Determina o tipo de entrada: text, password, email, number, radio, checkbox,
submit etc.

<input type="text" name="nome">

Tipo Tag/Exemplo Descrição

Texto <input type="text"> Campo de texto simples

E-mail <input type="email"> Validação básica de e-mail

Senha <input type="password"> Oculta os caracteres digitados

Botão de envio <input type="submit"> Envia o formulário

Caixa de seleção <input type="checkbox"> Múltiplas opções

Botão de rádio <input type="radio"> Seleção única entre várias

Arquivo <input type="file"> Upload de arquivos

name:

Associa um nome ao campo para identificação, permitindo que os dados

inseridos sejam enviados com identificação.

<input type="text" name="usuario">

id:

Atribui um identificador único ao campo facilitando associações.

Também serve como ponto de identificação para outras linguagens ou
frameworks.

<input type="email" id="email_comercial">

value:

Define um valor inicial para um campo, ou captura um valor enviado pelo

usuário.

<input type="text" name="cidade" value="São Paulo">

placeholder:

Formulários 6
 Exibe um texto de orientação dentro do campo que desaparece quando a
digitação é iniciada.

<input type="text" placeholder="Digite seu nome">

required:

Torna obrigatório o preenchimento do campo.

<input type="email" required>

maxlength e minlength:

Limita o número de caracteres possíveis no campo.

<input type="text" maxlength="50" minlength="5">

readonly:

Esse atributo torna o campo somente leitura.

<input type="text" value="Não editável" readonly>

disabled:

Desabilita o campo, impedindo interações.

<input type="text" value="Desativado" disabled>

pattern:

Especifica uma expressão regular para validação do conteúdo.

<input type="text" pattern="[A-Za-z]+" title="Apenas letras">

Tag <label>
Essa tag é utilizada para descrever campos de entrada como os criados pela
tag <input>, fornecendo um texto explicativo que indica o propósito de cada
campo. Essa associação não é apenas visual, mas funcional, pois melhora
significativamente a experiência de pessoas que utilizam tecnologias

Formulários 7
 assistivas como leitores de tela, ao garantir que os dispositivos possam
identificar e transmitir corretamente ao usuário o que cada campo representa.
Ao usar <label>, você não só organiza melhor seus formulários, mas também
garante que eles sejam compreensíveis para todos, independentemente das
limitações ou dispositivos usados.

O atributo for vincula <label> a um campo específico por meio da

tag id :

<label for="email">E-mail:</label>
<input type="email" id="email" name="email">

Exemplo de aplicação das tags <form>, <input> e <label>:

<form action="[Link]" method="post">

<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome"><br>

<label for="email">E-mail:</label>
<input type="email" id="email" name="email"><br>

<input type="submit" value="Enviar">

</form>

Tipos de <input> diferentes: radio, checkbox, submit

Campo radio
Permite selecionar uma única opção entre um conjunto predefinido de valores.
Características:

Campos do tipo radio devem compartilhar o mesmo atributo name para que
sejam mutuamente exclusivos.

Geralmente é utilizado com <label> para melhorar a acessibilidade.

Atributos comuns:

checked : define qual botão estará selecionado por padrão.

Formulários 8
 : torna obrigatória a seleção de uma opção (útil para conjuntos
required

de opções).

<input type="radio" id="opcao1" name="escolha" value="1">

<label for="opcao1">Primeira opção</label>
<input type="radio" id="opcao2" name="escolha" value="2" checked>
<label for="opcao2">Segunda Opção</label>

Campo checkbox
Este campo permite a seleção de uma ou várias opções de um conjunto de
valores predefinidos.
Características:

O checkbox permite múltiplas seleções.

Pode ser usado isoladamente ou em grupos.

Atributos comuns:

checked : define quais caixas estarão marcadas por padrão.

<input type="checkbox" id="noticias" name="interesses" value="noticia

s">
<label for="noticias">Receber notícias</label>
<input type="checkbox" id="promocoes" name="interesses" value="prom
ocoes" checked>
<label for="promocoes">Receber promoções</label>

Campo submit
Este campo é utilizado para enviar os dados de um formulário para o servidor.
Características:

Quando clicado, submete o formulário inteiro para a URL especificada no

atributo action do <form>.

É estilizado como um botão, mas pode ser customizado com CSS.

Atributos comuns:

value : define o texto exibido no botão.

Formulários 9
 Para enviar os dados de um formulário para armazenamento ou
processamento, é necessário um elemento que dispare o evento de submissão.
Para isso, podemos utilizar um <input> do tipo submit, que é responsável por
essa ação. A seguir está um exemplo simples de como utilizá-lo:

<input type="submit" value="Enviar">

Exemplo de formulário com utilização dos campos text ,

password , email , number , radio , checkbox , submit :

<form action="/submit" method="post">

<!-- Campo de texto -->
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" placeholder="Digite seu no
me" required>

<!-- Campo de e-mail -->

<label for="email">E-mail:</label>
<input type="email" id="email" name="email" placeholder="email@exe
[Link]" required>

<!-- Campo de senha -->

<label for="senha">Senha:</label>
<input type="password" id="senha" name="senha" placeholder="Digite
sua senha" required>

<!-- Campo numérico -->

<label for="idade">Idade:</label>
<input type="number" id="idade" name="idade" min="1" max="120" req
uired>

</br><br><!-- Utilizado para pular linha para melhorar a visibilidade do e

xemplo -->

<!-- Botões de rádio -->

<label>Gênero:</label>

Formulários 10
 <input type="radio" id="masculino" name="genero" value= "masculino"
required>
<label for="masculino">Masculino</label>
<input type="radio" id="feminino" name="genero" value="feminino">
<label for="feminino">Feminino</label>

</br><br><!-- Utilizado para pular linha para melhorar a visibilidade do e

xemplo -->

<!-- Caixas de seleção -->

<label>Interesses:</label>
<input type="checkbox" id="tecnologia" name="interesses" value="tec
nologia">
<label for="tecnologia">Tecnologia</label>
<input type="checkbox" id="esportes" name="interesses" value="espor
tes">
<label for="esportes">Esportes</label>
<input type="checkbox" id="arte" name="interesses" value="arte">
<label for="arte">Arte</label>

</br><br><!-- Utilizado para pular linha para melhorar a visibilidade do e

xemplo -->

<!-- Botão de envio - submit -->

<button type="submit">Enviar</button>
</form>

Elementos interativos: <button> <select> <option> <textarea>

Estes são elementos importantes na funcionalidade do formulário, que trazem
mais interatividade e permitem maior interação e experiência do usuário.

Tag <select>
É um componente muito utilizado para criar menus suspensos ou listas de
opções selecionáveis. Ele é ideal para uma lista de escolhas predefinidas que o
usuário deve selecionar, como países, estados ou categorias de produto.
Sua simplicidade está na capacidade de exibir várias opções compactadas em
um único campo, economizando espaço na interface. Ele pode ser configurado

Formulários 11
 para permitir:
• Seleção única, que é o padrão, em que apenas uma opção pode ser
escolhida.
• Seleção múltipla (usando o atributo multiple), permitindo que os usuá-
rios escolham várias opções ao mesmo tempo.
• Quando combinado com JavaScript, o <select> pode ser facilmente
dinamizado, como no caso de listas dependentes (por exemplo, sele-
cionar um estado em função do país escolhido).

Menu suspenso básico

Este exemplo simples mostra um menu suspenso com três opções para
selecionar a cor preferida:

<label for="cores">Escolha sua cor favorita:</label>

<select id="cores" name="cores">
<option value="vermelho">Vermelho</option>
<option value="azul">Azul</option>
<option value="verde">Verde</option>
</select>

O usuário pode selecionar apenas uma cor e quando o formulário for

submetido, o valor da opção escolhida será enviado.

Menu suspenso exibindo as opções

Caso seja necessário permitir que o usuário visualize mais de uma opção, é
possível adicionar o atributo size a <select>:

<label for="hobbies">Selecione seus hobbies:</label>

<select id="hobbies" name="hobbies" multiple size="4">
<option value="leitura">Leitura</option>
<option value="musica">Música</option>
<option value="esportes">Esportes</option>
<option value="viagem">Viagem</option>
</select>

O atributo size=“4” exibe até quatro opções ao mesmo tempo, facilitando a

navegação. O uso de name=“hobbies” é importante para enviar as opções

Formulários 12
 selecionadas.

Usando <optgroup> para categorizar opções

Quando há muitas opções em um menu suspenso, o elemento <optgroup>
pode ser usado para organizá-las em categorias:

<label for="carros">Escolha um carro:</label>

<select id="carros" name="carros">
<optgroup label="Sedans">
<option value="corolla">Toyota Corolla</option>
<option value="civic">Honda Civic</option>
</optgroup>
<optgroup label="SUVs">
<option value="crv">Honda CR-V</option>
<option value="rav4">Toyota RAV4</option>
</optgroup>
</select>

Tag <option>
Dentro de um <select>, cada escolha é definida por um <option>. Este
elemento representa uma única entrada na lista de opções, e sua essência o
que dá vida ao <select>.
Atributos importantes incluem:
• value: define o valor enviado ao back-end quando aquela opção é
selecionada; se não for especificado, o texto entre as tags <option> será
usado.
• selected: marca uma opção como pré-selecionada ao carregar a página.
• disabled: torna a opção visível, mas não interativa; geralmente usado para
opções que não estão disponíveis no momento.
Combinados, <select> e <option> formam um par versátil e extremamente útil
para capturar entradas de usuários de maneira controlada e eficiente.

Tag <textarea>
Quando a entrada de texto de um único campo é insuficiente, <textarea> entra
em cena. Esse elemento é ideal para capturar grandes volumes de texto, como
comentários, descrições ou mensagens. Diferente de <input type=“text”>, que
é restrito a uma linha, <textarea> permite várias linhas, sendo dimensionável

Formulários 13
 tanto em altura quanto em largura.
A personalização é um ponto forte de <textarea>. Você pode definir:
• Tamanho inicial: com os atributos rows (linhas) e cols (colunas),
especificando a altura e a largura do campo de texto.
• Placeholder: um texto de exemplo que orienta o usuário sobre o que
escrever.
• Atributo maxlength: para limitar o número máximo de caracteres que pode
ser inserido.
Além disso, ele suporta formatação de texto e validação nativa em
navegadores modernos. É amplamente utilizado em formulários em que os
usuários precisam fornecer informações detalhadas, como feedbacks ou
mensagens personalizadas.

<body>
<h2>Escreva um breve resumo sobre você</h2>
<form>
<label for="resumo">Resumo:</label><br>
<textarea id="resumo" name="resumo" rows="6" cols="60" max-leng
th="300" required>
Sou apaixonado por tecnologia e adoro explorar novas linguagens de
programação.
</textarea>
<br><br>
<button type="submit">Enviar</button>
</form>
</body>

CONTINUA….

Formulários 14
Formulários 15