Neste tutorial, aprenderá a utilizar o JavaScript para ler e processar os dados introduzidos pelos utilizadores a partir de formulários. Os elementos de formulário são uma parte essencial de qualquer site, pois permitem que os utilizadores introduzam informações. Muitas vezes, pensa-se que é necessário usar estruturas complicadas para isso. Neste artigo, vamos mostrar-lhe como pode processar com êxito os dados do formulário utilizando JavaScript simples.
Principais conclusões
- Aprenderá a criar formulários, a aceder aos dados do formulário com JavaScript e a impedir o comportamento predefinido dos formulários utilizando preventDefault, para que possa ter controlo sobre a introdução de dados dos seus utilizadores.
Guia passo-a-passo
Comece por criar um formulário HTML simples no seu documento. Certifique-se de que insere corretamente os vários campos de entrada e um botão de submissão.
Quando o formulário estiver visível no browser, pode testá-lo. Introduza um nome no campo de entrada e prima a tecla Enter ou o botão Submeter. Se tudo funcionar corretamente, deve ver um alerta com o nome que introduziu.
Para tal, adicionamos uma etiqueta de script ao seu ficheiro HTML. Neste script, define-se uma função global chamada submitForm que aceita um objeto de evento como parâmetro.
No script, pode definir o manipulador de eventos onsubmit para o seu formulário. Isto significa que a função submitForm é chamada quando o formulário é submetido. Note-se que o objeto de evento está sempre disponível quando se está num manipulador de eventos.
Um dos passos importantes é impedir a ação predefinida do formulário, chamando event.preventDefault(). Isto é importante porque não queremos que o formulário recarregue a página depois de os dados terem sido submetidos.
Agora podemos começar a ler os dados do formulário. Os dados do formulário estão disponíveis em event.target. Isso facilita o acesso às informações inseridas.
Para obter os dados do formulário, crie um novo objeto com o construtor FormData e passe o elemento do formulário como parâmetro. Depois de o objeto ter sido criado, pode aceder aos valores de entrada utilizando o método get.
Com formData.get('firstName'), por exemplo, recebe o valor do campo de entrada que tem o nome 'firstName'. Pode então utilizar este valor para criar uma mensagem que é apresentada ao utilizador.
Se pretender adicionar outro campo de entrada ao formulário, proceda da seguinte forma: Adicione um campo de texto adicional para o último nome com o nome "lastName". Em seguida, pode efetuar passos semelhantes para obter o seu valor.
Pode então utilizar ambos os valores para gerar uma mensagem personalizada. Por exemplo: "Olá [primeiro nome] [último nome]!"
Para deixar de apresentar a mensagem através de um alerta e integrá-la diretamente no HTML, pode adicionar uma nova secção no DOM que apresenta a mensagem como texto. Para o fazer, crie uma div com um ID único e defina o seu innerText para a mensagem resultante.
Pode agora experimentar as diferentes variações, enviando os dados para a consola ou utilizando-os para outras acções JavaScript, como um pedido POST através de fetch.
Esta é a maneira mais básica de ler e usar dados de formulário com JavaScript. Há muitas outras maneiras de melhorar isso, como inserir validações ou processar mais os dados no servidor.
Resumo
Neste tutorial, você aprendeu a ler dados de formulário com funções JavaScript simples. Explorou a importância de event.preventDefault e viu como inserir dados em alertas, bem como diretamente no documento. Com essa base, você está bem equipado para projetar formulários mais complexos e seu tratamento de dados.
Perguntas mais frequentes
Como posso aceder aos dados do formulário?Pode aceder aos dados do formulário criando um novo objeto FormData com new FormData(event.target).
O que acontece se eu não chamar event.preventDefault()?Sem event.preventDefault(), é executado o comportamento predefinido do browser, o que pode provocar o recarregamento da página.
Posso ter vários formulários numa página?Sim, pode ter vários formulários numa página e cada formulário pode ter a sua própria função onsubmit.
Como posso utilizar os dados do formulário para um pedido de pesquisa?Pode converter os dados do formulário num formato JSON e depois enviá-los para o servidor utilizando a API de pesquisa.
São necessárias estruturas JavaScript para o processamento de formulários?Não, não é necessário utilizar estruturas. Pode executar o processamento de formulários inteiramente com JavaScript puro.
