Leggere i valori degli input
Acceda ai valori degli input di testo, checkbox e select.
Leggere i valori degli input è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.
Lavorare con i dati dei moduli
I moduli raccolgono l'input dell'utente tramite campi come caselle di testo, caselle di controllo, pulsanti radio e menu a discesa. Ogni tipo espone i propri dati in modo leggermente diverso.
input.value
Gli input simili a campi di testo espongono il contenuto corrente tramite la proprietà value, che è sempre una stringa.
const name = document.querySelector("#name");
console.log(name.value);value è sempre una stringa
Anche gli input numerici restituiscono una stringa. Esegua una conversione esplicita quando serve un numero.
const age = document.querySelector("#age");
const n = Number(age.value);valueAsNumber
Gli input numerici e per le date offrono valueAsNumber, che restituisce direttamente un numero o NaN se il valore è vuoto o non valido.
const qty = document.querySelector("#qty");
console.log(qty.valueAsNumber);checkbox.checked
Le caselle di controllo comunicano il proprio stato tramite la proprietà booleana checked, non tramite value.
const agree = document.querySelector("#agree");
console.log(agree.checked); // true or falsePulsanti radio
Per un gruppo di pulsanti radio, individui quello selezionato. La proprietà checked identifica l'opzione selezionata.
const selected = document.querySelector("input[name=plan]:checked");
console.log(selected ? selected.value : "none");Valore di select
Un menu a discesa a selezione singola espone l'opzione scelta tramite value.
const country = document.querySelector("#country");
console.log(country.value);Selezione multipla
Per una selezione multipla, legga selectedOptions e ricavi i valori tramite una mappatura.
const langs = document.querySelector("#langs");
const values = [...langs.selectedOptions].map((o) => o.value);L'evento input
Ascolti l'evento input per reagire a ogni pressione di un tasto o a ogni modifica in tempo reale.
name.addEventListener("input", (e) => {
console.log(e.target.value);
});L'evento change
L'evento change viene generato quando un campo perde il focus dopo che il suo valore è cambiato, oppure immediatamente per le caselle di controllo e i menu select.
country.addEventListener("change", (e) => {
console.log("chose " + e.target.value);
});FormData
FormData raccoglie in una sola operazione tutti i campi denominati di un modulo, risultando ideale per l'invio a un server.
const form = document.querySelector("form");
const data = new FormData(form);
console.log(data.get("name"));Verifica rapida
Legga correttamente la casella di controllo.
Riepilogo
Legga gli input di testo tramite value, che è sempre una stringa, e utilizzi valueAsNumber per i numeri; legga caselle di controllo e pulsanti radio tramite checked e i menu a discesa tramite value o selectedOptions. Reagisca con l'evento input, a ogni modifica, o con l'evento change, al momento della conferma, e raccolga tutto in una volta con FormData.
Impara JavaScript con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 59
- Lezioni
- 200
Domande Frequenti
La lezione «Leggere i valori degli input» è gratuita?
Sì — il testo completo di «Leggere i valori degli input» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.
Cosa imparerò in «Leggere i valori degli input»?
Acceda ai valori degli input di testo, checkbox e select. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare JavaScript Academy?
Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Leggere i valori degli input»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?
Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Leggere i valori degli input
- L'evento submit
- Validazione lato client
- La Constraint Validation API