Formulários JavaScript no DOM
Formulários são componentes fundamentais de aplicações web. Aprenda a acessar elementos de formulário, ler valores, usar FormData e validar dados do usuário.
Formulários são componentes fundamentais de aplicações web, permitindo a interação do usuário e a coleta de dados. Este guia cobre as habilidades práticas de DOM que você precisa para trabalhar com eles: acessar elementos de formulário e de entrada, ler e escrever valores de campos, coletar todos os dados de uma vez com FormData, reagir a eventos de formulário e validar a entrada do usuário antes do envio.
Se você é novo no DOM, comece com Selecionando Elementos DOM e Introdução aos Eventos do Navegador, e depois volte aqui.
Acessando Elementos de Formulário
Selecionando Elementos de Formulário
Você pode acessar elementos de formulário com os mesmos métodos DOM que usa para qualquer nó: getElementById, getElementsByName, getElementsByTagName e querySelector / querySelectorAll. Na maioria dos casos, prefira getElementById (mais rápido, quando você controla a marcação) ou querySelector (mais flexível, suporta qualquer seletor CSS).
<!DOCTYPE html>
<html>
<head>
<title>Selecting Form Elements</title>
</head>
<body>
<h4>Fill the form inputs, and press 'Show Input Values' button.</h4>
<form id="userForm">
<input type="text" id="username" name="username" placeholder="Username" />
<input type="email" id="email" name="email" placeholder="Email" />
</form>
<button id="showInputs">Show Input Values</button>
<script>
// Select elements by ID
const username = document.getElementById('username');
const email = document.getElementById('email');
const showInputsButton = document.getElementById('showInputs');
// Using querySelector for selection
const emailByQuery = document.querySelector('#email');
showInputsButton.addEventListener('click', () => {
alert(`Username: ${username.value}, Email: ${emailByQuery.value}`);
});
</script>
</body>
</html>Este exemplo demonstra a seleção de elementos de formulário usando vários métodos e a exibição dos seus valores em um alerta quando o botão "Show Input Values" é clicado.
Usando a Coleção document.forms
Cada formulário em uma página também está disponível por meio da coleção integrada document.forms, e cada campo nomeado dentro de um formulário é acessível como uma propriedade desse formulário. Essa costuma ser a maneira mais concisa de ler valores sem precisar chamar getElementById para cada campo.
// <form name="userForm">
// <input name="username">
// <input name="email">
// </form>
const form = document.forms.userForm; // or document.forms[0]
console.log(form.username.value); // value of the username field
console.log(form.elements['email'].value); // same via the elements collectionA coleção form.elements contém todos os controles (inputs, selects, textareas, botões) pertencentes ao formulário, indexados tanto por posição quanto por name. Veja Propriedades e Métodos de Formulário para a lista completa.
Obtendo e Definindo Valores de Input
Acessando e Modificando Valores de Input
Os valores de input podem ser acessados e modificados usando a propriedade value.
<!DOCTYPE html>
<html>
<head>
<title>Getting and Setting Input Values</title>
</head>
<body>
<form id="userForm">
<input type="text" id="username" name="username" placeholder="Username" />
<input type="email" id="email" name="email" placeholder="Email" />
<button type="button" id="showValues">Show Values</button>
<button type="button" id="setValues">Set New Values</button>
</form>
<script>
const username = document.getElementById('username');
const email = document.getElementById('email');
const showValuesButton = document.getElementById('showValues');
const setValuesButton = document.getElementById('setValues');
showValuesButton.addEventListener('click', () => {
alert(`Username: ${username.value}\nEmail: ${email.value}`);
});
setValuesButton.addEventListener('click', () => {
username.value = 'newUsername';
email.value = '[email protected]';
alert('Values have been set to new values.');
});
</script>
</body>
</html>Este exemplo mostra como obter e definir os valores dos campos de input. Clicar em "Show Values" exibe os valores atuais dos inputs, e "Set New Values" os altera e exibe um alerta de confirmação.
Eventos de Formulário
Tratando o Envio de Formulário com os Eventos Submit e Reset
Os formulários podem disparar eventos como submit e reset, que podem ser tratados para realizar ações como validação ou processamento de dados.
<!DOCTYPE html>
<html>
<head>
<title>Form Events</title>
</head>
<body>
<form id="userForm">
<input type="text" id="username" name="username" placeholder="Username" />
<input type="email" id="email" name="email" placeholder="Email" />
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
<script>
const form = document.getElementById('userForm');
form.addEventListener('submit', (event) => {
event.preventDefault();
alert('Form submitted!');
// Perform form validation or data processing here
});
form.addEventListener('reset', () => {
alert('Form reset!');
});
</script>
</body>
</html>Este exemplo mostra como tratar os eventos submit e reset de um formulário para realizar ações como impedir o comportamento padrão, validação e processamento de dados.
Tratando Interações do Usuário em Tempo Real
Além de submit e reset, os formulários frequentemente usam os eventos input, change, focus e blur para reagir às interações do usuário em tempo real. O evento input é disparado imediatamente conforme o usuário digita, enquanto change é disparado quando o elemento perde o foco após o seu valor ter sido alterado. Para um aprofundamento, veja Eventos: change, input, cut, copy, paste.
<script>
const inputField = document.getElementById('username');
inputField.addEventListener('input', (e) => {
console.log('User is typing:', e.target.value);
});
inputField.addEventListener('change', (e) => {
console.log('Value changed:', e.target.value);
});
</script>Coletando Todos os Dados do Formulário com FormData
Ler cada campo manualmente é adequado para dois inputs, mas para formulários maiores o object FormData permite reunir todos os controles nomeados de uma vez. É também a forma padrão de empacotar dados para requisições fetch.
const form = document.getElementById('userForm');
form.addEventListener('submit', (event) => {
event.preventDefault();
const formData = new FormData(form);
// Read a single field
console.log(formData.get('username'));
// Iterate over every name/value pair
for (const [name, value] of formData.entries()) {
console.log(`${name}: ${value}`);
}
// Convert to a plain object (handy for JSON APIs)
const data = Object.fromEntries(formData.entries());
console.log(data); // { username: '...', email: '...' }
// Send it to a server
// fetch('/api/users', { method: 'POST', body: formData });
});Apenas os controles que possuem um atributo name são incluídos, o que reflete como um navegador envia um formulário nativamente.
Validação e Prevenção do Comportamento Padrão
Validando Dados do Formulário
A validação do lado do cliente pode ser realizada para garantir a correção dos dados antes do envio do formulário.
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
</head>
<body>
<form id="userForm">
<input type="text" id="username" name="username" placeholder="Username" required />
<input type="email" id="email" name="email" placeholder="Email" required />
<button type="submit">Submit</button>
</form>
<script>
const form = document.getElementById('userForm');
form.addEventListener('submit', (event) => {
event.preventDefault();
const username = document.getElementById('username').value;
const email = document.getElementById('email').value;
if (!username || !email) {
alert('Please fill in all fields.');
return;
}
// Modern approach: use checkValidity() for built-in validation
if (!form.checkValidity()) {
form.reportValidity();
return;
}
// Fallback/custom regex validation if needed
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
alert('Please enter a valid email address.');
return;
}
alert('Form submitted successfully!');
});
</script>
</body>
</html>Este exemplo demonstra a validação de formulário do lado do cliente, incluindo campos obrigatórios e validação do formato de e-mail, além de impedir o envio do formulário se a validação falhar.
Use querySelector e querySelectorAll para selecionar elementos de formulário de forma eficiente, e sempre valide os valores de input antes do envio do formulário para garantir a integridade dos dados e uma experiência de usuário fluida.
A validação do lado do cliente melhora a experiência do usuário, mas não substitui a validação do lado do servidor. Sempre valide e sanitize os dados no seu backend também.
Conclusão
Trabalhar com formulários em JavaScript envolve acessar elementos de formulário, obter e definir valores de input, coletar dados com FormData, tratar eventos de formulário e validar dados do formulário. Ao dominar essas técnicas, você pode criar formulários web dinâmicos e responsivos que melhoram a interação do usuário e a coleta de dados. Para ir mais longe, explore Formulários: evento e método submit e Propriedades e Métodos de Formulário.