Tabelas e formularios

Trabalhe numa cópia da pasta inicio/ desta etapa. Ela já abre ou executa com as instruções do README. Leia o código, mude uma coisa e anote sua previsão antes de recarregar. Compare com a referência na pasta da etapa. Se nada mudar, confira a extensão do arquivo, o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo são experiências separadas; a pasta de referência contém o programa completo desta etapa.

O acervo da Biblioteca da Ribeira ganha uma tabela de empréstimos fictícios e um formulário de recado. Maré Alta, de Iara Campos, e Caderno do Cais, de Lina Bezerra, são só exemplos. Nada é vendido.

O exemplo deste capítulo é 07-tabelas-e-formularios, no pacote que acompanha o volume. Veja acervo.html e contato.html. Mude um número da tabela ou o texto de um label, preveja, recarregue e confira.

Os HTML estão no disco. O navegador desenha tabela e campos. Em 127.0.0.1 a confirmação permanece na página. Publicar o formulário sem servidor de verdade não guarda recado de ninguém — e não é o pedido deste capítulo.

O que você vai aprender

• Montar table com caption, thead, tbody, th e td.
• Usar scope="col" e scope="row".
• Ligar label ao campo pelo for e pelo id.
• Conferir validação nativa e confirmação local sem envio.
• Depurar HTML olhando aninhamento e atributos.

Tabela é dado em grade

Use tabela para cruzar linhas e colunas, não para desenhar o layout do site. O menu da Ribeira continua em Flexbox nos capítulos de CSS; a tabela fica no acervo.

caption diz o que a grade contém. th é cabeçalho. td é dado.

Acessório que não é enfeite: scope

scope="col" no th da linha de títulos avisa: esta célula nomeia a coluna. scope="row" no th da primeira célula da linha nomeia a linha.

Quem ouve a tabela precisa desses eixos. Visualmente a grade já “parece” certa; o atributo completa o significado.

<table>
  <caption>Três títulos mais pedidos</caption>
  <thead>
    <tr>
      <th scope="col">Título</th>
      <th scope="col">Autoria</th>
      <th scope="col">Vezes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Maré Alta</th>
      <td>Iara Campos</td>
      <td>12</td>
    </tr>
    <tr>
      <th scope="row">Caderno do Cais</th>
      <td>Lina Bezerra</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

Formulário demonstrativo

form agrupa campos. A referência usa um apoio pronto no atributo onsubmit: ele cancela o envio e escreve uma confirmação. required valida primeiro. Não há banco. action indicaria um destino caso houvesse envio; aqui não precisamos dele.

Todo campo visível tem label. O atributo for copia o id do controle.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Contato — Biblioteca da Ribeira</title>
  </head>
  <body>
    <h1>Contato</h1>
    <form onsubmit="event.preventDefault()">
      <p>
        <label for="nome">Nome</label><br>
        <input id="nome" name="nome" required>
      </p>
      <p>
        <label for="recado">Recado</label><br>
        <textarea id="recado" name="recado" rows="4"></textarea>
      </p>
      <button type="submit">Enviar neste computador</button>
    </form>
    <p>O apoio pronto cancela o envio e mostra uma confirmação local. A validação e a confirmação ocorrem na própria página. Nada é enviado.</p>
  </body>
</html>

A pasta do exemplo inclui cabeçalho, CSS e obrigado.html. Use essa referência completa.

Depurar HTML

Olhe o código, não só a janela. Tags cruzadas (<p><strong>texto</p></strong>) enganam o olho. Ferramentas do navegador mostram a árvore que ele montou.

Erro comum: label sem for, ou for="nome" com id="Nome". O clique no texto não foca o campo. Corrija uma coisa, recarregue, confira com o teclado.

Disco, 127.0.0.1 e publicação

No disco, a validação e a confirmação também funcionam. Em http://127.0.0.1:8765/exemplos/07-tabelas-e-formularios/contato.html o apoio pronto mantém a confirmação local. Publicar não transforma o obrigado.html em cadastro. Sem um programa de servidor, o recado não é guardado.

O que não entra nesta tabela

Não coloque layout inteiro dentro de table. Não peça CPF. Não ligue o action a um site desconhecido.

Atividades

1. Por que caption é melhor do que um h2 solto que não pertence à tabela?
2. O que scope="row" informa no título Maré Alta?
3. Se o action apontar para um site público, o recado ainda é “só estudo local”?

Respostas comentadas

1. caption está amarrado à table. Tecnologias assistivas anunciam o resumo junto da grade. Um h2 vizinho pode até parecer título, mas não faz parte da tabela.
2. Informa que aquela célula é o cabeçalho da linha, não um número de empréstimo.
3. Não. O navegador tentaria enviar o get para outro computador. Nesta referência o envio é cancelado na própria página.