2.11
Applicare attributi agli elementi per migliorare la loro descrizione o per specificare alcune funzionalità dell'interfaccia utente è una pratica essenziale. Esaminiamo i più frequenti tra gli attributi utilizzati.
I tag HTML possono essere dotati di uno o più attributi, che hanno lo scopo di specificare in modo più dettagliato la funzione o la natura dell’elemento, di immagazzinare dati o di arricchire il contenuto di significato.
La sintassi per un tag con attributi è la seguente:
<tag attributo1=”valore1″ attributo2=”valore2″>
Ecco un esempio concreto:
<input type=”email” name=”email” placeholder=”Inserisci il tuo indirizzo email…”>
Il tag “input” rappresenta in modo generico un elemento che permette agli utenti di inserire dati. Tuttavia, grazie agli attributi, possiamo precisare che stiamo richiedendo un indirizzo email (attraverso l’attributo “type”) e possiamo fornire un suggerimento all’utente tramite il testo del “placeholder”.
In sintesi, gli attributi:
- Sono costituiti da coppie chiave-valore, separate dal simbolo “=” (uguale).
- I valori sono generalmente racchiusi tra virgolette (” “), ma è possibile utilizzare anche singoli apici (‘ ‘).
- Vengono inseriti lasciando almeno uno spazio dopo il nome dell’elemento nel tag di apertura, o nell’unico tag nel caso di elementi non contenitori.
Nota: In situazioni rare, ad esempio quando il valore dell’attributo include già virgolette, è necessario utilizzare gli apici (ad esempio, data-nome='Luca "la roccia" Rossi').
Atrributi Comuni, Globali
Attributi Comuni, Global Attributes Nello standard HTML, esiste un insieme di attributi che possono essere applicati a tutti i tag. Questi attributi possono essere suddivisi principalmente in due categorie:
Attributi di Base (Core) Attributi per la Gestione degli Eventi
Gli Attributi Core includono quelli legati alla rappresentazione grafica degli elementi e alcuni aspetti dell’interfaccia utente. Ecco alcuni di quelli più rilevanti per il testo:
title: Fornisce informazioni che descrivono il contenuto dell’elemento. Il testo del titolo viene spesso visualizzato in un tooltip quando si passa il mouse sopra l’elemento.
lang: Specifica la lingua del contenuto. Ad esempio,
<p lang="it">ciao</p>indica che il testo è in italiano.
Altri attributi consentono la selezione e l’applicazione delle regole di stile per la presentazione grafica:
id: Associa un identificatore univoco all’elemento. Una volta assegnato un identificatore, non può essere utilizzato per altri elementi nella pagina.
class: Indica l’appartenenza dell’elemento a una o più “classi.” Questo è utile per applicare proprietà simili a tutti gli elementi di una classe. È possibile assegnare quante classi si desidera, separate da uno spazio. Ad esempio,
<p class="saluto testo-chiaro">ciao</p>ha due classi: “saluto” e “testo-chiaro.”style: Serve per assegnare proprietà grafiche (stili CSS) all’elemento. Questo tipo di assegnamento dei stili è noto come “stilizzazione inline.”
draggable: Può avere i valori “true” o “false” e determina se un elemento può essere trascinato per un’operazione di drag and drop.
Attributi come “id,” “class,” e “style” sono tra i più comuni e utilizzati.
Attributi per la Gestione degli Eventi
Gli attributi per la gestione degli eventi sono utilizzati per associare comportamenti specifici all’interfaccia utente in risposta a eventi specifici. Questi comportamenti sono rappresentati da funzioni JavaScript, come mostrato in questo esempio:
<a href="#" onclick="alert('ciao');">clicca qui</a> Nella pratica, spesso è preferibile evitare l’associazione diretta di comportamenti all’interno dei tag, ma in alcune situazioni, può comunque essere utile farlo.
Ecco alcuni attributi per la gestione degli eventi:
onclick: Rileva il click (o il tap) effettuato sull’elemento.
onload: Associa un comportamento all’avvenimento del caricamento completo dell’elemento.
onscroll: Attiva un comportamento in risposta allo scrolling della pagina.
ondrag: Si attiva quando inizia il trascinamento di un elemento indicato come “draggable=”true.”
Un elenco completo dei global attributes è disponibile sul sito del W3C.
Attributi “data-” (Data Attributes)
Lo standard HTML5 ha introdotto gli “attributi data-“, che consentono di includere informazioni aggiuntive all’interno dei tag, utili per la gestione del layout e il supporto dell’interfaccia utente.
In pratica, è possibile definire un attributo con il prefisso “data-“, seguito da un nome personalizzato (ad esempio, “data-cognome”) e assegnare ad esso un valore, proprio come si farebbe con gli altri attributi.
Supponiamo, ad esempio, di avere una lista di contatti e di voler mostrare l’indirizzo e il numero di telefono quando si passa sopra ai nomi nell’elenco. Possiamo associare queste informazioni a ciascun elemento della lista (<li>) tramite attributi “data-“, rendendo più agevole l’accesso a tali dati tramite JavaScript.
<ul id="elenco"> <li data-indirizzo="Piazza la lenza" data-telefono="3863535555">Luca</li> <li data-indirizzo="Via le mani dal naso" data-telefono="3164192342">Paolo</li> <li data-indirizzo="Largo la loggia" data-telefono="3213344314">Umberto</li> </ul> L’inclusione di tali attributi personalizzati non influisce sulla resa della pagina; il browser li ignorerà.