Criando Formulários

O usuário agora fala com o sistema

Até aqui, o HTML organizava informação para leitura. Com formulários, o HTML começa a coletar dados do usuário e preparar esses dados para envio ao servidor. É o começo da web dinâmica.

form, action, method, GET e POST

A tag form é o contêiner da interatividade. O atributo action define o destino dos dados. O atributo method define como esses dados serão enviados.

<form action="/cadastro" method="post">
  <label for="nome">Nome completo</label>
  <input type="text" id="nome" name="nome" required>

  <button type="submit">Enviar cadastro</button>
</form>

• GET: envia dados pela URL. Ideal para busca, filtros e consultas públicas.
• POST: envia dados no corpo da requisição. Ideal para cadastro, login, checkout e dados sensíveis.

label, for, input, id e name

label é o rótulo semântico do campo. O atributo for deve bater exatamente com o id do input. O name é a identidade do dado para o servidor.

<label for="email-contato">E-mail de contato</label>
<input type="email"
       id="email-contato"
       name="usuario_email"
       placeholder="seu@email.com"
       required>

• id: identifica o elemento na página e conecta o label.
• name: identifica o dado enviado ao servidor.
• placeholder: é dica temporária, nunca substituto do label.

Escolha o tipo certo para o dado certo

<input type="text" name="nome">
<input type="email" name="email">
<input type="password" name="senha">
<input type="number" name="idade">
<input type="date" name="nascimento">
<input type="checkbox" name="termos" value="aceito">
<input type="radio" name="plano" value="basico">
<input type="radio" name="plano" value="premium">

O navegador usa o type para exibir teclados melhores no celular, validar dados básicos e melhorar a experiência do usuário.

fieldset, legend, textarea, select e required

Formulários longos precisam ser organizados. fieldset agrupa campos relacionados, legend dá nome ao grupo, textarea coleta texto longo, select oferece escolhas fechadas e required valida campos essenciais.

<fieldset>
  <legend>Preferências</legend>

  <label for="estado">Estado</label>
  <select id="estado" name="estado" required>
    <option value="">Selecione uma opção</option>
    <option value="sp">São Paulo</option>
    <option value="rj">Rio de Janeiro</option>
  </select>

  <label for="bio">Objetivo profissional</label>
  <textarea id="bio" name="objetivo" rows="5"></textarea>
</fieldset>

15 perguntas para provar domínio

1. Qual tag inicia um formulário? <form>.
2. Para que serve action? Define o destino dos dados.
3. Diferença entre GET e POST? GET envia via URL; POST envia no corpo da requisição.
4. O que method define? O método HTTP de envio.
5. Qual atributo conecta label ao input? for ligado ao id.
6. Para que serve type="password"? Mascarar caracteres digitados.
7. Função do name? Identificar o dado para o servidor.
8. Como criar área de texto longa? Com textarea.
9. O que submit faz? Submete o formulário.
10. Como criar lista de seleção? Com select e option.
11. Para que serve fieldset? Agrupar campos relacionados.
12. O que required faz? Impede envio com campo vazio.
13. Radio do mesmo grupo precisa do quê? Mesmo name.
14. Placeholder substitui label? Não.
15. Input sem name envia valor? Não corretamente.

Registre seu formulário profissional

git status
git add .
git commit -m "aula-23: cria formulario profissional de cadastro html"
git push

• git status: verifica o novo arquivo e mudanças.
• git add .: prepara o formulário para o commit.
• git commit: registra o domínio de formulários.
• git push: publica sua ferramenta de coleta de dados.