Formulários em HTML

Entendendo o código por trás da Academia do Bitelo

<form> O Envelope

Pense no <form> como um envelope de carta. Ele agrupa todos os campos. Sem ele, o botão "Enviar" não sabe quais dados pegar. O atributo action diz para onde a carta vai.

Dica: Nunca coloque um form dentro de outro form!

<label> A Etiqueta

É o texto que diz ao usuário o que escrever. O atributo for="..." conecta a etiqueta ao campo. Se você clicar no texto da etiqueta, o navegador foca no campo automaticamente!

<label for="nome">Clique neste texto:</label> <input id="nome" type="text">

<input type="..."> A Entrada de Dados

O elemento camaleão! Mudando o type, ele muda de forma. Abaixo, exemplos de texto simples, email (validação de @) e número.

<input type="text"> <input type="email"> <input type="number">

<input type="date"> O Calendário

Fundamental para evitar erros de digitação (como 31/02/2024). Ao usar type="date", o navegador cria automaticamente um calendário interativo para o usuário escolher o dia, mês e ano.

<label>Nascimento:</label> <input type="date">
Curiosidade: No celular, isso abre o seletor nativo do Android/iOS!

<input type="tel"> O Telefone

Visualmente parece um texto comum, mas faz mágica no celular: ele abre o teclado numérico automaticamente para facilitar a vida do usuário.

<input type="tel">

<input type="file"> O Upload

Permite que o usuário envie arquivos do próprio computador ou celular (como a foto de perfil da academia). O navegador cria o botão "Escolher arquivo" sozinho.

<input type="file">

Radio vs Checkbox

A eterna dúvida dos iniciantes:
• Radio (Círculo): Escolha ÚNICA (como sintonizar uma rádio, só uma estação por vez).
• Checkbox (Quadrado): Múltipla escolha (como uma lista de compras).

Radio (Plano):
Mensal Anual (Note que um desmarca o outro)

Checkbox (Dias):
Segunda Terça (Pode marcar os dois)
<!-- Radio: MESMO 'name' para agrupar --> <input type="radio" name="plano"> <input type="radio" name="plano"> <!-- Checkbox: Independente --> <input type="checkbox">

<select> A Lista Suspensa

Ótimo para economizar espaço. Em vez de mostrar 10 opções de "Radio", usamos um menu que se abre. Cada item dentro dele é um <option>.

<select> <option>Ficar Bitelo</option> <option>Emagrecer</option> </select>

<textarea> Texto Longo

Diferente do input text que é só uma linha, o textarea permite escrever parágrafos inteiros, como observações médicas ou mensagens.

<textarea rows="3"></textarea>

<fieldset> O Agrupador

Usado para agrupar visualmente e semanticamente perguntas relacionadas. A tag <legend> é o título que fica "flutuando" na borda.

Dados Pessoais
<fieldset> <legend>Dados Pessoais</legend> ...inputs aqui... </fieldset>