Lezione 5: Input Utente 📝 | Corso JavaScript

📚 Benvenuto nella Lezione 5!

Bentornato Developer! 🎉 Finora hai lavorato con dati fissi. Ora imparerai a prendere dati DAGLI UTENTI!

Gli input sono il modo in cui gli utenti comunicano con la tua app. Login, registrazione, form contatti, ricerca... tutto usa gli input!

In questa lezione scriverai codice per leggere valori dagli input e creare un form di iscrizione completo! 📝

🎯 Cosa Imparerai

✅ I diversi tipi di input (text, email, number, date...)
✅ Prendere valori con .value
✅ Usare addEventListener('input')
✅ Convertire stringhe in numeri
✅ Validazione base degli input
✅ Progetto: Form iscrizione con feedback visivo

🎮 Perché gli Input Sono Importanti?

Praticamente ogni app usa gli input:

🔐 Login/Registrazione: Email, password
🔍 Ricerca: Barra di ricerca
💬 Form Contatti: Nome, messaggio
🛒 Checkout: Indirizzo, carta
⚙️ Impostazioni: Preferenze utente

👀 Demo: Input in Tempo Reale

Guarda come funzionano gli input! Scrivi qualcosa e vedi il valore apparire sotto:

📝 Scrivi qualcosa:

Valore dell'input:

Scrivi qualcosa sopra...

🤔 Come Funziona?

Il codice JavaScript legge il valore con .value:

const input = document.querySelector('#demoInput');
const output = document.querySelector('#demoOutput');

input.addEventListener('input', function() {
    output.textContent = input.value;
});

📝 Tipi di Input HTML

HTML offre diversi tipi di input. Ecco i più usati:

📝 text

Testo generico

📧 email

Email (con validazione)

🔢 number

Solo numeri

📅 date

Selettore data

🎨 color

Selettore colore

📊 select

Menu a tendina

🎯 Come Prendere i Valori

Per leggere cosa ha scritto l'utente, usa la proprietà .value

Metodo Base

JavaScript

// 1. Seleziona l'input
const nomeInput = document.querySelector('#nome');

// 2. Prendi il valore
const nomeUtente = nomeInput.value;

console.log(nomeUtente); // Stampa quello che l'utente ha scritto

Con l'Evento 'input' (In Tempo Reale)

JavaScript

const nomeInput = document.querySelector('#nome');

// Si attiva OGNI volta che l'utente scrive/cancella
nomeInput.addEventListener('input', function() {
    const valore = nomeInput.value;
    console.log('Hai scritto:', valore);
});

⚠️ IMPORTANTE: Gli Input Restituiscono Stringhe!

.value restituisce SEMPRE una stringa, anche per input di tipo "number"!

const età = document.querySelector('#età').value;
console.log(typeof età); // "string" ← È una stringa!

// Per usarlo come numero, converti:
const etàNumero = Number(età);  // Converte in numero
console.log(typeof etàNumero); // "number" ← Ora è un numero!

✍️ Esercizio Guidato: Generatore di Saluti

Crea un form che chiede nome e lingua, poi genera un saluto personalizzato!

📋 Cosa Devi Fare

Seleziona i due input (#greetName e #greetLang)
Seleziona il bottone #btnGreet
Seleziona dove mostrare il saluto #greetingOutput
Aggiungi un evento click al bottone
Prendi i valori dagli input
Crea un saluto diverso per ogni lingua
Mostra il saluto nel div output

📝 Struttura HTML da Usare

Ecco gli elementi HTML con cui lavorerai:

HTML - Elementi del Form

<!-- Input nome -->
<input id="greetName" type="text" placeholder="Il tuo nome">

<!-- Select lingua -->
<select id="greetLang">
    <option value="it">Italiano</option>
    <option value="en">English</option>
    <option value="es">Español</option>
    <option value="fr">Français</option>
</select>

<!-- Bottone -->
<button id="btnGreet">Genera Saluto</button>

<!-- Output -->
<div id="greetingOutput"></div>

📌 IDs da Usare nel JavaScript:

#greetName → Input nome utente
#greetLang → Select lingua (valori: "it", "en", "es", "fr")
#btnGreet → Bottone per generare il saluto
#greetingOutput → Dove mostrare il saluto

💡 Hint: Usa if/else per i saluti: "Ciao" (it), "Hello" (en), "Hola" (es), "Bonjour" (fr)

👋 Il saluto apparirà qui

👤 Nome:

🌍 Lingua:

Inizia selezionando tutti gli elementi:

const nomeInput = document.querySelector('#greetName');
const langSelect = document.querySelector('#greetLang');
const bottone = document.querySelector('#btnGreet');
const output = document.querySelector('#greetingOutput');

Aggiungi l'evento e prendi i valori:

bottone.addEventListener('click', function() {
    const nome = nomeInput.value;
    const lingua = langSelect.value;
    
    // Ora crea il saluto...
});

Usa if/else per scegliere il saluto:

let saluto;

if (lingua === 'it') {
    saluto = 'Ciao';
} else if (lingua === 'en') {
    saluto = 'Hello';
} else if (lingua === 'es') {
    saluto = 'Hola';
} else if (lingua === 'fr') {
    saluto = 'Bonjour';
}

output.textContent = saluto + ' ' + nome + '! 👋';

// Scrivi qui il tuo codice!

// 1. Seleziona gli elementi


// 2. Aggiungi evento click al bottone


// 3. Dentro l'evento, prendi i valori


// 4. Crea il saluto in base alla lingua (usa if/else)


// 5. Mostra il saluto nell'output

🎮 Progetto Finale: Form Iscrizione Completo

È il momento del progetto vero! 🚀

Creerai un form di iscrizione che:

✅ Raccoglie nome, email, età, paese
✅ Valida che tutti i campi siano compilati
✅ Converte l'età in numero
✅ Genera una card profilo personalizzata
✅ Mostra emoji in base al paese selezionato

🎯 Obiettivi del Progetto

✅ Form con 4 campi input
✅ Validazione campi vuoti (if)
✅ Conversione età in numero
✅ Template literal per creare la card
✅ innerHTML per mostrare HTML
✅ Reset del form dopo l'iscrizione

📝 Riferimento Elementi HTML

Prima di iniziare, ecco tutti gli ID che userai:

HTML - Mappa degli Elementi

<!-- Form Input -->
<input id="regName" type="text" placeholder="Nome">
<input id="regEmail" type="email" placeholder="Email">
<input id="regAge" type="number" placeholder="Età">
<select id="regCountry">
    <option value="italia">Italia</option>
    <option value="francia">Francia</option>
    <option value="spagna">Spagna</option>
    <option value="germania">Germania</option>
</select>

<!-- Bottoni -->
<button id="btnRegister">Iscriviti</button>

<!-- Output -->
<div id="userCardOutput"></div>

📌 Guida Rapida IDs:

Input:

#regName → Nome
#regEmail → Email
#regAge → Età
#regCountry → Paese

Controlli:

#btnRegister → Iscriviti
#userCardOutput → Output card

💡 Emoji paesi: 🇮🇹 italia, 🇫🇷 francia, 🇪🇸 spagna, 🇩🇪 germania

📝 Il Progetto Live

📝 Iscriviti Ora!

Compila il form per creare il tuo profilo

👤 Nome:

📧 Email:

🎂 Età:

🌍 Paese:

💻 Scrivi il Codice del Progetto

Segui i commenti e completa il codice:

// PROGETTO: Form Iscrizione Completo

// 1. SELEZIONA TUTTI GLI ELEMENTI
const nomeInput = document.querySelector('#regName');
const emailInput = document.querySelector('#regEmail');
const etaInput = document.querySelector('#regAge');
const paeseSelect = document.querySelector('#regCountry');
const btnIscrizione = document.querySelector('#btnRegister');
const output = document.querySelector('#userCardOutput');

// 2. AGGIUNGI EVENTO AL BOTTONE
btnIscrizione.addEventListener('click', function() {
    
    // 3. PRENDI I VALORI DAGLI INPUT
    const nome = nomeInput.value;
    const email = emailInput.value;
    const eta = // COMPLETA: converti in numero!
    const paese = paeseSelect.value;
    
    // 4. VALIDAZIONE: Controlla che non siano vuoti
    if (nome === '' || email === '' || eta === '') {
        alert('⚠️ Compila tutti i campi!');
        return; // Esce dalla funzione
    }
    
    // 5. EMOJI IN BASE AL PAESE
    let emoji;
    if (paese === 'italia') {
        emoji = '🇮🇹';
    } else if (paese === 'francia') {
        emoji = '🇫🇷';
    } else if (paese === 'spagna') {
        emoji = '🇪🇸';
    } else {
        emoji = '🇩🇪';
    }
    
    // 6. CREA LA CARD CON TEMPLATE LITERAL
    const cardHTML = `
        <div class="user-card">
            <div class="user-avatar">${emoji}</div>
            <div class="user-name">${nome}</div>
            <div class="user-info">📧 ${email}</div>
            <div class="user-info">🎂 ${eta} anni</div>
            <div class="user-info">🌍 ${paese}</div>
        </div>
    `;
    
    // 7. MOSTRA LA CARD
    output.innerHTML = cardHTML;
    
    // 8. RESET DEL FORM
    nomeInput.value = '';
    emailInput.value = '';
    etaInput.value = '';
    
    console.log('✅ Iscrizione completata!', {nome, email, eta, paese});
});

🎯 Conclusione: Sei un Input Master!

✅ Recap: Cosa Hai Imparato

✅ I tipi di input HTML (text, email, number, date, select...)
✅ Prendere valori con .value
✅ Usare addEventListener('input') per tempo reale
✅ Convertire stringhe in numeri con Number()
✅ Validare input (controllo campi vuoti)
✅ Creare card profilo con template literals e innerHTML

🚀 Challenge: Vai Oltre!

Migliora il form iscrizione aggiungendo:

🔒 Password: Aggiungi campo password e conferma password
✅ Checkbox: Aggiungi "Accetto i termini"
📅 Data Nascita: Usa input type="date" invece di età
🎨 Avatar Iniziali: Mostra le iniziali del nome nell'avatar
💾 Lista Utenti: Salva tutti gli utenti in un array

📚 Prossima Lezione

Nella Lezione 6 imparerai le Condizioni (If/Else)! Farai prendere decisioni intelligenti al tuo codice! 🤔

💾 Esercizi Pratici da Scaricare

Pronto a padroneggiare gli input? Ho preparato 3 esercizi progressivi per praticare .value, conversioni e validazione!

HTML e CSS pronti - tu completi solo il JavaScript! 🚀

📦

Scarica Tutti gli Esercizi

3 esercizi: contatore, calcolatore età, form contatto

📥 Scarica ZIP

Pratica .value, Number(), addEventListener('input')!

01

⭐⭐ Medio ⏱️ 15-20 min

📝 Contatore Caratteri

Conta caratteri in tempo reale! Usa addEventListener('input') e .length per aggiornare istantaneamente.

✅ .value ✅ addEventListener('input') ✅ .length 🌟 Bonus: Colore se > limite

02

⭐⭐ Medio ⏱️ 20-25 min

🎂 Calcolatore Età

Dall'anno di nascita all'età! Usa Number() per convertire l'input e calcolare l'età + generazione.

✅ Number() conversione ✅ Calcoli matematici ✅ if/else generazioni 🌟 Bonus: Validazione

03

⭐⭐⭐ Difficile ⏱️ 25-30 min

📧 Form Contatto Completo

Form con 4 campi, validazione, e card riepilogo! Usa template literals e innerHTML per l'output.

✅ Validazione campi ✅ Template literals ✅ innerHTML ✅ Reset form

📦 Cosa Include

📝

.value

Prendere valori dagli input

⚡

Eventi input

Tempo reale con addEventListener

🔢

Number()

Conversione stringhe → numeri

✅

Validazione

Controllo campi vuoti

🚀 Pronto per gli Input?

Scarica e diventa un Input Master!

📥 Scarica Esercizi

💾 Novità: Esercizi Pratici Scaricabili!