✅ Как да поставите входна парола в HTML5

Съдържание

Атрибут парола създава вход за въвеждане на данни, който при въвеждане от потребителя ще бъде представен като точки или звездички ("*") на екрана, което затруднява или невъзможно за трета страна да прочете как се въвеждат данните във формуляра.
Този атрибут работи заедно с други атрибути, които също споделя с елемента въвеждане на текстНека си спомним и да видим кои са споделени от този.

[color = # 808080]Максимална дължина: [/ color] Този елемент не е нов в HTML5, но е много полезен, тъй като ни позволява да ограничим максималния брой знаци, които входът приема, пример е, когато нашите пароли трябва да съдържат максимум знаци, например 6 буквено -цифрови знаци, ние поставяме този атрибут със стойност 6 и когато се опитваме да въведем седмо, той просто няма да бъде записан.

[color = # 808080]Модел: [/ color] Ново в HTML5 ни позволява да въвеждаме шаблони за регулярни изрази, за да можем да добавим ново ниво на валидиране, без да използваме допълнителни езици.

[color = # 808080]Заместител: [/ color] Ново в HTML5, това е визуално помощно средство, което ни позволява да въведем текст, който ще се появи в рамките на въведения текст, показващ малка помощ за потребителя, например ако въвеждането е за въвеждане на паролата, можем да го поставим като заместител „въведете паролата си“, разбира се коригирайки стиловете, за да изглежда всичко естетически правилно.

[color = # 808080]Само за четене: [/ color] Този атрибут не е нов в HTML5, той ни позволява да накараме потребителя да не може да въвежда данни или да редактира съдържанието на полето, което има този атрибут.

[color = # 808080]Задължително: [/ color] Нов в HTML5, този атрибут ни позволява да посочим, че ако въвеждането е празно, формулярът все още не трябва да бъде изпратен, като по този начин се налага задължителният характер на неговото попълване, като по този начин повишаваме друго ниво на валидиране.

[color = # 808080]Размер: [/ color] Помага ни да уточним ширината на входния елемент, този атрибут не е нов, но е много важен, тъй като ни помага да дадем по -добра визуализация на текста, който потребителят трябва да въведе, освен че ни помага естетически за създаване на хомогенни полета за въвеждане, тъй като всички те могат да бъдат поставени с ширина по -голяма от тази, която се въвежда по подразбиране.

[color = # 808080]Стойност: [/ color] Не е нов в HTML5, този атрибут ни позволява да поставяме стойности на вход, той е различен от заместителя, тъй като това, което е в стойността, зададено при изпращане, ако би било изпратено като съдържание на елемента, е доста често се използва за попълване на формуляр със съдържание, което се пренася от базата данни, когато използваме сървърния език.

След като разгледахме теорията, нека видим практически пример за нея:

Пример

Ям:

Парола:

Плодове:

Изпратете гласуване

Как виждаме в този случай използваме атрибута заместител за да посочим какъв тип парола очакваме, по този начин насочваме потребителя и намаляваме грешките, след като елементът започне да се записва, текстът на заместителя се заменя със звездички или с други елементи, които не позволяват да се знае, че е се пише.

Увеличете

Друга важна предпазна мярка, която трябва да вземем, е, че макар да не можем да прочетем това, което пишем в полето за парола, когато я получим на страницата, която ще обработи посочения формуляр, съдържанието ще пристигне без никакъв вид криптиране, така че знаем, че данните пътува без защита, например, ако обработим предишната форма, ще получим това:

Ако искаме по -голяма сигурност, трябва да обмислим използването на сървъри със защитени протоколи като SSL / HTTPS Те криптират информацията, която изпращат, или използват езици като Javascript за криптиране на информацията, преди да бъде изпратена.
С това приключваме този урок, преминавайки през процеса на създаване на формуляри за въвеждане на чувствителни данни и знаем последиците и мерките за сигурност, които трябва да предприемем, за да запазим целостта на данните, които пътуват от формуляр, когато искаме те да не се четат с невъоръжено око ..