<input type="url">

Gli elementi <input type="url"> vengono utilizzati per consentire all'utente di immettere e modificare un URL.

Il valore di input viene convalidato automaticamente per garantire che sia vuoto o un URL formattato correttamente prima che il modulo possa essere inviato. Le pseudo-classi CSS :valid e :invalidvengono applicate automaticamente in modo appropriato per denotare visivamente se il valore corrente del campo è un URL valido o meno.

Nei browser che non supportano <input type="url">, un <input type="url"> torna ad essere <input type="text">.

Valore

L'attributo value di <input type="url"> contiene una stringa che viene automaticamente convalidata come conforme alla sintassi dell'URL. Più nello specifico, ci sono due possibili formati di valore che passeranno la convalida:

1. Una stringa vuota ("") che indica che l'utente non ha immesso un valore o che il valore è stato rimosso.
2. Un singolo URL assoluto correttamente formato. Ciò non significa necessariamente che l'indirizzo URL esista, ma almeno è formattato correttamente. In parole povere, questo significa urlscheme://restofurl.

Attributi aggiuntivi

Oltre agli attributi che operano su tutti gli elementi <input> indipendentemente dal loro tipo, gli <input type="url"> supportano i seguenti attributi.

list

I valori dell'attributo list sono quelli id di un elemento <datalist> che si trova nello stesso documento. <datalist> fornisce un elenco di valori predefiniti da suggerire all'utente per questo input. Eventuali valori nell'elenco che non sono compatibili con typenon sono inclusi nelle opzioni suggerite. I valori forniti sono suggerimenti, non requisiti: gli utenti possono selezionare da questo elenco predefinito o fornire un valore diverso.

maxlength

Il numero massimo di caratteri (come unità di codice UTF-16) che l'utente può inserire nel campo di ricerca. Deve essere un valore intero 0 o superiore. Se non viene specificato maxlength o viene specificato un valore non valido, il campo di ricerca non ha una lunghezza massima. Questo valore deve anche essere maggiore o uguale al valore di minlength.

minlegth

Il numero minimo di caratteri (come unità di codice UTF-16) che l'utente può inserire nel campo di ricerca. Deve essere un valore intero non negativo minore o uguale al valore specificato da maxlength. Se viene specificato no minlengtho viene specificato un valore non valido, l'input di ricerca non ha una lunghezza minima.

pattern

L'attributo pattern, quando specificato, è un'espressione regolare a cui il valore dell'input deve corrispondere affinché il valore superi la convalida del vincolo. Deve essere un'espressione regolare JavaScript valida, come utilizzata dal tipo RegExp e come documentato nella nostra guida sulle espressioni regolari ; il flag 'u' viene specificato durante la compilazione dell'espressione regolare, in modo che il modello venga trattato come una sequenza di punti di codice Unicode, anziché come ASCII. Nessuna barra in avanti deve essere specificata attorno al testo del modello.

Se il modello specificato non è specificato o non è valido, non viene applicata alcuna espressione regolare e questo attributo viene completamente ignorato.

placeholder

L'attributo placeholder è una stringa che fornisce un breve suggerimento all'utente sul tipo di informazioni previste nel campo. Dovrebbe essere una parola o una breve frase che dimostri il tipo di dati previsto, piuttosto che un messaggio esplicativo. Il testo non deve includere ritorni a capo o avanzamenti di riga.

Se il contenuto del controllo ha una direzionalità ( LTR o RTL ) ma deve presentare il segnaposto nella direzionalità opposta, puoi utilizzare i caratteri di formattazione dell'algoritmo bidirezionale Unicode per sovrascrivere la direzionalità all'interno del segnaposto.

readonly

Un attributo booleano che, se presente, significa che questo campo non può essere modificato dall'utente. Tuttavia, value può ancora essere modificato dal codice JavaScript impostando direttamente la proprietà HTMLInputElement value.

size

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 font.

Questo non pone 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 maxlength.

spellcheck

spellcheck è un attributo globale che viene utilizzato per indicare se abilitare o meno il controllo ortografico per un elemento. Può essere utilizzato su qualsiasi contenuto modificabile, ma qui consideriamo le specifiche relative all'uso di spellcheck su elementi <input>. I valori ammessi per spellcheck sono:

false

Disabilita il controllo ortografico per questo elemento.

true

Disabilita il controllo ortografico per questo elemento.

"" (stringa vuota) o nessun valore

Segui il comportamento predefinito dell'elemento per il controllo ortografico. Questo può essere basato sull'impostazione di un genitore spellcheck o su altri fattori.

Un campo di input può avere il controllo ortografico abilitato se non ha l' attributo di sola lettura impostato e non è disabilitato.

Il valore di spellcheck restituito dalla lettura potrebbe non riflettere lo stato effettivo del controllo ortografico all'interno di un controllo, se le preferenze dell'interprete prevalgono sull'impostazione.

Attributi non standard

I seguenti attributi non standard sono disponibili anche su alcuni browser. Come regola generale, dovresti evitare di usarli a meno che non possa essere aiutato.

autocorrect

Estensione di Safari, l'attributo autocorrect è 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 e l'elaborazione delle sostituzioni di testo, se configurate.

off

Disabilita la correzione automatica e le sostituzioni del testo.

Utilizzo di <input type="url">

Quando crei un <input type="url"> con type con il valore corretto, urlottieni la convalida automatica che il testo inserito sia almeno nella forma corretta per essere potenzialmente un URL legittimo. Questo può aiutare a evitare i casi in cui l'utente digita erroneamente l'indirizzo del proprio sito Web o ne fornisce uno non valido.

È importante, tuttavia, notare che ciò non è sufficiente per garantire che il testo specificato sia un URL effettivamente esistente, corrispondente all'utente del sito o accettabile in altro modo. Garantisce che il valore del campo sia formattato correttamente per essere un URL.

Nota: un utente può armeggiare con il tuo HTML dietro le quinte, quindi il tuo sito non deve utilizzare questa convalida per motivi di sicurezza. È necessario verificare l'URL sul lato server di qualsiasi transazione in cui il testo fornito potrebbe avere implicazioni di sicurezza di qualsiasi tipo.

Attualmente, tutti i browser che implementano questo elemento lo implementano come campo di input di testo standard con funzionalità di convalida di base. Nella sua forma più semplice, un input URL può essere implementato in questo modo:

<input id="myURL" name="myURL" type="url">

Si noti che è considerato valido quando è vuoto e quando viene inserito un unico indirizzo URL formattato in modo valido, ma per il resto non è considerato valido. Aggiungendo l'attributo required, sono consentiti solo URL correttamente formati; l'input non è più considerato valido quando vuoto.

Non c'è niente di magico in corso qui. L'invio di questo modulo comporterebbe l'invio al server dei seguenti dati: myURL=http%3A%2F%2Fwww.example.com. Nota come viene eseguito l'escape dei caratteri se necessario.

Convalida

Sono disponibili due livelli di convalida del contenuto per urlgli input. Innanzitutto, c'è il livello standard di convalida offerto a tutti gli <input> i messaggi di posta elettronica, che garantisce automaticamente che i contenuti soddisfino i requisiti per essere un URL valido. Ma c'è anche la possibilità di aggiungere filtri aggiuntivi per garantire che le tue esigenze specifiche siano soddisfatte, se ne hai.

Avvertenza: la convalida del modulo HTML non sostituisce gli script che assicurano che i dati inseriti siano nel formato corretto. È fin troppo facile per qualcuno apportare modifiche all'HTML che consentano loro di ignorare la convalida o rimuoverlo completamente. È anche possibile che qualcuno ignori 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).