HTML em Dados: Formulários e Tabelas para Construção de Conteúdo

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 (lista suspensa) para a pergunta de indicação e um (campo de texto multilinha) para o comentário livre. Formulário para participar do curso! Nome: Email: Telefone: Qual é a probabilidade de você nos recomendar? Baixa Média Alta Você veio por qual meio? Instagram Facebook Dev.to Youtube Linkedin Anúncio Enviar Enter fullscreen mode Exit fullscreen mode 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 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 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 (cabeçalho), (dados) e usa para cada linha, com nas células de título e nas células de dado comum. Aqui temos sugestões para encaixar os treinos em seu tempo: Tempo Disponível O Que Fazer (Estratégia) Foco Principal Mentalidade de Sucesso 15 a 20 minutos Treinos HIIT (Alta Intensidade) Circuitos funcionais sem equipamento Caminhada ou corrida acelerada Intensidade e EficiênciaManter os batimentos altos e acelerar o metabolismo. "Pouco tempo é melhor que nenhum. 15 minutos já quebram o sedentarismo." 30 a 45 minutos Musculação focada (compostos) Treinos de força e resistência Corrida de ritmo moderado Qualidade e ConstânciaO "ponto doce" para a maioria das rotinas modernas. "Eficiência máxima. Menos conversa no celular e mais foco no movimento." 60 minutos ou mais Treino completo de força + Cardio Prática de esportes (futebol, tênis, natação) Aulas coletivas (Crossfit, Dança, Yoga) Volume e VariedadeIdeal para quem tem a rotina mais flexível. "Aproveite o processo sem pressa, mas cuide para não procrastinar entre as séries." Enter fullscreen mode Exit fullscreen mode O que cada parte está fazendo: 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 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!