<input type="password">

Gli elementi <input> di tipo password consentono all'utente di immettere una password in modo sicuro.

L'elemento viene presentato come un controllo dell'editor di testo normale a una riga in cui il testo è oscurato in modo che non possa essere letto, in genere sostituendo ogni carattere con un simbolo come l'asterisco ("*") o un punto ("•" ). Questo carattere varia a seconda dell'agente utente e del sistema operativo.

Il comportamento preciso del processo di immissione può variare da browser a browser. Alcuni browser visualizzano il carattere digitato per un momento prima di oscurarlo, mentre altri consentono all'utente di attivare e disattivare la visualizzazione del testo normale. Entrambi gli approcci aiutano un utente a verificare di aver inserito la password prevista, il che può essere particolarmente difficile sui dispositivi mobili.

Gli attributi di questo elemento includono gli attributi globali.

Valore

L'attributo value contiene una stringa il cui valore è il contenuto corrente del controllo di modifica del testo utilizzato per immettere la password. Se l'utente non ha ancora inserito nulla, questo valore è una stringa vuota ( ""). Se la proprietà required è specificata, la casella di modifica della password deve contenere un valore diverso da una stringa vuota per essere valida.

Se l'attributo pattern è specificato, il contenuto di un controllo password è considerato valido solo se il valore supera la convalida.

Attributi aggiuntivi

Oltre agli attributi che operano su tutti gli elementi <input> indipendentemente dal loro tipo, gli input del campo password supportano i seguenti attributi.

maxlength

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

minlength

Il numero minimo di caratteri (come unità di codice UTF-16) che l'utente può inserire nel campo di immissione della password. Deve essere un valore intero non negativo minore o uguale al valore specificato da maxlength. Se non viene specificato minlength o viene specificato un valore non valido, la password immessa 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.

L'uso di un modello è fortemente raccomandato per l'immissione di password, al fine di garantire che le password valide che utilizzano un vasto assortimento di classi di caratteri siano selezionate e utilizzate dagli utenti. Con un modello, puoi imporre regole maiuscole e minuscole, richiedere l'uso di un certo numero di cifre e/o caratteri di punteggiatura e così via.

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 che imposta direttamente il valore della 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.

Utilizzo dell'immissione di password

Le caselle di immissione della password generalmente funzionano esattamente come le altre caselle di immissione di testo; la differenza principale è l'oscuramento del contenuto per impedire alle persone vicine all'utente di leggere la password.

Qui vediamo l'immissione della password più semplice, con un'etichetta stabilita utilizzando l'elemento <label>.

<label for="userPassword">Password:</label>
<input id="userPassword" type="password">

Convalida

Se l'applicazione prevede restrizioni sui set di caratteri o qualsiasi altro requisito per il contenuto effettivo della password immessa, è possibile utilizzare l'attributo pattern per stabilire un'espressione regolare da utilizzare per garantire automaticamente che le password soddisfino tali requisiti.

In questo esempio sono validi solo i valori costituiti da almeno quattro e non più di otto cifre esadecimali.

<label for="hexId">Hex ID:</label>
  <input id="hexId" type="password" pattern="[0-9a-fA-F]{4,8}"
  title="Inserisci un ID formato da 4-8 cifre esadecimali"
  autocomplete="new-password">

Liste utili

• Attributi
• Attributi globali
• Elementi