Etichette per gli input
Fa parte della sezione Fondamenti del percorso HTML di Coddy. Lezione 39 di 60.
Non è sempre molto chiaro a cosa si riferisce un input senza un'etichetta. Un'etichetta fornisce agli utenti un'indicazione visiva chiara sul tipo di input previsto in quel campo. Le etichette si creano usando il tag <label>.
Ecco la sintassi di base:
<label for="field">Label text</label>
<input type="text" id="field"><label>: Il tag che crea l'etichetta.
for: Un collegamento tra l’etichetta e un campo del modulo. Il valore difordeve corrispondere all’iddel campo del modulo.
- Testo dell'etichetta: il testo che descrive a cosa serve il campo del modulo.
<input>: Il campo del modulo a cui si riferisce l'etichetta.
id: L'identificatore univoco del campo del modulo, che corrisponde all'attributofornell'etichetta.
Una volta collegati, facendo clic sul testo dell'etichetta si posiziona il cursore nel relativo campo di input (che riceve il focus), offrendo agli utenti anche un'area più ampia su cui fare clic.
Sfida
FacileAggiungi i seguenti tag all'interno del tag <form>:
- Un
<label>con il testo 'First Name:' e l'attributoforimpostato su 'firstname'. - Un campo
<input>contype="text". - Il campo
<input>deve avere unidche corrisponda all'attributofordell'etichetta.
Provalo tu
<!DOCTYPE html>
<html>
<body>
<form>
<!-- Scrivi il codice qui -->
</form>
</body>
</html>
Mettiti alla provaQuesta lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.
Tutte le lezioni di Fondamenti
1Fondamenti di HTML
Che cos’è HTML?Struttura di base di un documento HTMLTag ed elementiAnnidamento e tag di chiusuraCommenti in HTML7Pagina del profilo personale
Panoramica del progettoSezione intestazione
Immagine del profiloSezione Chi sonoLink ai social2Testo e formattazione
IntestazioniParagrafiInterruzioni di rigaTesto in grassetto e corsivoAncora grassetto e corsivoRiepilogo - formattazione5Aggiungere contenuti
Attributi HTMLCollegamentiCollegamenti a nuove pagineImmaginiAttributi delle immagini8Moduli e campi di input - Parte 1
Nozioni di base sui moduliCampi di testoAttributi degli inputCampo passwordEtichette per gli inputRiepilogo - modulo di base11Pagina di registrazione all'evento
Panoramica del progettoSezione intestazioneSezione dettagli dell'eventoModulo di registrazioneSezione piè di paginaEsercitati da solo: Playground Web