Atributos de formulário HTML
Os formulários deram o esqueleto. Os atributos de formulário afinam o comportamento — action vazio, get vs post, autofill, checks e nomear o form. Tipos de input e form= depois.
Porque os atributos importam
Dois formulários parecidos podem comportar-se diferente. Atributos em form mudam destino, estilo HTTP, autofill e validação sem novos campos.
Resposta direta
1) action + method. 2) action vazio → página atual. 3) autocomplete. 4) novalidate só de propósito. 5) id/name do form para scripts.
📊 Form attributes at a glance
| Attribute | Role | Beginner tip |
|---|---|---|
| action | Where the browser sends the data | Empty often means “this page” |
| method | get (query string) or post (request body) | Prefer post for private or large data |
| autocomplete | Autofill hint for the form | off for sensitive practice forms |
| novalidate | Skip built-in HTML checks on submit | Demo tool — not a production default |
| name / id | Identify the form element itself | Useful when scripts or CSS target the form |
Formulário de contacto com atributos
Alargue o esqueleto: mantenha campos com label e decore a etiqueta form de abertura.
<form
id="contact"
name="contact"
action="/contact"
method="post"
autocomplete="on">
<label for="full-name">Name</label>
<input id="full-name" name="full_name" type="text" required>
<label for="msg">Message</label>
<textarea id="msg" name="message" rows="3" required></textarea>
<button type="submit">Send</button>
</form>
Ler o demo de contacto
- id/name identificam o formulário
- action é caminho explícito
- post mantém a mensagem fora da barra
- autocomplete=on permite autofill
- name dos campos chaveiam o payload
- required é ao nível do campo
Pesquisa GET e novalidate opcional
A pesquisa usa muitas vezes get para a query no URL. Sem dados sensíveis. autocomplete=off para prática. novalidate só demos especiais.
<form action="/search" method="get" autocomplete="off">
<label for="q">Search</label>
<input id="q" name="q" type="search">
<button type="submit">Go</button>
</form>
<!-- Demo-only: skip built-in checks
<form action="/demo" method="post" novalidate>
...
</form>
-->
Ler o demo de pesquisa
- get acrescenta ?q=
- autocomplete=off reduz autofill
- sem required os vazios seguem
- novalidate é só lembrete
- nunca get para palavras-passe
action vazio e GET vs POST
- vazio/omitido → URL atual
- get para filtros e pesquisa
- post para registo e mensagens
- method sozinho não é segurança
Prática — afinar atributos
- Esvazie action
- Alterne method da pesquisa
- autocomplete=off no contacto
- novalidate temporário com required
- Remova novalidate
- Confirme id do form e name dos campos
- Frase: atributos afinam destino, estilo, autofill e checks
Erros fáceis
- Surpresa com action vazio
- Palavras-passe com get
- novalidate permanente em produção
- Confundir name do form com name do campo
- Achar que off é garantia de segurança
- Trocar action e method
Resumo
- Atributos afinam o envio
- action + method núcleo; vazio → URL atual
- autocomplete e novalidate opcionais
- name/id do form vs name do campo
- post para privado
- a seguir: elementos de formulário
🧠 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