✅ Come inserire la password di input in HTML5

Sommario

Attributo parola d'ordine crea un input per l'immissione dei dati che quando l'utente li inserisce sarà rappresentato come punti o asterischi ("*") sullo schermo, il che rende difficile o impossibile per una terza parte leggere come vengono inseriti i dati nel modulo.
Questo attributo funziona insieme ad altri attributi che condivide anche con l'elemento testo di inputRicordiamo e vediamo quali sono condivisi da questo.

[colore = # 808080]Lunghezza massima: [/ color] Questo elemento non è nuovo in HTML5, tuttavia è molto utile poiché ci permette di limitare il numero massimo di caratteri che l'input accetta, un esempio è quando le nostre password devono contenere un massimo di caratteri, ad esempio 6 alfanumerici caratteri , mettiamo questo attributo con valore 6 e quando proviamo a inserire un settimo, semplicemente non verrebbe scritto.

[colore = # 808080]Modello: [/ color] La novità in HTML5 ci consente di inserire modelli di espressioni regolari in modo da poter aggiungere un nuovo livello di convalida senza utilizzare linguaggi aggiuntivi.

[colore = # 808080]Segnaposto: [/ color] Novità in HTML5, è un aiuto visivo che ci permette di inserire un testo che apparirà all'interno del testo di input mostrando un piccolo aiuto per l'utente, ad esempio se un input è per inserire la password, potremmo inserire come segnaposto “inserisci la tua password”, ovviamente aggiustando gli stili per far sembrare tutto esteticamente corretto.

[colore = # 808080]Sola lettura: [/ color] Questo attributo non è nuovo in HTML5, ci consente di impedire all'utente di inserire dati o modificare il contenuto del campo che ha questo attributo.

[colore = # 808080]Necessario: [/ color] Novità in HTML5, questo attributo ci permette di indicare che se l'input è vuoto, il form non deve essere ancora inviato, forzando così l'obbligatorietà della sua compilazione, in questo modo alziamo un altro livello di validazione.

[colore = # 808080]Dimensione: [/ color] Ci aiuta a specificare la larghezza dell'elemento di input, questo attributo non è nuovo, tuttavia è molto importante poiché ci aiuta a dare una migliore visuale del testo che l'utente deve inserire, oltre ad aiutarci esteticamente per creare campi di input omogenei, poiché possono essere tutti posizionati con una larghezza maggiore di quella che viene portata di default.

[colore = # 808080]Valore: [/ color] Non è nuovo in HTML5, questo attributo ci consente di inserire valori in un input, è diverso dal segnaposto poiché ciò che è in valore assegnato durante l'invio se fosse inviato come contenuto dell'elemento, è abbastanza utilizzato per riempire un modulo con contenuto che viene portato dal database quando utilizziamo un linguaggio server.

Dopo aver visto la teoria, vediamo un esempio pratico di essa:

Esempio

Patata dolce:

Parola d'ordine:

Frutta:

Invia voto

Come vediamo in questo caso usiamo l'attributo segnaposto per indicare che tipo di password ci aspettiamo, in questo modo guidiamo l'utente e riduciamo gli errori, una volta che l'elemento inizia a essere scritto, il testo del segnaposto viene sostituito con asterischi o con altri elementi che non fanno sapere che viene scritto.

INGRANDIRE

Un'altra importante precauzione che dobbiamo prendere è che sebbene non possiamo leggere ciò che scriviamo nel campo della password, quando lo riceviamo nella pagina che elaborerà detto modulo, il contenuto arriverà senza alcun tipo di crittografia, quindi sappiamo che i dati viaggia senza protezione, ad esempio se elaboriamo il modulo precedente riceveremmo questo:

Se vogliamo una maggiore sicurezza dobbiamo considerare l'utilizzo di server con protocolli sicuri come SSL / HTTPS Criptano le informazioni che inviano o usano linguaggi come Javascript per crittografare le informazioni prima che vengano inviate.
Con questo concludiamo questo tutorial passando attraverso il processo di creazione di moduli per l'inserimento di dati sensibili e conosciamo le implicazioni e le misure di sicurezza che dobbiamo adottare per preservare l'integrità dei dati che viaggiano da un modulo quando vogliamo che non sia leggibile con l'occhio nudo. .