Campos de Entrada

Input genérico é sensor burro

Usar type="text" para tudo é abrir mão da inteligência nativa do navegador. O Mestre escolhe o sensor correto para cada dado: e-mail, senha, busca, número, data, telefone, URL, arquivo, cor, intervalo e seleção.

text, email, password e search

Esses campos parecem parecidos, mas comunicam intenções diferentes ao navegador, ao mobile e às tecnologias assistivas.

<label for="nome">Nome</label>
<input type="text" id="nome" name="usuario_nome" required>

<label for="email">E-mail</label>
<input type="email" id="email" name="usuario_email" autocomplete="email" required>

<label for="senha">Senha</label>
<input type="password" id="senha" name="senha" minlength="8" required>

<label for="busca">Pesquisar</label>
<input type="search" id="busca" name="q" placeholder="Buscar aulas...">

number, date, time, datetime-local, tel e url

O navegador consegue validar, restringir e adaptar o teclado mobile quando você usa o type correto.

<input type="number" name="quantidade" min="0" max="100" step="5">
<input type="date" name="data_nascimento">
<input type="time" name="horario">
<input type="datetime-local" name="agenda">
<input type="tel" name="telefone" autocomplete="tel">
<input type="url" name="portfolio" placeholder="https://meusite.com">

• number: valores matemáticos, quantidades e medidas.
• date/time: dados temporais com seletores nativos.
• tel: telefone é texto de comunicação, não número matemático.
• url: endereço web com validação básica.

checkbox, radio, file, range e color

<input type="checkbox" id="termos" name="termos" value="aceito" required>
<label for="termos">Aceito os termos</label>

<input type="radio" id="plano-basic" name="plano" value="basic">
<label for="plano-basic">Basic</label>

<input type="radio" id="plano-pro" name="plano" value="pro">
<label for="plano-pro">Pro</label>

<input type="file" name="curriculo" accept=".pdf,.doc,.docx">
<input type="range" name="satisfacao" min="1" max="5" step="1">
<input type="color" name="cor_tema" value="#38bdf8">

Atributos essenciais de campos de entrada

• required: impede envio vazio em campo essencial.
• placeholder: dica temporária, nunca substitui label.
• value: valor inicial ou valor enviado em opções.
• readonly: impede edição, mas envia o dado.
• disabled: desativa o campo e não envia o dado.
• autocomplete: facilita preenchimento com dados salvos.
• pattern: valida formato com expressão regular.
• minlength e maxlength: controlam tamanho do texto.

<input type="text"
       name="codigo"
       pattern="[A-Z]{3}-[0-9]{4}"
       title="Use o formato ABC-1234"
       required>

<input type="text" name="pedido" value="#1234" readonly>
<input type="text" name="campo_inativo" value="Nao enviado" disabled>

15 perguntas para provar domínio

1. O que o type="email" faz? Valida e-mail básico e otimiza o teclado mobile.
2. Função do step? Define intervalo de incremento/decremento.
3. readonly envia dado? Sim.
4. disabled envia dado? Não.
5. Para que serve type="tel"? Otimizar entrada de telefone no mobile.
6. Como agrupar radios? Mesmo atributo name.
7. Qual input gera calendário? type="date".
8. O que search pode oferecer? Botão de limpar em alguns navegadores.
9. Para que serve pattern? Validar formato com RegEx.
10. type="color" retorna o quê? Código hexadecimal.
11. Diferença checkbox/radio? Checkbox múltiplo; radio escolha única.
12. O que minlength faz? Define mínimo de caracteres.
13. Para que serve type="file"? Upload de arquivos.
14. id deve ser único? Sim.
15. Sem type, input vira o quê? type="text".

Registre seu formulário avançado

git status
git add .
git commit -m "aula-24: cria formulario com campos de entrada avancados"
git push

• git status: monitora as alterações.
• git add .: adiciona o formulário avançado ao índice.
• git commit: registra o domínio sobre inputs especializados.
• git push: envia sua interface de dados para o repositório.