Carregando...

Formulários HTML

O responsivo ajustou larguras. Os formulários abrem um capítulo novo: o visitante escreve e envia. O contentor é form.

Porque os formulários importam

Páginas estáticas mostram; formulários recolhem. Sem form o browser não sabe que controlos vão num envio.

Resposta direta

1) form com action e method. 2) controlos com name. 3) label for = id. 4) botão submit. Marcação primeiro.

📊 Form parts at a glance

Part	Job	Beginner tip
form	Groups controls for one submission	Keep related fields inside one form
action	URL or path that receives the data	Practice paths are fine while learning
method	How the browser sends the payload	get puts data in the URL; post uses the request body
input (+ others)	Collects a value from the user	Always set name for submitted keys
label	Names the field for people and assistive tech	for must match the control id
submit	Triggers sending the form	Prefer type="submit" on buttons

Esqueleto mínimo de formulário

Comece pelo contentor e dois atributos. Um caminho de prática basta para aprender.

Minimal form skeleton

html

HTML Code

<form action="/subscribe" method="post">
<!-- fields go here -->
</form>

Ler o esqueleto

form é o limite de envio
action = caminho de destino
post = corpo
get = URL
404 sem servidor real ok ao aprender

Campo com label mais envio

Pelo menos um campo e forma de enviar. for deve coincidir com id; defina name.

Subscribe form with label

html

HTML Code

<form action="/subscribe" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<button type="submit">Subscribe</button>
</form>

Ler o demo de subscrição

for e id ligam
name chave do payload
type=email pista do browser
button type=submit envia

GET vs POST

get para pesquisa partilhável; post quando os dados não devem ficar na barra de endereço.

Prática — formulário pequeno de subscrição

form com post e action de prática
input email com label e name
button type=submit
confirmar o render
tirar o input do form um momento

Erros fáceis

inputs fora do form
name em falta
botão sem type=submit
label/for desalinhados
confundir action e method

Resumo

form agrupa controlos para um envio
action + method descrevem destino e estilo
label e name tornam o campo enviável
a seguir: atributos de formulário

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓

Perguntas

🎯

70%

Para Passar

♾️

∞

Tempo

🔄

∞

Tentativas

📝 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

Idioma