Ultimo aggiornamento: 08.04.2016
Quindi, abbiamo vari elementi a nostra disposizione che possiamo utilizzare sul modulo. Possiamo inserire valori diversi in essi. Tuttavia, non è raro che gli utenti inseriscano valori non del tutto corretti: ad esempio sono previsti numeri, ma l'utente inserisce lettere e così via. E per prevenire e convalidare input non validi, HTML5 ha un meccanismo di convalida.
Il vantaggio dell'utilizzo della convalida in HTML5 è che dopo un input errato, l'utente può ricevere immediatamente un messaggio di errore e apportare le modifiche appropriate ai dati inseriti.
Per creare la convalida sugli elementi del modulo HTML5, vengono utilizzati una serie di attributi:
richiesto : richiede l'immissione di un valore. Per textarea, seleziona, inserisci gli elementi (di tipo testo, password, checkbox, radio, file, datetime-local, date, month, time, week, number, email, url, search, tel)
min e max : minimo e massimo valori consentiti. Per un elemento di input con tipo datetime-local, data, mese, ora, settimana, numero, intervallo
pattern : specifica il pattern a cui deve corrispondere l'input. Per un elemento di input con tipo testo, password, email, url, ricerca, tel
attributo richiesto
L'attributo obbligatorio richiede che sia presente un valore:
Se non inseriamo alcun dato in questi campi, lasciandoli vuoti, e clicchiamo sul pulsante di invio, il browser ci visualizzerà messaggi di errore e i dati non verranno inviati al server:
A seconda del browser, la visualizzazione del messaggio potrebbe essere leggermente diversa. Inoltre, i bordi di un campo di input errato possono essere dipinti di rosso. Ad esempio, il comportamento durante l'invio di messaggi vuoti in Firefox:
attributi massimi e minimi
Gli attributi max e min vengono utilizzati per limitare l'intervallo dei valori di input:
attributo del modello
L'attributo pattern specifica il pattern a cui i dati devono corrispondere. Per definire un template si usa il cosiddetto linguaggio. Considera gli esempi più semplici:
Qui, l'espressione regolare \+\d-\d(3)-\d(3)-\d(4) viene utilizzata per inserire il numero di telefono. Significa che il primo elemento del numero deve essere un segno più +. L'espressione \d rappresenta qualsiasi cifra compresa tra 0 e 9. \d(3) significa tre cifre consecutive e \d(4) significa quattro cifre consecutive. Cioè, questa espressione corrisponderà a un numero di telefono nel formato "+1-234-567-8901".
Se inseriamo dati che non corrispondono a questo schema e facciamo clic su Invia, il browser visualizzerà un errore:
Disabilitazione della convalida
La convalida non è sempre auspicabile, a volte è necessario disattivarla. E in questo caso, possiamo utilizzare l'attributo novalidate sull'elemento form o l'attributo formnovalidate sul pulsante di invio:
Nota: Poiché un campo di sola lettura non può avere un valore, obbligatorio non ha alcun effetto sugli input con l'attributo di sola lettura anche specificato.
taglia
L'attributo size è un valore numerico che indica quanti caratteri deve essere largo il campo di input. Il valore deve essere un numero maggiore di zero e il valore predefinito è 20. Poiché le larghezze dei caratteri variano, questo può essere esatto o meno e non dovrebbe essere considerato tale; l'input risultante potrebbe essere più stretto o più largo del numero di caratteri specificato, a seconda dei caratteri e del carattere (impostazioni del carattere in uso).
Questo fa non impostare un limite al numero di caratteri che l'utente può inserire nel campo. Specifica solo approssimativamente quanti possono essere visti alla volta. Per impostare un limite superiore alla lunghezza dei dati di input, utilizzare l'attributo.
Attributi non standard
I seguenti attributi non standard sono disponibili per i campi di immissione del numero di telefono. Come regola generale, dovresti evitare di usarli a meno che non possa essere aiutato.
| attributo | Descrizione |
|---|---|
| Se consentire o meno la correzione automatica durante la modifica di questo campo di input. Solo Safari. | |
| Una stringa che indica il tipo di azione che verrà eseguita quando l'utente preme il tasto Invio o Invio durante la modifica del campo; questo viene utilizzato per determinare un'etichetta appropriata per quella chiave su a tastiera virtuale. Firefox per Android solo. |
correzione automatica
Un'estensione Safari, l'attributo di correzione automatica è una stringa che indica se attivare o meno la correzione automatica mentre l'utente sta modificando questo campo. I valori ammessi sono:
On Abilita la correzione automatica degli errori di battitura, nonché l'elaborazione delle sostituzioni di testo, se configurate. off Disabilita la correzione automatica e la sostituzione del testo.
suggerimento di mozazione
Un'estensione Mozilla, supportata da Firefox per Android, che fornisce un suggerimento su quale tipo di azione verrà intrapresa se l'utente preme il tasto Invio o Invio durante la modifica del campo. Queste informazioni vengono utilizzate per decidere quale tipo di etichetta utilizzare sul tasto Invio della tastiera virtuale.
I valori consentiti sono: go , done , next , search e send . Il browser decide, utilizzando questo suggerimento, quale etichetta mettere sul tasto Invio.
Utilizzo degli ingressi telefonici
I numeri di telefono sono un tipo di dati molto comunemente raccolto su la rete. Quando crei qualsiasi tipo di registrazione o sito di e-commerce, ad esempio, dovrai probabilmente chiedere all'utente un numero di telefono, sia per motivi commerciali che per contatti di emergenza. Data la frequenza con cui vengono inseriti i numeri di telefono, "è un peccato che una soluzione "taglia unica" per convalidare i numeri di telefono non sia pratica.
Fortunatamente, puoi considerare i requisiti del tuo sito e implementare tu stesso un livello di convalida appropriato. Vedi sotto per i dettagli.
tastiere personalizzate
Uno dei principali vantaggi di è che fa sì che i browser mobili visualizzino una tastiera speciale per l'inserimento dei numeri di telefono. Ad esempio, ecco che cosa le tastiere sembrano su un paio di dispositivi.
| Firefox per Android | WebKit iOS (Safari/Chrome/Firefox) |
|---|---|
 |
Un semplice ingresso telefonico
Nella sua forma più semplice, un input tel può essere implementato in questo modo:
Non c'è niente di magico in corso qui. Una volta inviati al server, i dati di input sopra riportati sarebbero rappresentati, ad esempio, come telNo=+12125553151 .
Segnaposto
A volte è utile offrire un suggerimento contestuale su quale forma dovrebbero assumere i dati di input. Questo può essere particolarmente importante se la pagina il design non offre etichette descrittive per ogni elemento viene utilizzato per creare controlli interattivi per moduli basati sul Web al fine di accettare dati dall'utente; è disponibile un'ampia varietà di tipi di dati di input e widget di controllo, a seconda del dispositivo e dell'utente agente."> . Qui è dove segnaposto Si accomodi. Un segnaposto è un valore che dimostra la forma che il valore dovrebbe assumere presentando un esempio di valore valido, che viene visualizzato all'interno della casella di modifica quando il valore dell'elemento è "". ; se la casella viene svuotata, il segnaposto riappare.
Qui abbiamo un input tel con il segnaposto 123-4567-8901 . Nota come il segnaposto scompare e riappare mentre modifichi il contenuto del campo di modifica.
Controllo della dimensione dell'input
Puoi controllare non solo la lunghezza fisica della casella di input, ma anche la lunghezza minima e massima consentita per il testo di input stesso.
dimensione dell'elemento di input fisico
La dimensione fisica della casella di input può essere controllata utilizzando l'attributo size. Con esso, puoi specificare il numero di caratteri che la casella di input può visualizzare alla volta. In questo esempio, ad esempio, la casella di modifica tel è larga 20 caratteri:
lunghezza del valore dell'elemento
La dimensione è separata dal limite di lunghezza sul numero di telefono inserito. È possibile specificare una lunghezza minima, in caratteri, per il numero di telefono inserito utilizzando l'attributo minlength; allo stesso modo, utilizzare maxlength per impostare la lunghezza massima del numero di telefono inserito.
L'esempio seguente crea una casella di immissione di un numero di telefono di 20 caratteri, che richiede che il contenuto non sia inferiore a 9 caratteri e non superiore a 14 caratteri.
Offrire valori suggeriti
Facendo un ulteriore passo avanti, puoi fornire un elenco di valori di numero di telefono predefiniti da cui l'utente può selezionare. A tale scopo, utilizzare l'attributo list. Ciò non limita l'utente a queste opzioni, ma consente loro di selezionare più rapidamente i numeri di telefono di uso comune. Ciò offre anche suggerimenti per il completamento automatico. L'attributo list specifica l'ID di un elemento contiene un insieme di
Con l'elemento contiene un set di
Ecco uno screenshot di come potrebbe essere:
Convalida
Come abbiamo già accennato in precedenza, è abbastanza difficile fornire una soluzione di convalida lato client valida per tutti per i numeri di telefono. Quindi cosa possiamo fare? Consideriamo alcune opzioni.
Importante: Modulo HTML la convalida è non un sostituto degli script lato server che assicurano che i dati inseriti siano nel formato corretto prima che vengano consentiti nel database. È troppo facile per qualcuno apportare modifiche all'HTML che consentano loro di ignorare la convalida o di rimuoverlo completamente. È anche possibile che qualcuno ignori semplicemente completamente il tuo HTML e invii i dati direttamente al tuo server. Se il codice lato server non riesce a convalidare i dati che riceve, potrebbe verificarsi un disastro quando nel database vengono immessi dati formattati in modo errato (o dati troppo grandi, di tipo errato e così via).
Fare numeri di telefono obbligatori
Puoi fare in modo che un input vuoto non sia valido e non venga inviato al server utilizzando l'attributo richiesto. Ad esempio, utilizziamo questo HTML:
E includiamo il seguente CSS per evidenziare le voci valide con un segno di spunta e le voci non valide con una crocetta:
Div ( margin-bottom: 10px; position: relative; ) input ( width: 100px; ) input + span ( padding-right: 30px; ) input:invalid+span:after ( position: absolute; content: "✖"; padding -left: 5px; color: #8b0000; ) input:valid+span:after ( position: absolute; content: "✓"; padding-left: 5px; color: #009000; )
L'output è simile a questo:
convalida del modello
Se si desidera limitare ulteriormente i numeri inseriti in modo che anche loro debbano conformarsi a uno schema specifico, è possibile utilizzare l'attributo pattern, che prende come valore un'espressione regolare a cui i valori inseriti devono corrispondere.
In questo esempio useremo lo stesso CSS di prima, ma il nostro HTML è cambiato in questo modo:
Div ( margin-bottom: 10px; position: relative; ) input ( width: 100px; ) input + span ( padding-right: 30px; ) input:invalid+span:after ( position: absolute; content: "✖"; padding -left: 5px; color: #8b0000; ) input:valid+span:after ( position: absolute; content: "✓"; padding-left: 5px; color: #009000; )
notare come il valore inserito viene segnalato come non valido a meno che il pattern xxx-xxx-xxxx non sia abbinato; per esempio, 41-323-421 "non sarà accettato. Neanche 800-MDN-ROCKS. Tuttavia, 865-555-6502 sarà accettato. Questo schema particolare è ovviamente utile solo per alcune località - in una vera applicazione tu" d probabilmente è necessario variare il modello utilizzato a seconda della locale dell'utente.
Esempi
In questo esempio, presentiamo una semplice interfaccia con un elemento che rappresenta un controllo che fornisce un menu di opzioni">
Ogni input ha un attributo segnaposto per mostrare un suggerimento agli utenti vedenti su cosa inserire, uno schema per imporre un numero specifico di caratteri per la sezione desiderata e un attributo aria-label per contenere un suggerimento da leggere allo screen reader utenti su cosa inserirvi.
Il JavaScript è relativamente semplice: contiene un gestore di eventi onchange che, quando il
Var selectElem = document.querySelector("select"); var inputElems = document.querySelectorAll("input"); selectElem.onchange = function() ( for(var i = 0; i< inputElems.length; i++) { inputElems[i].value = ""; } if(selectElem.value === "noi") { inputElems.parentNode.style.display = "inline"; inputElems.placeholder = "prefisso"; inputElems.pattern = "{3}"; inputElems.placeholder = "Prima parte"; inputElems.pattern = "{3}"; inputElems.setAttribute("aria-label","First part of number"); inputElems.placeholder = "seconda parte"; inputElems.pattern = "{4}"; inputElems.setAttribute("aria-label","Second part of number"); } else if(selectElem.value === "UK") { inputElems.parentNode.style.display = "none"; inputElems.placeholder = "prefisso"; inputElems.pattern = "{3,6}"; inputElems.placeholder = "numero locale"; inputElems.pattern = "{4,8}"; inputElems.setAttribute("aria-label","Local number"); } else if(selectElem.value === "Germania") { inputElems.parentNode.style.display = "inline"; inputElems.placeholder = "prefisso"; inputElems.pattern = "{3,5}"; inputElems.placeholder = "Prima parte"; inputElems.pattern = "{2,4}"; inputElems.setAttribute("aria-label","First part of number"); inputElems.placeholder = "seconda parte"; inputElems.pattern = "{4}"; inputElems.setAttribute("aria-label","Second part of number"); } }
L'esempio si presenta così:
Si tratta di un'idea interessante, che va a mostrare una potenziale soluzione al problema della gestione dei numeri telefonici internazionali. Ovviamente dovresti estendere l'esempio per fornire il modello corretto potenzialmente per ogni paese, il che richiederebbe molto lavoro e non ci sarebbe comunque alcuna garanzia infallibile che gli utenti inseriscano i loro numeri correttamente.
Ti viene da chiederti se vale la pena affrontare tutti questi problemi sul lato client, quando puoi semplicemente consentire all'utente di inserire il proprio numero nel formato che desidera sul lato client e quindi convalidarlo e disinfettarlo sul server. Ma questa scelta spetta a te.
Div ( margin-bottom: 10px; position: relative; ) input ( width: 100px; ) input + span ( padding-right: 30px; ) input:invalid+span:after ( position: absolute; content: "✖"; padding -left: 5px; color: #8b0000; ) input:valid+span:after ( position: absolute; content: "✓"; padding-left: 5px; color: #009000; )
Specifiche
| Specifica | Stato | Commento | |||||||
|---|---|---|---|---|---|---|---|---|---|
| Standard di vita HTML La definizione di" " in quella specifica. | musica lirica | safari | visualizzazione web Android | Chrome per Android | Edge Mobile | Firefox per Android | Opera per Android | Safari su iOS | Samsung Internet |
| digita = "tel" | Supporto completo per ChromeSì | Supporto completo per Edge Sì | Supporto completo per FirefoxSì | IE Pieno supporto 10 |
Questa raccolta di utili snippet HTML5 può aiutarti a migliorare il tuo sito.
Completamento automatico nei campi di testo
Utilizzando l'elemento datalist HTML5, puoi creare un campo di testo a completamento automatico. Molto comodamente!Campi di inserimento e-mail, URL e tel
HTML5 ha introdotto molti nuovi tipi per i campi di input, inclusi email , url e tel . Ti permettono di scrivere di più bellissimo codice, esegui tutta la convalida del contenuto per te e fai anche in modo che i browser mobili visualizzino una tastiera touch con pulsanti speciali (come @ e .com) quando compili questi campi.
Modelli per la corrispondenza dei campi modulo con un'espressione regolare
In precedenza, dovevi utilizzare JavaScript per convalidare i contenuti sul front-end. Ora, con l'attributo pattern HTML5, puoi semplicemente specificare un'espressione regolare che deve corrispondere all'input!Menu contestuale personalizzato
HTML5 ti consente di aggiungere elementi a menù contestuale(questo è lo stesso menu che appare quando fai clic con il pulsante destro del mouse da qualche parte nella tua pagina).Al momento in cui scrivo, l'elemento ContextMenu è compatibile solo con Firefox, ma si spera che altri browser aggiungano presto il supporto per esso.
Sì, puoi fare clic con il pulsante destro del mouse proprio qui.
Video in HTML5, con un Flash Player di fallback.
Una delle più grandi novità di HTML5 è sicuramente la sua capacità di riprodurre video senza utilizzare Flash. Ma per i vecchi browser non compatibili con HTML5, dovresti implementare un flash player come fallback. IN prossimo esempio mostra come incorporare video mp4 e ogv in HTML5, con un riproduttore di riserva per i browser meno recenti.Elementi nascosti in HTML5
HTML5 ha introdotto l'attributo nascosto, che può essere applicato a qualsiasi elemento. Il suo effetto è simile alla proprietà CSS display:none.Non vedrai questo testo
Messa a fuoco automatica per i campi di testo
L'attributo autofocus consente di impostare lo stato attivo su un elemento specifico al caricamento della pagina. Utile, ad esempio, per pagine di ricerca, autorizzazione o registrazione.Precaricamento in HTML5
Jean-Baptiste Jung ha scritto del precaricamento in HTML5. In breve, questo è un modo semplice per notificare al browser quali risorse potrebbero essere necessarie a breve, in modo che le scarichi in anticipo (ad esempio, immagini caricate da Ajax). Il codice seguente implementa il precaricamento dell'immagine.Riproduci file audio in HTML5
HTML5 può riprodurre video e ovviamente può anche riprodurre file audio, ad esempio in formato mp3. Il codice seguente implementa un lettore audio minimalista ma funzionale.Il tag più comunemente usato nei moduli è . Non ha un tag di chiusura. Tutte le informazioni necessarie al browser per elaborare sono contenute direttamente nel tag ed è impostato utilizzando vari attributi. Semantica varia notevolmente a seconda del valore del suo attributo genere.
Attributi dei tag
type L'attributo principale che specifica il tipo dell'elemento. Se l'attributo non è specificato, viene utilizzato il valore predefinito. testo.Possibili valori:
Non tutti i browser supportano i tipi aggiunti in HTML5.
Se il browser non supporta uno dei nuovi tipi, presumerà che sia un . Come organizzare il supporto per i browser meno recenti è descritto utilizzando la data come esempio.
Autocomplete="off" Disabilita il completamento automatico per campo dato. Molto utile per i campi di input per codici monouso, captcha, ecc. .setAttribute("completamento automatico","off"); autofocus Riceve automaticamente lo stato attivo al caricamento della pagina. Il valore può essere impostato in tre modi: ...
...
...
Esempio di emulazione della proprietà di messa a fuoco automatica per browser meno recenti. disabled Rende l'elemento non disponibile. Gli elementi non disponibili non vengono inviati al server. nome Il nome del campo. Ogni campo di input che crei deve avere un proprio nome univoco, altrimenti lo script non determinerà a quali campi appartengono i valori risultanti. Naturalmente, il nome del campo di input deve corrispondere al nome descritto per esso nel programma di elaborazione. valore Il valore predefinito del campo o dell'etichetta sul pulsante. size La dimensione del campo tipo. maxlength Il limite al numero di caratteri che possono essere inseriti in un campo di tipo . readonly="readonly" o "" Impedisce la modifica dell'elemento. obbligatorio Verifica automaticamente se il campo è compilato.
Per evidenziare un campo obbligatorio compilato correttamente, puoi utilizzare la seguente costruzione di stile: min Il valore numerico minimo nel campo del tipo numero. max Il valore numerico massimo nel campo del tipo numero. step Il passaggio per modificare il numero nel campo del tipo numero. modello Modello del campo di immissione. Verifica della correttezza dell'inserimento dei dati. Modelli di esempio per il modello di input del modulo html5. segnaposto Il testo del suggerimento nel campo del modulo, che scompare automaticamente quando il campo diventa attivo.
Esempio di impostazione dello stile del suggerimento:
In IE e Firefox (fino alla versione 18) segnapostoè considerata una pseudo-classe e, nel resto, uno pseudo-elemento.
RISULTATO:
Elenco Un elenco di opzioni che possono essere selezionate durante la digitazione in una casella di testo.
Questo elenco è inizialmente nascosto e diventa disponibile quando il campo riceve lo stato attivo o quando viene digitato del testo.
Tipi di elementi INPUT
pulsante
Pulsante PULSANTEè destinato a quei casi in cui è necessario eseguire uno script. Cioè, un evento è appeso al pulsante Al clic e viene chiamata la funzione richiesta. Attributo valore imposta la didascalia per il pulsante. Attributo al clic specifica un gestore JavaScript che viene chiamato quando si fa clic sul pulsante. Attributo nome serve per la denominazione JavaScript del pulsante (non passato al server).
Esempio
RISULTATO:
pulsante INVIA
Questo pulsante serve per inviare un modulo. Nella maggior parte dei browser, sembra quasi indistinguibile da un pulsante. Di per sé non viene trasmesso, ma serve solo per il controllo.
Attributo al clic per pulsante INVIA praticamente non utilizzato, in quanto è meglio utilizzare un gestore di eventi alla consegna, specificato nel tag . Del resto per trasferire i dati inseriti nel form, nel caso generale, non è affatto necessario cliccare sul pulsante INVIA. Puoi semplicemente premere il tasto sulla tastiera ACCEDERE, mentre ci si trova in qualsiasi campo di input di testo. Questo trasferirà i dati.
Esempio
RISULTATO:
Attributo valore offre alcuni vantaggi quando si utilizza più di un pulsante dati. In questo caso, in base al valore della variabile ricevuta, lo script sarà in grado di determinare come elaborare ulteriormente le informazioni ricevute.
Esempio
RISULTATO:
Attributo non validare può essere utilizzato per impedire la convalida dei valori del modulo.
Esempio
RISULTATO:
Pulsante di reset
Questo è il pulsante di cancellazione del modulo. Quando vengono premuti, tutti gli elementi modificati tornano al loro valore predefinito. È usato abbastanza raramente. Tuttavia, in alcuni casi può essere molto utile.
Suggerimento: fai attenzione quando scegli un'etichetta per pulsanti RIPRISTINA. Abbastanza visivo (e, soprattutto, intuitivo anche per una teiera di teiere) sarebbe qualcosa come "Cancella", "Ricomincia", "Elimina input", ecc. In generale, è necessario che l'utente non abbia ombra di dubbio sullo scopo di questa chiave.
Esempio
RISULTATO:
campo di immissione TESTO
Il campo di immissione del testo viene utilizzato più spesso nei moduli. Inoltre, può essere giustamente considerato l'elemento principale e più importante delle forme. Questo tipo è utilizzato dal tag
per impostazione predefinita, può essere omesso per visualizzare un campo di testo. Tuttavia, se è necessario modificare lo stile del selettore ingresso, quindi l'attributo digita = "testo" non può essere saltato.
Nome campo fornito dall'attributo nome, è sempre obbligatorio, perché in base a questo parametro il browser passa la coppia nome=valore allo script.
Esempio
RISULTATO:
Il testo Ivanov viene inserito nel campo generato come valore iniziale. Se l'utente non apporta modifiche o fa clic sul pulsante, il valore Ivanov verrà inviato allo script come cognome dell'utente.
NUMERO campo di immissione
Il campo è destinato all'immissione di numeri. La parte frazionaria durante l'immissione può essere separata sia da un punto (2.5) che da una virgola (2.5). Se l'utente inserisce lettere, il modulo non verrà inviato al server.
Esempio
RISULTATO:
È possibile impostare il valore minimo, massimo del campo e la fase di modifica del numero. Il valore del passaggio può essere positivo o negativo, ma deve essere maggiore di 0. Se il numero immesso nel campo non soddisfa i limiti specificati, l'invio al server non avverrà.
Esempio
RISULTATO:
Per impostare qualsiasi passaggio, utilizzare passo = "qualsiasi".
Esempio
RISULTATO:
Campo numero viene visualizzato in modo diverso: alcuni browser mostrano sempre le frecce, altri le mostrano solo quando si passa il mouse o si riceve lo stato attivo.
Campo nascosto NASCOSTO
Questo è un tipo speciale (nascosto). campo di testo. Se lo stesso script gestisce diversi moduli, puoi specificare un ID nel campo nascosto di ogni modulo per identificare con quale modulo hai a che fare.
Esempio
Il browser non visualizza il campo nascosto, sebbene possa essere trovato impostando il browser sulla visualizzazione HTML e analizzando il testo della pagina Web. I campi nascosti sono utili quando si desidera fornire le informazioni necessarie per uno script, ma non si desidera che l'utente possa modificarle. Tuttavia, tieni presente che un utente esperto può salvare il modulo in un file, modificarlo e quindi inviare il modulo modificato al server. Pertanto, non fare affidamento su campi nascosti al fine di fornire una qualche forma di protezione.
Esempio
Lo script riceverà una variabile denominata FormVersion, a cui verrà assegnato il valore 1.2. Queste informazioni possono essere utilizzate per determinare come vengono elaborate altre informazioni ricevute dal modulo. Se l'utente modifica questo valore, il programma di script potrebbe comportarsi in modo imprevisto.
Campo di immissione dell'e-mail
Per inserire più indirizzi, puoi aggiungere l'attributo multiplo, con una virgola (,) utilizzata per separare gli indirizzi
