Aula 80 - Campos de Formulário

Introdução

Os campos de formulário são elementos utilizados para capturar informações digitadas ou selecionadas pelo usuário.

Eles permitem criar páginas interativas como cadastros, login, pesquisas e sistemas Web.

📌 O principal elemento utilizado para criar campos é a tag <input>.

Estrutura Básica de um Campo

<input type="text">

O atributo type define o tipo de campo que será criado.

Principais Tipos de Campos

Tipo	Utilização
text	Texto simples.
password	Senhas.
email	Endereço de e-mail.
number	Números.
date	Datas.
file	Envio de arquivos.

Campo Texto - type="text"

Utilizado para informações como nomes, cidades e endereços.

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

Nome:

Campo Senha - type="password"

Oculta os caracteres digitados pelo usuário.

<input 
type="password">

Senha:

Campo E-mail - type="email"

Permite validar endereços de e-mail.

<input 
type="email">

E-mail:

Campo Número - type="number"

Aceita valores numéricos.

<input 
type="number">

Idade:

Campo Data - type="date"

Cria um seletor de datas.

<input 
type="date">

Data:

Campo Arquivo - type="file"

Permite selecionar arquivos do computador.

<input 
type="file">

Documento:

Atributo name

Identifica o campo quando os dados são enviados ao servidor.

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

Atributo placeholder

Mostra uma dica dentro do campo.

<input 
placeholder="Digite seu nome">

Atributo required

Define que o preenchimento do campo é obrigatório.

<input 
type="text"
required>

Atributos de Validação

Atributo	Função
required	Campo obrigatório.
maxlength	Limite de caracteres.
minlength	Mínimo de caracteres.
placeholder	Texto de orientação.

Exemplo Completo

Boas Práticas

Utilizar o tipo correto de campo.
Adicionar labels.
Aplicar validações.
Informar exemplos usando placeholder.
Facilitar a experiência do usuário.

Erros Comuns

Erro	Problema
Todos campos como text	Sem validação adequada.
Sem required	Dados incompletos.
Sem label	Problemas de acessibilidade.

⚠️ Escolher corretamente o tipo de campo melhora a validação e a experiência do usuário.

Resumo Final

Elemento	Descrição
<input>	Cria campos.
type	Define o tipo.
name	Identifica o dado.
required	Torna obrigatório.

📌 Os campos de formulário são a base para criar aplicações Web interativas.

📝 Campos de Formulário HTML