✅ Hur man lägger in lösenord i HTML5

Innehållsförteckning

Attribut Lösenord skapar en ingång för datainmatning som när användaren anger dem kommer att representeras som prickar eller asterisker ("*") på skärmen, vilket gör det svårt eller omöjligt för en tredje part att läsa hur uppgif.webpterna matas in i formuläret.
Detta attribut fungerar tillsammans med andra attribut som det också delar med elementet mata in textLåt oss komma ihåg och se vilka som delas av den här.

[färg = # 808080]Maxlängd: [/ color] Detta element är inte nytt i HTML5, men det är mycket användbart eftersom det tillåter oss att begränsa det maximala antalet tecken som ingången accepterar, ett exempel är när våra lösenord måste innehålla högst tecken, till exempel 6 alfanumeriska tecken, sätter vi detta attribut med värde 6 och när vi försöker skriva in en sjunde skulle det helt enkelt inte skrivas.

[färg = # 808080]Mönster: [/ color] Nytt i HTML5 gör att vi kan ange vanliga uttrycksmönster så att vi kan lägga till en ny valideringsnivå utan att använda ytterligare språk.

[färg = # 808080]Platshållare: [/ color] Ny i HTML5, det är ett visuellt hjälpmedel som gör att vi kan skriva in en text som kommer att visas i inmatningstexten som visar en liten hjälp för användaren, till exempel om en ingång är för att ange lösenordet, kan vi placera som en platshållare "ange ditt lösenord", naturligtvis justera stilarna så att allt ser estetiskt korrekt ut.

[färg = # 808080]Läs bara: [/ color] Detta attribut är inte nytt i HTML5, det gör att vi kan göra att användaren inte kan ange data eller redigera innehållet i fältet som har detta attribut.

[färg = # 808080]Nödvändig: [/ color] Nytt i HTML5, det här attributet tillåter oss att indikera att om inmatningen är tom ska formuläret inte skickas in ännu, vilket tvingar den obligatoriska karaktären av dess fyllning, på så sätt höjer vi ytterligare en valideringsnivå.

[färg = # 808080]Storlek: [/ color] Det hjälper oss att ange bredden på inmatningselementet, detta attribut är inte nytt, men det är mycket viktigt eftersom det hjälper oss att ge en bättre bild av texten som användaren måste ange, förutom att hjälpa oss estetiskt för att skapa homogena inmatningsfält, eftersom de alla kan placeras med en bredd som är större än den som tas med som standard.

[färg = # 808080]Värde: [/ color] Det är inte nytt i HTML5, det här attributet tillåter oss att placera värden till en ingång, det skiljer sig från platshållaren eftersom det som är i värde tilldelas vid inlämning om det skulle skickas som innehåll i elementet, är ganska van att fylla i ett formulär med innehåll som hämtas från databasen när vi använder ett serverspråk.

Efter att ha sett teorin, låt oss se ett praktiskt exempel på det:

Exempel

Jams:

Lösenord:

Frukt:

Skicka in röst

Hur vi ser i det här fallet använder vi attributet Platshållare för att ange vilken typ av lösenord vi förväntar oss, på så sätt vägleder vi användaren och minskar fel, när elementet börjar skrivas ersätts platshållarens text med asterisker eller med andra element som inte låter bli känt att det håller på att skrivas.

FÖRSTORA

En annan viktig försiktighetsåtgärd som vi måste vidta är att även om vi inte kan läsa vad vi skriver i lösenordsfältet kommer innehållet att komma fram utan någon form av kryptering när vi får det på sidan som kommer att behandla nämnda formulär, så att vi vet att data reser utan skydd, till exempel om vi behandlar det tidigare formuläret skulle vi få detta:

Om vi vill ha större säkerhet måste vi överväga att använda servrar med säkra protokoll som t.ex. SSL / HTTPS De krypterar informationen de skickar eller använder språk som Javascript för att kryptera informationen innan den skickas.
Med detta avslutar vi denna handledning genom processen för att skapa formulär för inmatning av känslig data och vi känner till konsekvenserna och säkerhetsåtgärderna som vi måste vidta för att bevara integriteten för data som går från ett formulär när vi vill att det inte ska kunna läsas med det blotta ögat ..