Form: input, label, button
Costruisca moduli HTML accessibili con input associati a label, diversi tipi di input, textarea, select e pulsanti di invio.
Form: input, label, button è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 4 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 Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Perché usare i moduli HTML?
I moduli sono il modo principale con cui gli utenti inviano dati a un server: accesso, ricerca, acquisto o feedback. I browser offrono una grande quantità di comportamenti integrati — convalida, input da tastiera e tastiere mobili — che si ottengono gratuitamente utilizzando gli elementi nativi dei moduli.
L'elemento <form>
L'elemento <form> racchiude tutti i controlli correlati. L'attributo action imposta l'URL che riceve i dati; method imposta GET o POST. Nelle SPA spesso si impedisce l'invio predefinito e lo si gestisce con JavaScript.
<form action="/submit" method="POST">
<!-- inputs go here -->
</form>Input di testo ed e-mail
L'elemento <input> è l'elemento fondamentale dei moduli. L'attributo type ne modifica il comportamento. type="text" per il testo libero, type="email" per gli indirizzi e-mail (convalida il formato e mostra la tastiera mobile appropriata).
<input type="text" name="username" placeholder="Enter your name">
<input type="email" name="email" placeholder="you@example.com">Password, numeri e altri tipi
Altri tipi di input utili: password (nasconde i caratteri), number (convalida i valori numerici e mostra i controlli incrementali), date (mostra un selettore di date), range (cursore), checkbox (interruttore booleano), radio (scelta tra più opzioni).
<input type="password" name="pass">
<input type="number" name="age" min="0" max="120">
<input type="date" name="birthday">
<input type="range" min="0" max="100" value="50">L'elemento <label> — fondamentale per l'accessibilità
Ogni input deve avere un <label> associato. L'etichetta indica agli utenti (e ai lettori di schermo) a cosa serve il campo. Facendo clic sull'etichetta si attiva l'input. Utilizzi l'attributo for corrispondente all'id dell'input.
<label for="username">Username</label>
<input type="text" id="username" name="username">Textarea e select
Utilizzi <textarea> per il testo su più righe (ad esempio, i commenti). Utilizzi <select> con elementi <option> figli per le opzioni a discesa. Includa sempre un'opzione vuota predefinita con un'indicazione come "Scegli una categoria".
<textarea name="message" rows="4" placeholder="Write your message..."></textarea>
<select name="level">
<option value="">Select level...</option>
<option value="a1">A1 Beginner</option>
<option value="b1">B1 Intermediate</option>
</select>Caselle di controllo e pulsanti radio
Raggruppi le caselle di controllo correlate con <fieldset> e <legend>. I pulsanti radio con lo stesso name consentono di effettuare una sola selezione. Ogni casella deve avere la propria etichetta.
<fieldset>
<legend>Preferred languages</legend>
<label><input type="checkbox" name="lang" value="js"> JavaScript</label>
<label><input type="checkbox" name="lang" value="ts"> TypeScript</label>
</fieldset>Pulsanti: submit, reset, button
<button type="submit"> invia il modulo. type="reset" cancella tutti i campi. type="button" non esegue alcuna azione per impostazione predefinita e si utilizza con gli event listener JavaScript. Imposti sempre il tipo: il valore predefinito è submit.
<button type="submit">Send Message</button>
<button type="reset">Clear Form</button>
<button type="button" id="preview">Preview</button>Raggruppamento degli input con <fieldset>
<fieldset> raggruppa visivamente e semanticamente i controlli correlati. Il <legend>, obbligatorio, fornisce una didascalia. I lettori di schermo annunciano la legenda prima di ogni controllo del gruppo, fornendo il contesto.
L'attributo name — Che cosa viene inviato
Quando si invia un modulo, i browser inviano la coppia name=value per ogni controllo. Vengono inclusi solo i controlli con un attributo name. Per le caselle di controllo, vengono inviate solo quelle selezionate.
<input type="text" name="firstName" value="Alice">
<!-- Submits: firstName=Alice -->Autofill e autocomplete
Imposti valori dell'attributo autocomplete come email, given-name, new-password o current-password per aiutare i gestori di password e la compilazione automatica del browser a compilare correttamente i moduli.
<input type="email" name="email" autocomplete="email">
<input type="password" name="pass" autocomplete="current-password">Verifica rapida
Qual è lo scopo dell'attributo for su un elemento <label>?
Riepilogo: moduli HTML accessibili
Ogni input deve avere un'etichetta. Scelga il tipo di input adatto ai dati. Raggruppi i controlli correlati con fieldset. Utilizzi button type=submit per l'invio. Sfrutti le funzionalità native dei moduli — convalida, navigazione da tastiera e compilazione automatica — prima di aggiungere JavaScript.
Domande Frequenti
La lezione «Form: input, label, button» è gratuita?
Sì — il testo completo di «Form: input, label, button» è 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 Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «Form: input, label, button»?
Costruisca moduli HTML accessibili con input associati a label, diversi tipi di input, textarea, select e pulsanti di invio. Eserciti Frontend 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 Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend 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 4 di 4.
Quanto tempo richiede la lezione «Form: input, label, button»?
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 Frontend Academy?
Sì. Ogni lezione Frontend 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
- Struttura del documento: DOCTYPE, html, head, body
- Tag semantici: header, nav, main, article, footer
- Testo, immagini, link ed elenchi
- Form: input, label, button