Jak umieścić hasło wejściowe w HTML5?

Atrybut hasło tworzy dane wejściowe do wprowadzania danych, które po wprowadzeniu przez użytkownika będą reprezentowane na ekranie jako kropki lub gwiazdki („*”), co utrudnia lub uniemożliwia osobom trzecim odczytanie sposobu wprowadzania danych w formularzu.
Ten atrybut działa w połączeniu z innymi atrybutami, które również dzieli z elementem Wprowadź tekstZapamiętajmy i zobaczmy, które są wspólne dla tego.

• [kolor = # 808080]Maksymalna długość: [/ color] Ten element nie jest nowy w HTML5, jednak jest bardzo pomocny, ponieważ pozwala nam ograniczyć maksymalną liczbę znaków akceptowanych przez dane wejściowe, na przykład nasze hasła muszą zawierać maksymalnie znaki, na przykład 6 znaków alfanumerycznych znaków , przypisujemy temu atrybutowi wartość 6 i przy próbie wpisania siódmego po prostu nie zostanie on zapisany.

• [kolor = # 808080]Wzór: [/ color] Nowość w HTML5 pozwala nam wprowadzać wzorce wyrażeń regularnych, dzięki czemu możemy dodać nowy poziom walidacji bez użycia dodatkowych języków.

• [kolor = # 808080]Symbol zastępczy: [/ color] Nowość w HTML5, jest to pomoc wizualna pozwalająca nam wpisać tekst, który pojawi się w tekście wejściowym, pokazując małą pomoc dla użytkownika, na przykład jeśli dane wejściowe są do wprowadzenia hasła, możemy umieścić jako symbol zastępczy „wprowadź hasło”, oczywiście dostosowując style, aby wszystko wyglądało estetycznie.

• [kolor = # 808080]Tylko czytać: [/ kolor] Ten atrybut nie jest nowy w HTML5, pozwala nam uniemożliwić użytkownikowi wprowadzanie danych lub edycję zawartości pola, które ma ten atrybut.

• [kolor = # 808080]Wymagany: [/ color] Nowość w HTML5, ten atrybut pozwala nam wskazać, że jeśli dane wejściowe są puste to formularza nie należy jeszcze składać, wymuszając tym samym obowiązkowy charakter jego wypełnienia, w ten sposób podnosimy kolejny poziom walidacji.

• [kolor = # 808080]Rozmiar: [/ kolor] Pomaga nam określić szerokość elementu wejściowego, ten atrybut nie jest nowy, jednak jest bardzo ważny, ponieważ pomaga nam zapewnić lepszą wizualizację tekstu, który musi wprowadzić użytkownik, a także pomaga nam estetycznie, aby utworzyć jednorodne pola wejściowe, ponieważ wszystkie mogą być umieszczone z szerokością większą niż domyślna.

• [kolor = # 808080]Wartość: [/ kolor] Nie jest to nowość w HTML5, ten atrybut pozwala nam umieszczać wartości na wejściu, różni się od symbolu zastępczego, ponieważ to, co jest w wartości przypisywanej podczas wysyłania, jeśli ma być wysłana jako zawartość elementu, jest dość często używany do wypełniania formularza treścią, która jest pobierana z bazy danych, gdy używamy języka serwera.

Po zapoznaniu się z teorią, zobaczmy jej praktyczny przykład:

 Przykład
Mniam:

Hasło:
Owoc:
Prześlij głos 

Jak widzimy w tym przypadku używamy atrybutu symbol zastępczy aby wskazać jakiego typu hasła oczekujemy, w ten sposób prowadzimy użytkownika i redukujemy błędy, gdy element zaczyna się pisać, tekst zastępczy jest zastępowany gwiazdkami lub innymi elementami, które nie pozwalają poznać, że jest jest napisane.

POWIĘKSZAĆ

Innym ważnym środkiem ostrożności, który musimy podjąć, jest to, że chociaż nie możemy odczytać tego, co piszemy w polu hasła, gdy otrzymamy je na stronie, która przetworzy wspomniany formularz, treść dotrze bez żadnego szyfrowania, więc wiemy, że dane podróże bez zabezpieczenia np. jeśli przetworzymy poprzedni formularz otrzymalibyśmy to:

Jeśli chcemy większego bezpieczeństwa, musimy rozważyć użycie serwerów z bezpiecznymi protokołami, takimi jak SSL / HTTPS Szyfrują przesyłane informacje lub używają języków takich jak Javascript do zaszyfrowania informacji przed ich wysłaniem.
Na tym kończymy ten samouczek, przechodząc przez proces tworzenia formularzy do wprowadzania poufnych danych i znamy implikacje i środki bezpieczeństwa, które musimy podjąć, aby zachować integralność danych przesyłanych z formularza, gdy chcemy, aby nie był on czytelny gołym okiem.