9.1 Principali eventi dei form
Per assicurare la funzionalità dei form, è necessario capire e gestire gli eventi che si verificano durante l'interazione dell'utente con gli elementi del form. Di seguito esaminiamo in dettaglio i principali eventi dei form in HTML, la loro gestione con JavaScript e esempi di utilizzo.
In HTML, i form possono generare vari eventi che si verificano durante l'interazione dell'utente con gli elementi del form, come campi di input, pulsanti, checkbox e radio button. Gli eventi principali dei form includono:
- submit — evento di invio del form
- reset — evento di reset del form
- focus — evento quando un elemento riceve il focus
- blur — evento quando un elemento perde il focus
- change — evento di cambiamento del valore di un elemento del form
- input — evento di input dati in un elemento del form
- select — evento di selezione del testo in un elemento del form
9.2 Evento submit
L'evento submit si verifica quando un form viene inviato. Di solito si verifica quando l'utente preme il pulsante "Submit" in un form. Gestire questo evento consente di eseguire la validazione dei dati prima di inviarli al server, prevenire l'invio del form in caso di errori di input e compiere altre azioni.
Esempio di gestione dell'evento submit:
<form id="my-form" action="/submit" method="post">
<label for="username">Nome utente:</label>
<input type="text" id="username" name="username">
<button type="submit">Invia</button>
</form>
const form = document.getElementById('my-form');
form.addEventListener('submit', function(event) {
const username = document.getElementById('username').value;
if (username === '') {
alert('Per favore, inserisci il nome utente.');
event.preventDefault(); // preveniamo l'invio del form
} else {
alert(`Nome utente ricevuto: ${username}`);
event.preventDefault();
}
});
const form = document.getElementById('my-form');
form.addEventListener('submit', function(event) {
const username = document.getElementById('username').value;
if (username === '') {
alert('Per favore, inserisci il nome utente.');
event.preventDefault(); // preveniamo l'invio del form
}
});
9.3 Evento reset
L'evento reset si verifica quando un form viene resettato al suo stato iniziale. Di solito accade quando l'utente preme il pulsante "Reset". La gestione di questo evento può essere utile per eseguire azioni aggiuntive durante il reset del form, come la pulizia dei messaggi di errore.
Esempio di gestione dell'evento reset:
<div style="min-height: 220px">
<form id="my-form">
<label for="name">Name:</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">Password:</label>
<br>
<input type="password" id="password" name="password">
<div style="margin-top: 10px">
<button id="btn" type="button">Resetta</button>
</div>
</form>
<p id="log"></p>
</div>
<form id="my-form">
<label for="name">Name:</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">Password:</label>
<br>
<input type="password" id="password" name="password">
<div style="margin-top: 10px">
<button type="reset">Resetta</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 = 'Il form è stato resettato!';
});
const form = document.getElementById('my-form');
const log = document.getElementById('log');
form.addEventListener('reset', function () {
log.textContent = 'Il form è stato resettato!';
});
9.4 Eventi focus e blur
Gli eventi focus e blur si verificano quando un elemento del form riceve e perde il focus rispettivamente. Questi eventi sono spesso usati per migliorare l'interazione dell'utente con il form, ad esempio, per mostrare suggerimenti o messaggi di errore.
Esempio di gestione dell'evento focus:
<div style="min-height: 55px">
<form id="my-form">
<label for="username">Nome utente:</label>
<input type="text" id="username" name="username">
<div id="username-hint" style="display: none;">
Vedrai questo suggerimento quando l'elemento è in focus.
Sarà visibile anche dopo aver perso il focus.
</div>
</form>
</div>
<form id="my-form">
<label for="username">Nome utente:</label>
<input type="text" id="username" name="username">
<div id="username-hint" style="display: none;">
Vedrai questo suggerimento quando l'elemento è in focus.
Sarà visibile anche dopo aver perso il focus.
</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';
});
Esempio di gestione dell'evento blur:
<div style="min-height: 55px">
<form id="my-form">
<label for="username">Nome utente:</label>
<input type="text" id="username" name="username">
<div id="username-error" style="display: none; color: red;">
L'errore apparirà solo se il campo sarà vuoto dopo il cambio di focus
</div>
</form>
</div>
<form id="my-form">
<label for="username">Nome utente:</label>
<input type="text" id="username" name="username">
<div id="username-error" style="display: none; color: red;">
L'errore apparirà solo se il campo sarà vuoto dopo il cambio di focus
</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
L'evento input si verifica ogni volta che il valore di un elemento del form cambia, indipendentemente dal fatto che l'elemento perda o meno il focus. Questo evento è spesso utilizzato per la verifica istantanea dell'input dell'utente, come la validazione dei campi di input in tempo reale.
Esempio di gestione dell'evento input:
<html lang="it">
<head>
<style>
input {
outline: none;
}
.valid {
border-color: green;
}
.invalid {
border-color: red;
}
.wrapper-valid::after {
content: "Email valida";
margin-left: 5px;
color: green;
}
.wrapper-invalid::after {
content: "Email non valida";
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
L'evento select si verifica quando l'utente seleziona del testo in un elemento del form, come un campo di input o un campo di testo. Questo evento può essere utile per eseguire azioni durante la selezione del testo, come la visualizzazione di un pulsante di copia.
Esempio di gestione dell'evento select:
<div style="min-height: 55px">
<form id="my-form">
<label for="text-input">Inserisci testo:</label>
<input type="text" id="text" name="text">
<div id="select-message"></div>
</form>
</div>
<form id="my-form">
<label for="text-input">Inserisci testo:</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 = 'Hai selezionato del testo!';
});
});
document.addEventListener('DOMContentLoaded', function () {
const textInput = document.getElementById('text');
const selectMessage = document.getElementById('select-message');
textInput.addEventListener('select', function () {
selectMessage.textContent = 'Hai selezionato del testo!';
});
});
9.7 Evento change
L'evento change si verifica quando il valore di un elemento del form cambia e l'utente esce dall'elemento (perde il focus). Questo evento è spesso utilizzato per controllare le modifiche nei campi del form, come i menu a tendina o le checkbox.
Esempio di gestione dell'evento change:
<form id="my-form">
<label for="color-select">Seleziona colore:</label>
<select id="color-select" name="color">
<option value="red">Rosso</option>
<option value="green">Verde</option>
<option value="blue">Blu</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('Hai scelto il colore: ' + selectElement.value);
});
});
document.addEventListener('DOMContentLoaded', function () {
const selectElement = document.getElementById('color-select');
selectElement.addEventListener('change', function () {
alert('Hai scelto il colore: ' + selectElement.value);
});
});
GO TO FULL VERSION