UA3 — Formulários HTML5
HTML5 expandiu o elemento form com novos tipos de input e validação nativa no navegador, sem precisar de JavaScript.
Estrutura de um formulário
<form action="/enviar" method="post">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" required>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Enviar</button>
</form>Novos tipos de input em HTML5
| type | O que faz | Validação automática |
|---|---|---|
email | Campo de e-mail | Verifica formato name@domain |
url | Campo de URL | Verifica formato http://… |
number | Número com spinner | min, max, step |
range | Slider numérico | min, max, step |
date | Seletor de data | Formato e intervalo |
time | Seletor de hora | Formato HH:MM |
color | Seletor de cor | Retorna valor hex |
tel | Telefone | Teclado numérico no mobile |
search | Campo de busca | Botão limpar nativo |
Atributos de validação
<!-- Obrigatório -->
<input type="text" required>
<!-- Comprimento mínimo/máximo -->
<input type="text" minlength="3" maxlength="50">
<!-- Intervalo numérico -->
<input type="number" min="1" max="100" step="5">
<!-- Padrão regex -->
<input type="text" pattern="[0-9]{5}-[0-9]{3}" placeholder="00000-000">Outros elementos de formulário
<!-- Seleção -->
<select name="estado">
<option value="sc">Santa Catarina</option>
<option value="sp">São Paulo</option>
</select>
<!-- Área de texto -->
<textarea name="msg" rows="4" cols="40"></textarea>
<!-- Checkbox -->
<input type="checkbox" name="aceito" id="aceito">
<label for="aceito">Aceito os termos</label>GET vs POST no formulário
method="get" — dados na URL (visível, para buscas). method="post" — dados no body da requisição (para dados sensíveis, cadastros).
Atributos da tag <form>
| Atributo | O que faz | Valores / Observações |
|---|---|---|
name | Nome do formulário | Identifica o form no documento (útil quando há mais de um) |
action | URL de destino dos dados | Se omitido, envia para a própria página |
method | Método HTTP de envio | get (na URL) | post (no corpo) |
autocomplete | Autocompletar navegador | on (padrão) | off |
target | Onde exibir a resposta | _self | _blank | _parent | _top | nome do iframe |
enctype | Codificação dos dados | application/x-www-form-urlencoded (padrão) | multipart/form-data (upload) | text/plain |
novalidate | Desativa validação HTML5 | Atributo booleano (sem valor) |
Tipos de <input> — completo
| type | O que é | Detalhe |
|---|---|---|
text | Texto livre | Aceita qualquer caractere |
password | Senha | Oculta os caracteres digitados |
file | Upload de arquivo | Exibe botão para selecionar arquivo |
hidden | Campo oculto | Invisível ao usuário, mas enviado ao servidor |
radio | Múltipla escolha única | Mesmo name = grupo, escolha exclusiva |
checkbox | Múltipla escolha múltipla | Permite marcar vários itens |
email | Valida formato name@domain | |
number | Número | Aceita min, max, step |
range | Slider | Seleção visual de intervalo |
date | Data | Exibe calendário nativo |
month | Mês/ano | Seleciona mês e ano |
week | Semana/ano | Seleciona número da semana |
time | Hora | Máscara HH:MM automática |
color | Cor | Retorna valor hexadecimal |
tel | Telefone | Teclado numérico no mobile |
search | Busca | Botão de limpar nativo |
url | URL | Valida formato http://… |
Botões
| Elemento | Função |
|---|---|
<button type=“submit”> | Envia os dados do formulário ao servidor |
<button type=“reset”> | Limpa todos os campos do formulário |
<button type=“button”> | Botão genérico — ação definida via JavaScript |
<input type=“submit”> | Equivalente ao button submit (forma legada) |
Atributos de validação e controle
| Atributo | Efeito | Exemplo |
|---|---|---|
required | Campo obrigatório | <input required> |
placeholder | Texto de dica dentro do campo | placeholder=“00000-000” |
autofocus | Foco automático ao carregar a página | <input autofocus> |
readonly | Campo visível mas não editável | <input readonly> — valor enviado |
disabled | Campo desabilitado | <input disabled> — valor NÃO enviado |
minlength / maxlength | Limita caracteres | minlength=“3” maxlength=“50” |
min / max / step | Limita intervalo numérico | min=“0” max=“10” step=“0.5” |
pattern | Regex de validação | pattern=“[0-9]{’{‘}5}-[0-9]{’{‘}3}“ |
title | Mensagem de dica na validação | title=“Digite um CEP válido” |
Práticas Modernas — Formulários
Constraint Validation API: via JavaScript, input.checkValidity() retorna true/false e input.validationMessage traz a mensagem de erro — permite mensagens de validação customizadas sem remover a validação nativa.
ARIA em formulários: use aria-describedby para associar mensagens de erro ao campo, e aria-required="true" para campos obrigatórios — leitores de tela precisam disso.
Validação client-side ≠ segurança: validação HTML5 é UX, não segurança. Sempre valide também no servidor — nunca confie apenas no browser.
Dicas para a prova — UA3
- Formulários HTML são usados para agrupar elementos de uma página com o objetivo de captar ou disponibilizar informações.
- A interação cliente-servidor em formulários se dá por solicitação e resposta.
method="get"→ dados visíveis na URL após o?.method="post"→ dados no corpo da requisição (invisíveis).type="hidden"→ campo invisível ao usuário, mas seu valor é enviado ao servidor normalmente.readonly→ impede edição mas o valor é enviado.disabled→ impede edição e o valor NÃO é enviado.radio→ só um item pode ser selecionado.checkbox→ múltiplos itens podem ser selecionados.enctype="multipart/form-data"é obrigatório para upload de arquivos.
Referências bibliográficas desta UA
- Saraiva, M. O. Desenvolvimento de Sistemas com PHP. Porto Alegre: SAGAH, 2018.
- Crowther, B. et al. HTML5 e CSS3. 2014.