HTML: o formulário e a tabela de clientes

Hoje o teu CRM ganha um menu, um formulário para escrever os dados de um cliente e uma tabela para ver a lista de clientes.

🎯 No fim desta aula vais conseguir

Fazer um menu com ligações para partes da mesma página.
Construir um formulário com caixas de texto, uma lista de opções e uma caixa de notas.
Construir uma tabela com linhas, colunas e cabeçalho.
Explicar para que serve o atributo id (vai ser a ponte entre o HTML e o JavaScript).

🧰 Antes de começar

Abre a pasta meu-crm no VS Code (File → Open Folder…).
Abre o index.html com o Live Server (botão direito → Open with Live Server).
Confirma que vês o título do teu CRM com o nome da tua empresa (exercício E1 da aula 1).

😕 Faltaste à aula 1 ou perdeste a pasta? Descarrega o ponto de controlo da aula 1, descompacta-o para Documentos (botão direito → Extrair Tudo…) e trabalha a partir dele. Depois põe lá o nome da tua empresa.

Parte A — O menu (≈ 10 min)

1 O menu do topo

O menu fica dentro de uma etiqueta <nav> (de navigation, navegação). Cada opção do menu é uma ligação <a>, que já conheces da aula 1.

Repara no href="#clientes": o # quer dizer «vai para a parte desta página que tem o id="clientes"». É como o índice de um livro, que te manda para a página certa. Essa parte ainda não existe: vamos criá-la no passo 2.

Os comentários AULA 14, AULA 15 e AULA 16 marcam onde vão entrar as próximas opções do menu. Deixa-os ficar.

<nav class="menu">
  <a href="#clientes">Clientes</a>
  <!-- ===== AULA 14: COLAR AQUI O LINK DAS OPORTUNIDADES ===== -->
  <!-- ===== AULA 15: COLAR AQUI O LINK DO PAINEL ===== -->
  <!-- ===== AULA 16: COLAR AQUI O LINK DOS RELATÓRIOS ===== -->
</nav>

Grava (Ctrl+S) e olha para o browser.

✅ Deves ver: por baixo do slogan, uma ligação sublinhada a azul: Clientes. Ainda não tem cores nem aspeto de menu: isso é trabalho do CSS, na aula 3.

😕 Não aparece nada / aparece no sítio errado

O menu tem de ficar dentro do <header>, ou seja, antes da linha </header>. Procura o comentário AULA 2: COLAR AQUI O MENU e cola logo por baixo dele.
Confirma que gravaste o ficheiro (não pode haver um círculo branco no separador do VS Code).

Parte B — A secção de clientes (≈ 40 min)

2 Colar a secção de clientes

Agora vem o coração do CRM: a zona dos clientes. Pensa numa ficha de inscrição em papel (a de um ginásio, por exemplo) e numa folha de Excel com a lista de todos os inscritos. É exatamente isso que vamos fazer: um formulário e uma tabela.

⚠️ Atenção: este bloco é grande. Usa sempre o botão 📋 Copiar (não copies à mão nem selecionando com o rato, que é fácil deixar uma linha para trás). Cola-o dentro do <main>, por baixo do comentário AULA 2: COLAR AQUI A SECÇÃO DE CLIENTES e por cima do comentário AULA 13.

<section id="clientes" class="cartao">
  <h2>Clientes</h2>

  <form id="form-cliente" class="formulario">
    <!-- ===== AULA 9: COLAR AQUI O CAMPO ESCONDIDO ===== -->
    <label>Nome *
      <input type="text" id="nome">
    </label>
    <label>Empresa
      <input type="text" id="empresa">
    </label>
    <label>Email
      <input type="email" id="email">
    </label>
    <label>Telefone
      <input type="tel" id="telefone">
    </label>
    <label>NIF
      <input type="text" id="nif" maxlength="9">
    </label>
    <label>Estado
      <select id="estado">
        <option>Lead</option>
        <option>Cliente</option>
        <option>Inativo</option>
      </select>
    </label>
    <label class="largo">Notas
      <textarea id="notas" rows="2"></textarea>
    </label>
    <div class="botoes">
      <!-- ===== AULA 6: COLAR AQUI O BOTÃO GUARDAR ===== -->
    </div>
  </form>
  <p id="mensagem" class="mensagem"></p>

  <!-- ===== AULA 10: COLAR AQUI A BARRA DE PESQUISA ===== -->

  <div class="tabela-caixa">
    <table class="tabela">
      <thead>
        <tr>
          <th>Nome</th>
          <th>Empresa</th>
          <th>Email</th>
          <th>Telefone</th>
          <th>Estado</th>
          <!-- ===== AULA 9: COLAR AQUI O CABEÇALHO AÇÕES ===== -->
        </tr>
      </thead>
      <tbody id="corpo-tabela">
        <tr>
          <td>Ana Silva</td>
          <td>Padaria Silva</td>
          <td>ana@padariasilva.pt</td>
          <td>912345678</td>
          <td>Cliente</td>
        </tr>
        <tr>
          <td>Rui Costa</td>
          <td>Oficina Costa</td>
          <td>rui@oficinacosta.pt</td>
          <td>226789123</td>
          <td>Lead</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

💡 Depois de colar, se o código ficar desalinhado, carrega Shift+Alt+F: o VS Code arruma a indentação (os espaços no início das linhas) sozinho.

✅ Deves ver: o título Clientes, as palavras Nome, Empresa, Email, Telefone, NIF, Estado e Notas, cada uma com uma caixa ao lado, e uma tabela com dois clientes (Ana Silva e Rui Costa). Está tudo “colado” e sem cores: é normal, ainda não há CSS.

😕 Não funciona?

A secção aparece em cima, junto ao título → colaste dentro do <header> em vez de dentro do <main>. Corta (Ctrl+X) e cola no sítio certo.
Desapareceu metade da página → provavelmente estragaste um comentário: um  esconde tudo o que vem a seguir. Desfaz com Ctrl+Z e volta a colar.
A tabela aparece toda numa linha / sem cabeçalho → o bloco ficou incompleto. Apaga o que colaste (desde <section id="clientes" até </section>) e volta a copiar com o botão.

3 Perceber o formulário

Não precisas de decorar nada: lê com calma e vai olhando para o código que colaste. Cada etiqueta tem uma função, tal como cada parte de uma ficha em papel.

Etiqueta	O que é	Na ficha em papel seria…
`<section>`	Uma secção: uma zona da página com um tema. Esta é a dos clientes.	Um capítulo do dossiê.
`<form>`	O formulário: junta todos os campos que se preenchem.	A própria ficha.
`<label>`	O rótulo de um campo (o texto que diz o que se escreve). Se clicares no rótulo, o cursor salta para a caixa.	O texto impresso «Nome: ______».
`<input type="text">`	Uma caixa de texto de uma linha.	O espaço em branco para escrever.
`<input type="email">`	Caixa para um email. No telemóvel, aparece um teclado com `@`.	«Email: ______@______».
`<input type="tel">`	Caixa para um telefone. No telemóvel, aparece o teclado numérico.	«Telefone: _________».
`<select>` e `<option>`	Uma lista de escolha: o utilizador escolhe uma das opções.	«Assinale uma opção: ☐ Lead ☐ Cliente ☐ Inativo».
`<textarea>`	Uma caixa de texto grande, com várias linhas.	O espaço das «Observações».

Algumas palavras do mundo das vendas: um Lead é um potencial cliente (alguém que mostrou interesse mas ainda não comprou); um Cliente já comprou; um Inativo deixou de comprar. O NIF é o número de contribuinte (9 algarismos): por isso o campo tem maxlength="9", que não deixa escrever mais de 9 carateres.

O atributo `id`: o “nome próprio” de cada elemento

Repara que cada caixa tem um id: id="nome", id="email", id="estado"… O id é como o número de aluno: é único e serve para encontrar aquele elemento sem confusões. Na aula 6, o JavaScript vai usar estes id para ler o que o utilizador escreveu («dá-me o que está escrito na caixa com o id nome»).

⚠️ Regras do id: não pode haver dois elementos com o mesmo id; escreve-se em minúsculas, sem espaços e sem acentos. Não mudes os id deste bloco: o código das próximas aulas conta com eles exatamente assim.

Há mais duas coisas que vão ser usadas mais tarde:

Os atributos class="…" (cartao, formulario, largo…) são nomes que o CSS vai usar na aula 3 para dar cores e arrumar o formulário.
O <p id="mensagem">, por baixo do formulário, está vazio: é aí que o JavaScript vai escrever mensagens como «Cliente guardado com sucesso!».

💡 Ainda não há botão Guardar: repara no comentário AULA 6: COLAR AQUI O BOTÃO GUARDAR. Um botão só faz sentido quando houver JavaScript para fazer alguma coisa quando se carrega nele (aula 6). Os outros comentários (AULA 9, AULA 10) também ficam: não os apagues.

4 Perceber a tabela

Uma tabela HTML é como uma folha de Excel: tem linhas e, em cada linha, células. A primeira linha (o cabeçalho) tem os títulos das colunas. Este esquema resume a estrutura (é só para ler, não o copies):

Etiqueta	Significa	No Excel seria…
`<table>`	A tabela inteira.	A folha.
`<thead>`	O cabeçalho da tabela.	A linha 1, com os títulos a negrito.
`<tbody>`	O corpo: as linhas com os dados.	As linhas 2, 3, 4…
`<tr>`	Uma linha (table row).	Uma linha.
`<th>`	Uma célula de título (table header).	Uma célula da linha 1.
`<td>`	Uma célula de dados (table data).	Uma célula normal.

⚠️ Regra de ouro das tabelas: cada linha <tr> deve ter tantas células quantas as colunas do cabeçalho. Agora há 5 títulos (Nome, Empresa, Email, Telefone, Estado), por isso cada cliente tem 5 <td>, pela mesma ordem.

O <tbody> tem o id="corpo-tabela" porque, na aula 7, o JavaScript vai preencher esta tabela sozinho, a partir da lista de clientes. Por isso a Ana Silva e o Rui Costa são clientes de exemplo, só para vermos como fica.

5 Testar

Escreve um nome na caixa Nome e escolhe um Estado na lista.
Clica na palavra «Telefone» (não na caixa). Para onde vai o cursor?
Tenta escrever 12 algarismos no NIF.
Sobe ao topo e clica em Clientes, no menu. Olha para o fim do endereço na barra do browser.

✅ Deves ver: clicar no rótulo põe o cursor na caixa; o NIF não aceita mais de 9 carateres; depois de clicar no menu, o endereço termina em #clientes (se a janela for grande e a página couber toda no ecrã, a página não precisa de se mexer).

🤔 Pensa: preenche o formulário com um cliente inventado. Ele aparece na tabela? Porquê? (Pista: quem é que ia pôr o cliente na tabela? O HTML só mostra coisas; fazer coisas vai ser trabalho do JavaScript, a partir da aula 6.)

🔎 Investiga

No campo Email, troca type="email" por type="date" e grava. O que aparece no browser? Volta a pôr type="email".
Que atributo impede que escrevas mais de 9 carateres no NIF? Apaga-o, grava e experimenta. Depois volta a pô-lo.
Na linha da Ana Silva, apaga um </td> e grava. A tabela estragou-se? Porque achas que o browser não se queixa? Desfaz com Ctrl+Z.
No VS Code, clica em cima de um <tr>. O que fica realçado? Para que te pode servir isto?

✍️ Exercícios (fazem parte do teu projeto)

Estes exercícios não têm o código pronto: usa o que aprendeste hoje.

E1 · O campo Cidade

Acrescenta ao CRM a Cidade do cliente:

no formulário, um campo «Cidade» logo a seguir ao NIF, com o id cidade;
na tabela, uma coluna «Cidade» a seguir à coluna Telefone;
nas linhas de exemplo, a cidade de cada cliente (por exemplo, Porto para a Ana Silva e Gaia para o Rui Costa).

⚠️ Guarda bem este campo: vais precisar dele na ficha da aula 12. O id tem de ser exatamente cidade (minúsculas, sem acento).

💡 Dica: copia o campo do NIF inteiro (desde <label>NIF até ao seu </label>), cola-o por baixo e adapta o texto e o id (o maxlength não faz falta numa cidade). Na tabela, lembra-te da regra de ouro: se acrescentas um <th>, cada linha precisa de mais um <td> na mesma posição.

E2 · Um terceiro cliente

Acrescenta à tabela um terceiro cliente de exemplo, inventado por ti, com todas as colunas preenchidas (incluindo a Cidade) e um estado diferente dos outros dois.

💡 Dica: uma linha da tabela vai de <tr> até </tr>. Onde é que as linhas dos clientes estão: no <thead> ou no <tbody>? Conta as células: tem de haver tantas quantos os títulos.

⭐ Desafio · Exemplos dentro das caixas

Faz com que cada caixa de texto do formulário mostre um exemplo a cinzento enquanto está vazia (por exemplo, Ex.: Ana Silva no Nome), que desaparece quando se começa a escrever.

💡 Dica: existe um atributo chamado placeholder. Escreve-se dentro da etiqueta de abrir, tal como o maxlength. Funciona nos <input> e na <textarea>. E no <select>, faz falta?

📦 O que mostrar ao professor

O topo tem o menu com a ligação «Clientes».
Tenho o formulário com todos os campos e a tabela com os clientes de exemplo.
Os comentários AULA 6, AULA 9, AULA 10… continuam no index.html.
Sei explicar para que serve o atributo id.
E1: tenho o campo Cidade (id="cidade") e a coluna Cidade na tabela, com dados.
E2: a tabela tem um terceiro cliente e as colunas estão todas alinhadas.

⏱️ Se sobrar tempo

Faz o desafio ⭐.
No ola.html, faz uma pequena tabela com o horário da tua empresa (colunas: Dia, Abre, Fecha).
No ola.html, experimenta outros tipos de caixa: <input type="date">, <input type="color">, <input type="number">, <input type="checkbox">. O que faz cada um?

🤖 Pedir ajuda à IA (opcional)

Se a tua tabela ficar desalinhada e não perceberes porquê, podes pedir a uma IA que te explique o problema, sem te dar a solução. Copia este pedido, troca o texto entre [ ] e cola-o na IA:

📖 Palavras novas

Menu (<nav>): Zona da página com as ligações de navegação.
Âncora (href="#…"): Ligação para uma parte da mesma página, identificada pelo seu id.
Secção (<section>): Zona da página dedicada a um tema.
Formulário (<form>): Conjunto de campos que o utilizador preenche.
Campo: Cada caixa onde se escreve ou escolhe um dado (nome, email…).
Rótulo (<label>): Texto que diz o que se escreve num campo.
Lista de escolha (<select>): Campo onde se escolhe uma das opções (<option>).
Tabela, linha e célula: <table>, <tr> e <td> (ou <th> no cabeçalho).
id: Atributo que dá um nome único a um elemento, para o CSS e o JavaScript o encontrarem.
Lead: Potencial cliente: mostrou interesse, mas ainda não comprou.