Aula 04 de 10

Formulários

Criar campos de texto, e-mail, senha, seleção, checkboxes e botões — a base de toda interação na web.

// entendendo

Como funciona

Um formulário começa com <form> e termina com </form>. Dentro, você usa <input> para campos de entrada — o atributo type define o tipo.

type="text" — campo de texto livre
type="email" — valida o formato de e-mail
type="password" — esconde o que é digitado
type="checkbox" — caixa de marcar (múltipla escolha)
type="radio" — escolha única entre opções

O <label> descreve o campo e, quando clicado, foca o input associado. O atributo required torna o campo obrigatório.

<form>
  <label for="nome">Nome:</label>
  <input type="text" id="nome" required>

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

// mão na massa

Agora é com você

Campo de texto e botão

Crie um formulário com um campo de texto (nome do usuário) e um botão "Entrar".

a4e1.html

Preciso de uma dica

<form><label>Nome: </label><input type="text"> <button>Entrar</button></form>

Observação: O <label> deve sempre acompanhar o <input>. Sem ele, o usuário não sabe o que deve preencher — e leitores de tela também não.

Formulário de login

Crie um formulário com campos de e-mail e senha, ambos obrigatórios, e um botão "Acessar".

a4e2.html

Preciso de uma dica

Use type="email" e type="password". Adicione required em cada <input>.

Observação: Tente clicar em "Acessar" com o campo de e-mail vazio — o navegador já mostra uma mensagem de erro automaticamente por causa do required.

Checkbox e radio

Crie um formulário com: uma pergunta de múltipla escolha (disciplinas preferidas — checkbox) e uma pergunta de escolha única (período — radio: manhã, tarde ou noite).

a4e3.html

Preciso de uma dica

Checkboxes: <input type="checkbox"> Matemática. Radios: <input type="radio" name="periodo"> Manhã — todos os radios do mesmo grupo precisam ter o mesmo name.

Observação: O name no radio é o que agrupa as opções — sem ele, o usuário poderia marcar mais de uma ao mesmo tempo.

// desafio

formulário de contato completo

Monte um formulário de contato com: nome (text, required), e-mail (email, required), assunto (select com 3 opções), mensagem (textarea) e um botão "Enviar mensagem".

a4d1.html DESAFIO

Observação: O <select> funciona assim: <select><option>Opção 1</option><option>Opção 2</option></select>.

Aula 03 Aula 05