Jak vložit vstupní heslo do HTML5

Atribut Heslo vytváří vstup pro zadávání dat, který když je uživatel zadá, bude na obrazovce zobrazen jako tečky nebo hvězdičky („*“), což třetí straně ztěžuje nebo znemožňuje přečíst si, jak jsou data zadávána do formuláře.
Tento atribut funguje ve spojení s dalšími atributy, které také sdílí s prvkem vstupní textPřipomeňme si a uvidíme, které z nich jsou sdíleny tímto.

• [barva = # 808080]Maximální délka: [/ color] Tento prvek není v HTML5 novinkou, je však velmi užitečný, protože nám umožňuje omezit maximální počet znaků, které vstup přijímá, příkladem je, když naše hesla musí obsahovat maximum znaků, například 6 alfanumerických znaků, dáme tento atribut hodnotou 6 a při pokusu o zadání sedmého by to prostě nebylo napsáno.

• [barva = # 808080]Vzor: [/ color] Novinka v HTML5 nám umožňuje zadávat vzory regulárních výrazů, abychom mohli přidat novou úroveň ověření bez použití dalších jazyků.

• [barva = # 808080]Zástupný symbol: [/ color] Novinka v HTML5, je to vizuální pomůcka, která nám umožňuje zadat text, který se objeví ve vstupním textu a zobrazuje malou nápovědu pro uživatele, například pokud je vstup pro zadání hesla, mohli bychom jej umístit jako zástupný symbol „zadejte heslo“, samozřejmě úpravou stylů, aby vše vypadalo esteticky správně.

• [barva = # 808080]Pouze ke čtení: [/ color] Tento atribut není v HTML5 novinkou, umožňuje nám, aby uživatel nemohl zadávat data nebo upravovat obsah pole, které tento atribut má.

• [barva = # 808080]Požadované: [/ color] Novinka v HTML5, tento atribut nám umožňuje naznačit, že pokud je vstup prázdný, formulář by ještě neměl být odeslán, což si vynutí povinnou povahu jeho vyplňování, čímž zvyšujeme další úroveň validace.

• [barva = # 808080]Velikost: [/ color] Pomáhá nám určit šířku vstupního prvku, tento atribut není nový, ale je velmi důležitý, protože nám pomáhá lépe vizualizovat text, který musí uživatel zadat, a navíc nám pomáhá esteticky vytvořit homogenní vstupní pole, protože všechna lze umístit o šířku větší, než jaká je ve výchozím nastavení zadána.

• [barva = # 808080]Hodnota: [/ color] Není to nové v HTML5, tento atribut nám umožňuje umístit hodnoty na vstup, liší se od zástupného symbolu, protože co je v hodnotě přiřazené při odesílání, pokud by bylo odesláno jako obsah prvku, je docela používané k vyplnění formuláře obsahem, který je přiveden z databáze, když používáme serverový jazyk.

Když jsme viděli teorii, podívejme se na její praktický příklad:

 Příklad
Jam:

Heslo:
Ovoce:
Odeslat hlas 

Jak v tomto případě vidíme, používáme atribut zástupný symbol abychom uvedli, jaký typ hesla očekáváme, tímto způsobem uživatele vedeme a omezíme chyby. Jakmile se prvek začne psát, text zástupného symbolu bude nahrazen hvězdičkami nebo jinými prvky, které nedají najevo, že se píše.

ZVĚTŠIT

Dalším důležitým preventivním opatřením, které musíme učinit, je to, že ačkoli nemůžeme přečíst to, co píšeme do pole pro heslo, když jej přijmeme na stránku, která zpracuje uvedenou formu, obsah dorazí bez jakéhokoli typu šifrování, takže víme, že data cestuje bez ochrany, například pokud zpracujeme předchozí formulář, obdržíme toto:

Pokud chceme větší zabezpečení, musíme zvážit použití serverů se zabezpečenými protokoly, jako je SSL / HTTPS Šifrují odesílané informace nebo používají jazyky jako Javascript k šifrování informací před jejich odesláním.
Tímto ukončujeme tento tutoriál procházející procesem vytváření formulářů pro zadávání citlivých dat a známe důsledky a bezpečnostní opatření, která musíme přijmout, abychom zachovali integritu dat, která cestují z formuláře, když chceme, aby nebyla čitelná pomocí pouhým okem …