3E e 3I Sia: Creare un modulo form in una pagina html e restituire il risultato nella stessa pagina con una funzione in Javascript
3E e 3I Sia: Creare un modulo form in una pagina html e restituire il risultato nella stessa pagina con una funzione in Javascript
Codice HTML e JavaScript
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modulo di Inserimento Dati</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.output {
margin-top: 20px;
border: 1px solid #ccc;
padding: 10px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h2>Inserisci i tuoi dati:</h2>
<form id="dataForm">
<label for="name">Nome:</label>
<input type="text" id="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" required><br><br>
<button type="submit">Invia</button>
</form>
<div class="output" id="output"></div>
<script>
// Funzione per gestire l'invio del modulo
document.getElementById('dataForm').addEventListener('submit', function(event) {
// Impedisce il comportamento predefinito del modulo (invio della pagina)
event.preventDefault();
// Recupera i valori dagli input
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
// Crea un nuovo elemento per visualizzare i dati
const outputDiv = document.getElementById('output');
outputDiv.innerHTML += `<p>Nome: ${name}, Email: ${email}</p>`;
// Pulisce i campi del modulo
document.getElementById('dataForm').reset();
});
</script>
</body>
</html>
```
Spiegazione delle Istruzioni Utilizzate
1. Struttura Base HTML**: Il documento inizia con il template standard HTML che include l'elemento `<!DOCTYPE html>`, il tag `<html>`, `<head>` e `<body>`. Dentro il tag `<head>`, sono definitive le informazioni di carattere e il titolo della pagina.
2. Form HTML: Utilizziamo il tag `<form>` con un `id` di `dataForm`. Dentro il modulo, abbiamo due input: uno per il nome e uno per l'email, entrambi con l'attributo `required` per garantire che non possano essere inviati vuoti.
3. Event Listener: Con `document.getElementById('dataForm').addEventListener('submit', ...)` registriamo un gestore di eventi per il modulo. Quando il modulo viene inviato, la funzione inserita come callback verrà eseguita.
4. Prevent Default: `event.preventDefault();` è utilizzato per evitare che il modulo invii la pagina. In questo modo, possiamo gestire l'evento in modo personalizzato senza ricaricare la pagina.
5. Recupero Dati: Recuperiamo i valori degli input utilizzando `document.getElementById('name').value` e `document.getElementById('email').value`.
6. Visualizzazione Dati: Creiamo un nuovo paragrafo all'interno di un `div` con `id` di `output`, appending i dati inseriti alla fine dell'attuale contenuto di `outputDiv`.
7. Reset del Modulo: Finale, chiamiamo il metodo `reset()` sul modulo per pulire i campi una volta che i dati sono stati visualizzati.
Come Usare il Codice:
1. Copia il codice fornito in un file con estensione `.html` (ad esempio, `modulo.html`).
2. Apri il file nel tuo browser.
3. Inserisci il tuo nome e email, quindi premi il pulsante "Invia". I dati appariranno sotto il modulo.
Codice HTML e JavaScript
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modulo di Inserimento Dati</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.output {
margin-top: 20px;
border: 1px solid #ccc;
padding: 10px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h2>Inserisci i tuoi dati:</h2>
<form id="dataForm">
<label for="name">Nome:</label>
<input type="text" id="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" required><br><br>
<button type="submit">Invia</button>
</form>
<div class="output" id="output"></div>
<script>
// Funzione per gestire l'invio del modulo
document.getElementById('dataForm').addEventListener('submit', function(event) {
// Impedisce il comportamento predefinito del modulo (invio della pagina)
event.preventDefault();
// Recupera i valori dagli input
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
// Crea un nuovo elemento per visualizzare i dati
const outputDiv = document.getElementById('output');
outputDiv.innerHTML += `<p>Nome: ${name}, Email: ${email}</p>`;
// Pulisce i campi del modulo
document.getElementById('dataForm').reset();
});
</script>
</body>
</html>
```
Spiegazione delle Istruzioni Utilizzate
1. Struttura Base HTML**: Il documento inizia con il template standard HTML che include l'elemento `<!DOCTYPE html>`, il tag `<html>`, `<head>` e `<body>`. Dentro il tag `<head>`, sono definitive le informazioni di carattere e il titolo della pagina.
2. Form HTML: Utilizziamo il tag `<form>` con un `id` di `dataForm`. Dentro il modulo, abbiamo due input: uno per il nome e uno per l'email, entrambi con l'attributo `required` per garantire che non possano essere inviati vuoti.
3. Event Listener: Con `document.getElementById('dataForm').addEventListener('submit', ...)` registriamo un gestore di eventi per il modulo. Quando il modulo viene inviato, la funzione inserita come callback verrà eseguita.
4. Prevent Default: `event.preventDefault();` è utilizzato per evitare che il modulo invii la pagina. In questo modo, possiamo gestire l'evento in modo personalizzato senza ricaricare la pagina.
5. Recupero Dati: Recuperiamo i valori degli input utilizzando `document.getElementById('name').value` e `document.getElementById('email').value`.
6. Visualizzazione Dati: Creiamo un nuovo paragrafo all'interno di un `div` con `id` di `output`, appending i dati inseriti alla fine dell'attuale contenuto di `outputDiv`.
7. Reset del Modulo: Finale, chiamiamo il metodo `reset()` sul modulo per pulire i campi una volta che i dati sono stati visualizzati.
Come Usare il Codice:
1. Copia il codice fornito in un file con estensione `.html` (ad esempio, `modulo.html`).
2. Apri il file nel tuo browser.
3. Inserisci il tuo nome e email, quindi premi il pulsante "Invia". I dati appariranno sotto il modulo.
Commenti
Posta un commento