Módulo 2 / HTML & CSS

Formulários HTML

Inputs, validações e acessibilidade. A ponte entre o usuário e a aplicação.

school Aula 04 schedule 2 horas

Contexto

Por que formulários?

login

Login

Autenticação de usuário

person_add

Cadastro

Registro de novos usuários

search

Busca

Pesquisa e filtros

shopping_cart

Checkout

Pagamento e pedidos

Formulários são a principal forma de coletar dados do usuário. Praticamente toda aplicação web utiliza pelo menos um formulário.

Fundamento

Estrutura básica

code A tag <form>

<form action="/cadastro" method="POST">
  <label for="nome">
    Nome:
  </label>
  <input
    type="text"
    id="nome"
    name="nome"
  />

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

</form>

account_tree Conceitos-chave

action
URL para onde os dados serão enviados
method
GET (dados na URL) ou POST (dados no corpo)
label + for
Associa o rótulo ao campo (acessibilidade)
name
Identificador enviado ao servidor

Variedade

Tipos de input

text_fields Texto

text Texto simples

password Senha (oculto)

email Email (valida formato)

tel Telefone

url Endereço web

search Campo de busca

numbers Números e Datas

number Número com controles

range Slider

date Seletor de data

time Seletor de hora

datetime-local Data e hora

month Mês/Ano

toggle_on Seleção e Outros

checkbox Caixa de seleção

radio Escolha única

file Upload de arquivo

color Seletor de cor

hidden Campo oculto

submit Botão de envio

Demonstração

Inputs ao vivo

touch_app Teste aqui

type="text"

type="email"

type="password"

type="date"

touch_app Mais tipos

type="number"

type="range"

type="color"

type="checkbox" e type="radio"

HTML CSS Básico Avançado

Outros campos

Select e Textarea

code <select>

<label for="curso">Curso:</label>
<select id="curso" name="curso">
  <option value="">Selecione...</option>
  <option value="ads">ADS</option>
  <option value="si">Sist. Informação</option>
</select>

code <textarea>

<label for="msg">Mensagem:</label>
<textarea
  id="msg"
  name="mensagem"
  rows="4"
  placeholder="Escreva aqui..."
></textarea>

visibility Resultado

Curso:

Mensagem:

lightbulb <select> para escolha em lista, <textarea> para texto longo.

Segurança

Validação nativa

code Atributos de validação

<input
  type="email"
  required
  placeholder="email@exemplo.com"
/>

<input
  type="text"
  minlength="3"
  maxlength="50"
  required
/>

<input
  type="number"
  min="0"
  max="120"
  step="1"
/>

<input
  type="text"
  pattern="[0-9]{3}\.[0-9]{3}\.[0-9]{3}-[0-9]{2}"
  title="Formato: 000.000.000-00"
/>

verified Atributos disponíveis

required Campo obrigatório

minlength Mínimo de caracteres

maxlength Máximo de caracteres

min / max Valor mínimo / máximo

pattern Expressão regular personalizada

placeholder Texto de exemplo no campo

lightbulb A validação do navegador é apenas a primeira barreira. Sempre valide também no servidor!

Inclusão

Acessibilidade em formulários

close Evite

<!-- Input sem label -->
<input type="text"
  placeholder="Nome" />

<!-- Label sem for -->
<label>Email</label>
<input type="email" />

▸ Leitores de tela não associam label ao campo
▸ Placeholder some ao digitar

check Faça assim

<!-- Label associada via for + id -->
<label for="nome">Nome:</label>
<input type="text"
  id="nome" name="nome" />

<!-- Ou label envolvendo o input -->
<label>
  Email:
  <input type="email" name="email" />
</label>

▸ Clique na label foca no campo
▸ Leitores de tela identificam corretamente

group_work Agrupando com fieldset

<fieldset>
  <legend>Dados Pessoais</legend>
  <label for="cpf">CPF:</label>
  <input type="text" id="cpf" name="cpf" />
</fieldset>

Mão na massa

Exercício prático

edit_note Formulário de Matrícula

Crie um formulário de matrícula para a FATEC com os seguintes campos:

Dados Pessoais (fieldset):
- ▸ Nome completo (obrigatório, mínimo 5 caracteres)
- ▸ Email (obrigatório, tipo email)
- ▸ Data de nascimento (tipo date)
- ▸ CPF (com pattern para validação)
Dados Acadêmicos (fieldset):
- ▸ Curso (select com 3 opções)
- ▸ Período (radio: Manhã / Noite)
- ▸ Já programou antes? (checkbox)
Observações (textarea)
Botão de envio

star Bônus: adicione um campo de upload de foto (type="file") e um seletor de cor favorita!

Próxima aula

Aula 05

Introdução ao CSS: seletores, propriedades e cascata.

task_alt O que aprendemos hoje

check_circle Estrutura do <form> (action, method)
check_circle Tipos de <input> (text, email, date, etc.)
check_circle <select> e <textarea>
check_circle Validação nativa com atributos HTML
check_circle Acessibilidade: <label>, <fieldset>, <legend>

Próxima aula

auto_stories Referência: MDN Web Docs HTML Forms