Seguindo o projeto de formação como Dev Fullstack Junior, trago novos elementos essenciais para construção de página na Web, sendo eles o Formulário para captura de dados e a Tabela que permite a estruturação de dados de forma que possamos construir documentações mais completas e mais técnicas.
Formulário:
Vamos supor que você queira anunciar o curso, ao qual pretende ensinar os outros a programar, como você vai conseguir os dados para fornecer instruções específicas a somente quem vai querer participar? Ai está, o formulário ajuda nessas situações, pois, através dele você pode solicitar dados para que os alunos preencham como o nome, o interesse que tem no curso ou e-mail/número como forma de contato.
Além dos campos de texto e e-mail, o formulário abaixo usa um <select> (lista suspensa) para a pergunta de indicação e um <textarea> (campo de texto multilinha) para o comentário livre.
<form action="" method="POST">
<fieldset>
<legend>Formulário para participar do curso!</legend>
<label for="nome">Nome: </label><input type="text" id="nome" name="nome" placeholder="João" required><br>
<label for="email">Email: </label><input type="email" id="email" name="email"
placeholder="[email protected]" required><br>
<label for="telefone">Telefone: </label><input type="tel" id="telefone" name="telefone"
placeholder="(ddd) nnnnn-nnnn" required>
<!--Mini fieldset para agrupamento do tipo Radio, ao qual pode ser identificado por IDs, mas, o name deve seguir o mesmo padrão para todos-->
<fieldset id="recomendacao">
<legend>Qual é a probabilidade de você nos recomendar?</legend><br>
<input type="radio" id="recomendacao_baixa" name="recomendacao"
value="recomendacao_baixa"><label for="recomendacao_baixa">Baixa</label>
<input type="radio" id="recomendacao_media" name="recomendacao"
value="recomendacao_media"><label for="recomendacao_media">Média</label>
<input type="radio" id="recomendacao_alta" name="recomendacao" value="recomendacao_alta"><label
for="recomendacao_alta">Alta</label>
</fieldset>
<label for="indicacao">Você veio por qual meio?</label><br>
<select id="indicacao" name="indicacao">
<optgroup label="Redes Sociais">
<option value="Instagram">Instagram</option>
<option value="Facebook">Facebook</option>
<option value="Dev">Dev.to</option>
</optgroup>
<optgroup label="Divulgação">
<option value="Youtube">Youtube</option>
<option value="Linkedin">Linkedin</option>
<option value="Anuncio">Anúncio</option>
</optgroup>
</select>
<br>
<textarea id="comentario" name="comentario" rows="5" cols="40"
placeholder="Deixe seu comentário:" maxlength="500"></textarea>
<br>
<button type="submit">Enviar</button>
</fieldset>
</form>
O que cada parte está fazendo:
required em nome, e-mail e telefone ativa a validação nativa do navegador — o formulário simplesmente não deixa enviar se esses campos estiverem vazios, acaba tornando o preenchimento obrigatório.
maxlength="500" no
<textarea>limita o comentário a 500 caracteres, evitando que o usuário escreva um texto maior do que o backend está preparado pra receber.O
<fieldset id="recomendacao">está aninhado dentro do fieldset principal — isso agrupa visualmente e semanticamente só os radio buttons daquela pergunta específica, sem misturar com o restante dos campos do formulário. Assim, é interpretado de forma automática que aquele conjunto de radio buttons pertencem ao mesmo grupo de perguntas.
Um detalhe importante é que para casos onde você queira somente escolher uma das opções entre os radio buttons, se torna necessário que o atributo name seja igual entre eles para permitir uma seleção única.
Também, no exemplo acima que formulei trago diversas opções que podem ser utilizadas para criação de um formulário completo, ao qual além dos exemplos de uso que havia citado anteriormente, agora temos opções de múltipla seleção e botões.
Tabela:
Agora temos outro elemento com extrema utilidade para criar conteúdo com informações técnicas mais estruturadas: as tabelas permitem organizar explicações complexas de um jeito mais fácil de entender.
A tabela abaixo é dividida em <thead> (cabeçalho), <tbody> (dados) e usa <tr> para cada linha, com <th> nas células de título e <td> nas células de dado comum.
<table>
<caption>Aqui temos sugestões para encaixar os treinos em seu tempo:</caption>
<thead>
<tr>
<!--O atributo scope permite que faça uma melhor conexão de cabeçalhos com conteúdo-->
<th scope="col">Tempo Disponível</th>
<th scope="col">O Que Fazer (Estratégia)</th>
<th scope="col">Foco Principal</th>
<th scope="col">Mentalidade de Sucesso</th>
</tr>
</thead>
<tbody>
<tr>
<td>15 a 20 minutos</td>
<td>
<ul>
<li>Treinos HIIT (Alta Intensidade)</li>
<li>Circuitos funcionais sem equipamento</li>
<li>Caminhada ou corrida acelerada</li>
</ul>
</td>
<td>Intensidade e Eficiência<br><br>Manter os batimentos altos e acelerar o metabolismo.
</td>
<td>"Pouco tempo é melhor que nenhum. 15 minutos já quebram o sedentarismo."</td>
</tr>
<tr>
<td>30 a 45 minutos</td>
<td>
<ul>
<li>Musculação focada (compostos)</li>
<li>Treinos de força e resistência</li>
<li>Corrida de ritmo moderado</li>
</ul>
</td>
<td>Qualidade e Constância<br><br>O "ponto doce" para a maioria das rotinas modernas.</td>
<td>"Eficiência máxima. Menos conversa no celular e mais foco no movimento."</td>
</tr>
<tr>
<td>60 minutos ou mais</td>
<td>
<ul>
<li>Treino completo de força + Cardio</li>
<li>Prática de esportes (futebol, tênis, natação)</li>
<li>Aulas coletivas (Crossfit, Dança, Yoga)</li>
</ul>
</td>
<td>Volume e Variedade<br><br>Ideal para quem tem a rotina mais flexível.</td>
<td>"Aproveite o processo sem pressa, mas cuide para não procrastinar entre as séries."</td>
</tr>
</tbody>
</table>
O que cada parte está fazendo:
<caption>dá um título descritivo à tabela — é o primeiro conteúdo lido por leitores de tela ao entrar nela, então ajuda quem não está enxergando a tabela a entender do que se trata antes mesmo de chegar nos dados, funciona como a legenda da tabela.scope="col" em cada
<th>conecta explicitamente aquele título à coluna inteira abaixo dele.
O que fica desse post:
Formulário e tabela parecem assuntos separados, mas têm o mesmo propósito no fundo: dar estrutura e significado aos dados — seja recebendo informação do usuário (formulário) ou exibindo informação organizada (tabela). A diferença entre "colocar campos/células na tela" e construir algo que realmente funciona pra quem usa está justamente nesses detalhes que só aparecem quando você testa de verdade: o name compartilhado que faz radio buttons funcionarem como grupo, a ordem certa das tags de tabela, o scope que conecta título a dado. Acaba que a semântica que é um detalhe entre elementos, se torna um fator determinante para um boa experiência de diversos usuários.
⚠️ Post de aprendizado: compartilho aqui o que estou estudando, não é documentação oficial. Feedbacks são super bem-vindos!
Se você também está começando agora, deixa aqui nos comentários: qual desses pontos você já domina e qual ainda gera mais dúvida? Também, se quiser deixar algum ponto da explicação que ficou faltando ou pode ser melhor, fique a vontade para comentar!
Esse post faz parte da minha jornada documentada rumo a Dev Fullstack Júnior. Me acompanha aqui no Dev.to pras próximas etapas!
SOCIAL SHARE CARD GENERATOR