WDD 231: Desenvolvimento Frontend para Web I

S04 - Atividades de Aprendizagem: Formulários Avançados em HTML

Visão Geral

Esta atividade de aprendizagem se concentra em capturar e exibir dados de formulário HTML em uma página de confirmação usando parâmetros de consulta de URL. URLSearchParams é um objeto integrado JavaScript que fornece métodos utilitários para acessar, manipular e percorrer facilmente os parâmetros na sequência de consulta de URL.

Como usuário, você provavelmente já utilizou parâmetros de consulta de URL diversas vezes sem saber. Por exemplo, quando você usa o google.com para pesquisar algo, você insere o termo de pesquisa (como "Ajuda com Javascript") no campo de texto de entrada do formulário e seleciona Pesquisa Google. O URL resultante na próxima página será semelhante a este: https://www.google.com/search?q=Ajuda+com+Javascript. O q é o nome do parâmetro e Ajuda+com+Javascript é o valor do parâmetro.

Preparação

Em atividades anteriores, você aprendeu sobre a finalidade dos formulários HTML e quando usar os diferentes elementos do formulário, como vários tipos de entrada (texto, senha, caixa de seleção, data, etc.) para coletar informações e interagir com o usuário.

Abaixo estão os principais conceitos sobre formulários HTML:

Nesta atividade de aprendizagem, você verá como usar JavaScript para capturar as informações preenchidas no formulário e exibi-las em uma página de confirmação, usando o objeto URLSearchParams para analisar o URL e extrair os parâmetros da string de consulta.

Os conceitos principais são:

URLSearchParams

A interface URLSearchParams contém métodos utilitários para trabalhar com a string de consulta de um URL. Ela permite que você acesse, manipule e percorra facilmente pelos parâmetros na string de consulta.

Por exemplo, se você tiver um URL como este: https://exemplo.com/?nome=John&idade=30

Você pode usar URLSearchParams para extrair os parâmetros:

const params = new URLSearchParams(window.location.search);
const nome = params.get('nome'); // "John"
const idade = params.get('idade'); // "30"

Neste exemplo, window.location.search retorna a parte da string de consulta do URL (por exemplo, ?nome=John&idade=30). O construtor URLSearchParams recebe essa string e cria um objeto que permite acessar os parâmetros individuais usando o método .get().

Além disso, é possível usar métodos como .has(), .set() e .delete() para verificar a existência de parâmetros, atualizar seus valores ou removê-los da string de consulta.

Por exemplo, você pode verificar se um parâmetro existe:

if (params.has('nome')) {
  console.log('O parâmetro nome existe!');
}

Você também pode atualizar o valor de um parâmetro:

params.set('idade', 31); // Atualize a idade para 31

E, ainda, remover um parâmetro:

params.delete('nome'); // Remova o parâmetro de nome

Por fim, você pode converter o objeto URLSearchParams de volta em uma string de consulta usando o método .toString():

const queryString = params.toString(); // "idade=31"

Isso permite que você manipule facilmente a string de consulta e atualize o URL sem precisar construí-lo manualmente.

Instruções da Atividade

Nesta atividade, você trabalhará com um formulário que possui vários elementos de formulário diferentes. Depois, você criará uma página para exibir as informações do formulário preenchidas pelo usuário. Você usará o objeto URLSearchParams para analisar o URL e extrair os parâmetros da string de consulta e exibi-los na página de confirmação.

Estas atividades foram criadas para que você possa acompanhar e aprender. Pause as instruções do vídeo conforme necessário e desenvolve sua própria versão de código.

Baixe os Arquivos Iniciais

Baixe o arquivo zip com os arquivos iniciais e o descompacte em uma pasta do seu computador.

Visão Geral dos Métodos de Formulário

Assista ao vídeo: Dados de Formulário Parte 1.

Capturando Dados de Formulário

Assista ao vídeo: Dados de Formulário Parte 2

Teste e Compartilhe

Teste suas atualizações e compartilhe seu trabalho com seus colegas no Microsoft Teams.

Recursos Opcionais