Cum se introduce parola de intrare în HTML5

Cuprins

Atribut parola creează o intrare pentru introducerea datelor care, atunci când utilizatorul le introduce, va fi reprezentată ca puncte sau asteriscuri ("*") pe ecran, ceea ce face dificilă sau imposibilă pentru o terță parte să citească modul în care datele sunt introduse în formular.
Acest atribut funcționează împreună cu alte atribute pe care le partajează și elementului Introdu textulSă ne amintim și să vedem care dintre ele sunt împărtășite de acesta.
  • [culoare = # 808080]Lungime maxima: [/ color] Acest element nu este nou în HTML5, cu toate acestea este foarte util deoarece ne permite să limităm numărul maxim de caractere acceptate de intrare, un exemplu este atunci când parolele noastre trebuie să conțină maximum de caractere, de exemplu 6 alfanumerice caractere, punem acest atribut cu valoarea 6 și atunci când încercăm să introducem un al șaptelea, pur și simplu nu ar fi scris.
  • [culoare = # 808080]Model: [/ color] Nou în HTML5 ne permite să introducem modele de expresie regulată, astfel încât să putem adăuga un nou nivel de validare fără a utiliza limbi suplimentare.
  • [culoare = # 808080]Substituent: [/ color] Nou în HTML5, este un ajutor vizual care ne permite să introducem un text care va apărea în textul de intrare care arată un ajutor mic pentru utilizator, de exemplu, dacă o intrare este pentru introducerea parolei, am putea plasa ca substituent „introduceți parola”, bineînțeles ajustând stilurile pentru a face totul să pară estetic corect.
  • [culoare = # 808080]Citește numai: [/ color] Acest atribut nu este nou în HTML5, ne permite să facem utilizatorul să nu poată introduce date sau să editeze conținutul câmpului care are acest atribut.
  • [culoare = # 808080]Necesar: [/ color] Nou în HTML5, acest atribut ne permite să indicăm că, dacă intrarea este goală, formularul nu ar trebui trimis încă, forțând astfel caracterul obligatoriu al completării acestuia, în acest fel ridicăm un alt nivel de validare.
  • [culoare = # 808080]Mărimea: [/ color] Ne ajută să specificăm lățimea elementului de intrare, acest atribut nu este nou, totuși este foarte important, deoarece ne ajută să oferim o vizualizare mai bună a textului pe care utilizatorul trebuie să îl introducă, pe lângă faptul că ne ajută din punct de vedere estetic pentru a crea câmpuri de intrare omogene, deoarece toate pot fi plasate cu o lățime mai mare decât cea adusă în mod implicit.
  • [culoare = # 808080]Valoare: [/ color] Nu este nou în HTML5, acest atribut ne permite să plasăm valori la o intrare, este diferit de substituent, deoarece ceea ce este în valoare atribuit atunci când trimiteți dacă ar fi trimis ca conținut al elementului, este destul de folosit pentru a completa un formular cu conținut care este adus din baza de date atunci când folosim un limbaj de server.
După ce am văzut teoria, să vedem un exemplu practic al acesteia:
 Exemplu

Yam:

Parola:

Fructe:

Trimiteți votul

Cum vedem în acest caz, folosim atributul substituent pentru a indica ce tip de parolă așteptăm, în acest fel ghidăm utilizatorul și reducem erorile, odată ce elementul începe să fie scris, textul substituentului este înlocuit cu asteriscuri sau cu alte elemente care nu lasă să se știe că se scrie.

MARI

O altă precauție importantă pe care trebuie să o luăm este că, deși nu putem citi ceea ce scriem în câmpul de parolă, atunci când îl primim pe pagina care va procesa formularul menționat, conținutul va ajunge fără niciun tip de criptare, deci știm că datele călătorește fără protecție, de exemplu, dacă procesăm formularul anterior, am primi acest lucru:

Dacă dorim o securitate mai mare, trebuie să luăm în considerare utilizarea serverelor cu protocoale sigure precum SSL / HTTPS Criptează informațiile pe care le trimit sau folosesc limbi precum Javascript pentru a cripta informațiile înainte de a fi trimise.
Cu aceasta încheiem acest tutorial parcurgând procesul de creare a formularelor pentru introducerea datelor sensibile și cunoaștem implicațiile și măsurile de securitate pe care trebuie să le luăm pentru a păstra integritatea datelor care se deplasează dintr-un formular atunci când dorim să nu fie citite cu cu ochiul liber.

Vei ajuta la dezvoltarea site-ului, partajarea pagina cu prietenii

wave wave wave wave wave