9.1 Principais eventos de formulários
Para garantir a funcionalidade dos formulários, é necessário entender e gerenciar os eventos que ocorrem na interação do usuário com os elementos do formulário. Abaixo, veremos em detalhes os principais eventos de formulários em HTML, seu tratamento com JavaScript e exemplos de uso.
Em HTML, os formulários podem gerar vários eventos que ocorrem na interação do usuário com os elementos do formulário, tais como campos de entrada, botões, caixas de seleção e botões de rádio. Os principais eventos de formulários incluem:
- submit — evento de envio do formulário
- reset — evento de reset do formulário
- focus — evento quando um elemento ganha foco
- blur — evento quando um elemento perde o foco
- change — evento de mudança do valor do elemento do formulário
- input — evento de entrada de dados em um elemento do formulário
- select — evento de seleção de texto em um elemento do formulário
9.2 Evento submit
Evento submit ocorre no envio do formulário. Normalmente, acontece quando o usuário clica no botão "Submit" em um formulário. O tratamento deste evento permite realizar validação de dados antes de enviá-los ao servidor, evitar o envio do formulário em caso de erros de entrada e executar outras ações.
Exemplo de tratamento do evento submit:
<form id="my-form" action="/submit" method="post">
<label for="username">Nome de usuário:</label>
<input type="text" id="username" name="username">
<button type="submit">Enviar</button>
</form>
const form = document.getElementById('my-form');
form.addEventListener('submit', function(event) {
const username = document.getElementById('username').value;
if (username === '') {
alert('Por favor, insira o nome de usuário.');
event.preventDefault(); // previne o envio do formulário
} else {
alert(`Nome de usuário recebido: ${username}`);
event.preventDefault();
}
});
const form = document.getElementById('my-form');
form.addEventListener('submit', function(event) {
const username = document.getElementById('username').value;
if (username === '') {
alert('Por favor, insira o nome de usuário.');
event.preventDefault(); // previne o envio do formulário
}
});
9.3 Evento reset
Evento reset ocorre ao resetar o formulário para seu estado inicial. Normalmente, isso acontece quando o usuário clica no botão "Reset". O tratamento deste evento pode ser útil para executar ações adicionais ao resetar o formulário, como limpar mensagens de erro.
Exemplo de tratamento do evento reset:
<div style="min-height: 220px">
<form id="my-form">
<label for="name">Nome:</label>
<br>
<input type="text" id="name" name="name">
<br><br>
<label for="email">Email:</label>
<br>
<input type="email" id="email" name="email">
<br><br>
<label for="password">Senha:</label>
<br>
<input type="password" id="password" name="password">
<div style="margin-top: 10px">
<button id="btn" type="button">Resetar</button>
</div>
</form>
<p id="log"></p>
</div>
<form id="my-form">
<label for="name">Nome:</label>
<br>
<input type="text" id="name" name="name">
<br><br>
<label for="email">Email:</label>
<br>
<input type="email" id="email" name="email">
<br><br>
<label for="password">Senha:</label>
<br>
<input type="password" id="password" name="password">
<div style="margin-top: 10px">
<button type="reset">Resetar</button>
</div>
</form>
<p id="log"></p>
const form = document.getElementById('my-form');
const btn = document.getElementById('btn');
const n = document.getElementById('name');
const e = document.getElementById('email');
const p = document.getElementById('password');
const log = document.getElementById('log');
document.addEventListener('DOMContentLoaded', () => {
n.value = "John";
e.value = "john@mail.com";
p.value = "qwerty";
});
btn.addEventListener('click', () => {
n.value = "";
e.value = "";
p.value = "";
log.textContent = 'O formulário foi resetado!';
});
const form = document.getElementById('my-form');
const log = document.getElementById('log');
form.addEventListener('reset', function () {
log.textContent = 'O formulário foi resetado!';
});
9.4 Eventos focus e blur
Eventos focus e blur ocorrem quando um elemento do formulário ganha e perde foco, respectivamente. Esses eventos são frequentemente usados para melhorar a interação do usuário com o formulário, por exemplo, para exibir dicas ou mensagens de erro.
Exemplo de tratamento do evento focus:
<div style="min-height: 55px">
<form id="my-form">
<label for="username">Nome de usuário:</label>
<input type="text" id="username" name="username">
<div id="username-hint" style="display: none;">
Você verá esta dica ao focar no campo.
Ela permanecerá visível mesmo após a mudança de foco.
</div>
</form>
</div>
<form id="my-form">
<label for="username">Nome de usuário:</label>
<input type="text" id="username" name="username">
<div id="username-hint" style="display: none;">
Você verá esta dica ao focar no campo.
Ela permanecerá visível mesmo após a mudança de foco.
</div>
</form>
const form = document.getElementById('my-form');
const usernameInput = document.getElementById('username');
const hint = document.getElementById('username-hint');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
usernameInput.addEventListener('focus', function (event) {
hint.style.display = 'block';
});
const usernameInput = document.getElementById('username');
const hint = document.getElementById('username-hint');
usernameInput.addEventListener('focus', function () {
hint.style.display = 'block';
});
Exemplo de tratamento do evento blur:
<div style="min-height: 55px">
<form id="my-form">
<label for="username">Nome de usuário:</label>
<input type="text" id="username" name="username">
<div id="username-error" style="display: none; color: red;">
O erro aparecerá apenas se o campo estiver vazio após a mudança de foco
</div>
</form>
</div>
<form id="my-form">
<label for="username">Nome de usuário:</label>
<input type="text" id="username" name="username">
<div id="username-error" style="display: none; color: red;">
O erro aparecerá apenas se o campo estiver vazio após a mudança de foco
</div>
</form>
const form = document.getElementById('my-form');
const usernameInput = document.getElementById('username');
const error = document.getElementById('username-error');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
usernameInput.addEventListener('blur', function (event) {
error.style.display = usernameInput.value === '' ? 'block' : 'none';
});
const usernameInput = document.getElementById('username');
const error = document.getElementById('username-error');
usernameInput.addEventListener('blur', function () {
error.style.display = usernameInput.value === '' ? 'block' : 'none';
});
9.5 Evento input
Evento input ocorre sempre que o valor de um elemento do formulário é alterado, independentemente de o elemento perder o foco. Este evento é frequentemente usado para validação imediata do input do usuário, por exemplo, na validação de campos em tempo real.
Exemplo de tratamento do evento input:
<html lang="pt-BR">
<head>
<style>
input {
outline: none;
}
.valid {
border-color: green;
}
.invalid {
border-color: red;
}
.wrapper-valid::after {
content: "Email válido";
margin-left: 5px;
color: green;
}
.wrapper-invalid::after {
content: "Email inválido";
margin-left: 5px;
color: red;
}
</style>
</head>
<body>
<form id="my-form">
<label for="email">Email:</label>
<div id="wrapper">
<input type="email" id="email" name="email">
</div>
</form>
</body>
</html>
const form = document.getElementById('my-form');
const inputWrapper = document.getElementById('wrapper');
const emailInput = document.getElementById('email');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
emailInput.addEventListener('input', function () {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (emailPattern.test(emailInput.value)) {
inputWrapper.classList.add('wrapper-valid');
inputWrapper.classList.remove('wrapper-invalid');
emailInput.classList.add('valid');
emailInput.classList.remove('invalid');
} else {
inputWrapper.classList.add('wrapper-invalid');
inputWrapper.classList.remove('wrapper-valid');
emailInput.classList.add('invalid');
emailInput.classList.remove('valid');
}
});
const emailInput = document.getElementById('email');
const inputWrapper = document.getElementById('wrapper');
emailInput.addEventListener('input', function () {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (emailPattern.test(emailInput.value)) {
emailInput.classList.add('valid');
emailInput.classList.remove('invalid');
} else {
emailInput.classList.add('invalid');
emailInput.classList.remove('valid');
}
});
9.6 Evento select
Evento select ocorre quando o usuário seleciona texto em um elemento do formulário, como um campo de entrada ou campo de texto. Este evento pode ser útil para executar ações ao selecionar texto, como exibir um botão de copiar.
Exemplo de tratamento do evento select:
<div style="min-height: 55px">
<form id="my-form">
<label for="text-input">Digite o texto:</label>
<input type="text" id="text" name="text">
<div id="select-message"></div>
</form>
</div>
<form id="my-form">
<label for="text-input">Digite o texto:</label>
<input type="text" id="text" name="text">
<div id="select-message"></div>
</form>
document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('my-form');
const textInput = document.getElementById('text');
const selectMessage = document.getElementById('select-message');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
textInput.addEventListener('select', function () {
selectMessage.textContent = 'Você selecionou o texto!';
});
});
document.addEventListener('DOMContentLoaded', function () {
const textInput = document.getElementById('text');
const selectMessage = document.getElementById('select-message');
textInput.addEventListener('select', function () {
selectMessage.textContent = 'Você selecionou o texto!';
});
});
9.7 Evento change
Evento change ocorre quando o valor de um elemento do formulário é alterado e o usuário sai do elemento (perde o foco). Este evento é frequentemente usado para verificar alterações em campos de formulário, como listas suspensas ou caixas de seleção.
Exemplo de tratamento do evento change:
<form id="my-form">
<label for="color-select">Escolha uma cor:</label>
<select id="color-select" name="color">
<option value="red">Vermelho</option>
<option value="green">Verde</option>
<option value="blue">Azul</option>
</select>
</form>
document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('my-form');
const selectElement = document.getElementById('color-select');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
selectElement.addEventListener('change', function () {
alert('Você escolheu a cor: ' + selectElement.value);
});
});
document.addEventListener('DOMContentLoaded', function () {
const selectElement = document.getElementById('color-select');
selectElement.addEventListener('change', function () {
alert('Você escolheu a cor: ' + selectElement.value);
});
});
GO TO FULL VERSION