Atributos de input em HTML
Tipos de input escolheram a face com type. Atributos de input refinam o comportamento na mesma tag: dicas, obrigatório, intervalos, comprimento, padrões e bloqueios. Catálogo de ajudas diárias — não um segundo mapa de type nem o truque form= seguinte.
Por que atributos de input importam
type certo ainda deixa lacunas: vazios obrigatórios, idades fora do intervalo, códigos longos. Atributos acrescentam checagens leves. Em apps reais, valide no servidor também.
Resposta direta
1) Mantenha name, id, value. 2) placeholder é dica — não substitui label. 3) required para obrigatórios. 4) min/max/step em número/data; maxlength em texto; às vezes pattern. 5) readonly visível e costuma enviar; disabled bloqueia e costuma não enviar. 6) Atributos refinam type — não o substituem; distintos de form=.
📊 Handy input attributes
| Attribute | Role | Beginner tip |
|---|---|---|
| placeholder | Hint text in an empty field | Not a label — always keep a real label |
| required | Must be filled before submit | Browser may block empty submit |
| min / max / step | Limits for number/date-like types | Match the type you already chose |
| maxlength | Max characters for text-like types | Soft cap in the UI; still check on the server |
| pattern | Allowed character pattern | Keep patterns simple for beginners |
| disabled | Not usable; usually not submitted | Do not disable fields you still need to send |
| readonly | Visible, not editable; still submitted | Good for fixed display values |
Perfil: obrigatório, dicas e comprimento
Formulário pequeno: nome required com placeholder, usuário com maxlength/pattern, cidade opcional.
<form action="/profile" method="post">
<label for="fullname">Full name</label>
<input id="fullname" name="fullname" type="text"
placeholder="Ada Lovelace" required>
<label for="user">Username</label>
<input id="user" name="user" type="text"
maxlength="12" pattern="[A-Za-z0-9_]+"
placeholder="ada_lovelace" required>
<label for="city">City</label>
<input id="city" name="city" type="text"
placeholder="Optional">
<button type="submit">Save</button>
</form>
Ler o demo de perfil
- required em nome e usuário
- placeholder só se vazio — nome vem do label
- maxlength=12
- pattern letras/dígitos/_
- cidade sem required
- type=text já escolhido; atributos refinam
Reserva: intervalos e bloqueios
Número e data ganham com min/max/step. Código readonly visível e costuma enviar; promo disabled costuma omitir.
<form action="/book" method="post">
<label for="guests">Guests</label>
<input id="guests" name="guests" type="number"
min="1" max="8" step="1" value="2" required>
<label for="night">Night</label>
<input id="night" name="night" type="date"
min="2026-10-01" max="2026-12-31" required>
<label for="code">Booking code</label>
<input id="code" name="code" type="text"
value="BK-1042" readonly>
<label for="promo">Promo (staff only)</label>
<input id="promo" name="promo" type="text"
value="STAFF" disabled>
<button type="submit">Book</button>
</form>
Ler o demo de reserva
- min/max/step hóspedes e noite
- value=2 início editável
- readonly mantém o código e costuma enviar
- disabled bloqueia edição e muitas vezes o envio
- limites de data com type=date
- seguinte: associar com form=id
Escolher os ajudantes certos
- Deve preencher: required
- Dica vazia: placeholder (+ label)
- Limites número/data: min max step
- Teto de caracteres: maxlength
- Formato simples: pattern
- Ver sem editar e enviar: readonly
- Bloquear e muitas vezes não enviar: disabled
- Fiação: name id value
- Não reescolher type aqui
Prática — apertar campos com atributos
- Perfil; remova required e restaure
- Esvazie placeholder; mantenha label
- maxlength para 20
- Hóspedes fora de min/max
- Alterne readonly no código
- Compare envio código vs promo
- Frase: atributos refinam; type escolheu a face
Erros fáceis
- placeholder no lugar de label
- desativar campo que deve enviar
- confiar só no navegador
- min/max em tipos que ignoram
- pattern complexo demais
- confundir com catálogo type
- pular cedo para form=
Resumo
- Atributos refinam após type
- Do dia a dia: required, placeholder, intervalos, maxlength, pattern
- readonly costuma enviar; disabled não
- placeholder sugere; label nomeia
- Mantenha name/id/value
- Seguinte: atributos form do input
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo