Desafio Final: Tabelas e Formulários

De tags isoladas para sistema integrado

Saber criar uma tabela é útil. Saber criar um formulário é essencial. Mas integrar os dois em uma interface única é o que separa o estudante de HTML do desenvolvedor que entende fluxo de dados.

Como organizar o painel administrativo

O projeto precisa de contexto, divisão funcional e navegação interna. Use header para apresentar o sistema, main para o conteúdo central, section para separar cadastro, relatório e resumo, e footer para fechar.

<header>
  <h1>Painel Administrativo HTML com Tabela e Formulário</h1>
  <nav>
    <a href="#cadastro">Cadastro</a>
    <a href="#relatorio">Relatório</a>
    <a href="#resumo">Resumo</a>
  </nav>
</header>

<main>
  <section id="cadastro"></section>
  <section id="relatorio"></section>
  <section id="resumo"></section>
</main>

Como montar o formulário do sistema

O formulário é a porta por onde novos dados entram. Cada campo precisa de label, id e name. O id conecta a interface; o name identifica o dado enviado.

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

  <label for="email">E-mail</label>
  <input type="email" id="email" name="email" required>

  <label for="categoria">Categoria</label>
  <select id="categoria" name="categoria" required>
    <option value="">Selecione</option>
    <option value="aluno">Aluno</option>
    <option value="mentor">Mentor</option>
  </select>

  <button type="submit">Cadastrar Novo Registro</button>
</form>

• text: nome ou título do registro.
• email: contato validado pelo navegador.
• number: quantidade, idade, nota ou valor.
• textarea: observações longas.
• select: categoria ou status padronizado.
• radio: prioridade única.
• checkbox: confirmação ou aceite.

Como montar a tabela de relatório

A tabela exibe os dados existentes. Ela precisa de caption, thead, tbody, tfoot, th scope="col" e, quando fizer sentido, th scope="row".

<table>
  <caption>Registros cadastrados no painel administrativo</caption>
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Nome</th>
      <th scope="col">E-mail</th>
      <th scope="col">Categoria</th>
      <th scope="col">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">001</th>
      <td>Ana Silva</td>
      <td>ana@email.com</td>
      <td>Aluno</td>
      <td>Ativo</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="4">Total de registros</th>
      <td>1</td>
    </tr>
  </tfoot>
</table>

Boas práticas para telas administrativas

• Use section para separar cadastro, relatório e resumo.
• Use nav interno para facilitar navegação no painel.
• Explique o objetivo de cada bloco com parágrafos claros.
• Conecte toda label ao respectivo campo.
• Garanta name em todos os campos enviados.
• Use caption para contextualizar tabelas.
• Use th e scope para acessibilidade tabular.
• Use botões com textos específicos.
• Não use tabela como ferramenta de layout.
• Evite excesso de div quando existe tag semântica melhor.
• Inclua link para voltar ao topo.
• Mantenha coerência entre campos coletados e colunas exibidas.

15 perguntas para provar domínio

1. Para que serve th scope="row"? Identificar o cabeçalho de uma linha específica.
2. O que acontece se action="#"? O formulário simula o envio para a própria página.
3. Qual função do tfoot? Agrupar resumo ou total da tabela.
4. Como agrupar radios? Usando o mesmo atributo name.
5. O que o caption faz? Fornece título acessível para a tabela.
6. readonly envia o dado? Sim.
7. Qual atributo mescla colunas? colspan.
8. Qual atributo mescla linhas? rowspan.
9. Placeholder substitui label? Não.
10. Para que serve method="post"? Enviar dados no corpo da requisição.
11. O que o thead organiza? O cabeçalho da tabela.
12. O que é o atributo for no label? O elo com o id do campo.
13. Diferença entre th e td? th é cabeçalho; td é dado comum.
14. O que o textarea permite? Inserção de múltiplas linhas de texto.
15. Por que usar required? Para exigir preenchimento antes do envio.

Registre seu painel administrativo

git status
git add .
git commit -m "aula-27: cria painel administrativo com tabela e formulario"
git push

• git status: valida os arquivos alterados.
• git add .: prepara o painel para versionamento.
• git commit: documenta a entrega final da unidade.
• git push: publica a evidência no GitHub.