Elementy formularza: input text, password, number oraz etykieta label

Pole tekstowe: input type text

Wiele znaczników, które służą nam do wprowadzania danych, określimy przy pomocy tagu <input> (ang. "wejście"). Rodzaj elementu o jaki nam konkretnie chodzi, ustawiamy atrybutem type (typ definiowanej przez nas kontrolki). Klasyczne pole tekstowe, jakie znamy z Windows, czy ze stron internetowych wstawimy do formularza wartością text atrybutu type:

 <input type="text"> 

Uwaga: bardzo ważne w przypadku wielu kontrolek formularzy (w tym pola tekstowego) jest poprawne użycie tagu <label>, o czym przekonamy się poniżej. Przy okazji: więcej informacji o stylizowaniu wyglądu inputów znajdziesz w tym filmie.

Etykieta label

Na początku przygody z tworzeniem dokumentów wszyscy zapisujemy opis kontrolki formularza jako zwykły tekst (ewentualnie dodając gdzieś po drodze złamanie linii <br>):

 Podaj login: <input type="text"> 

Natomiast tak jak lepiej jest używać paragrafów zamiast luźno porozrzucanych zdań rozdzielonych podwójnymi <br><br>, tak lepiej jest używać znaczników <label> do opisania pola, zamiast luźno wrzuconego tekstu:

 <label>Podaj login: <input type="text"></label> 

Zauważmy: wewnątrz znacznika <label> znajduje się zarówno opis pola, jak i sam <input>. Alternatywnie (równie poprawnie) można także zapisać to tak:

 <label for="pole">Podaj login:</label>
<input type="text" id="pole">

W tej wersji etykieta zamknięta jest przed znacznikiem <input>, ale pojawia się dodatkowo atrybut for (ang. "dla") określający dla jakiego elementu jest to etykieta. Wartością atrybutu for jest identyfikator, podany także w atrybucie id wewnątrz <input>. Obydwa identyfikatory rzecz jasna koniecznie muszą być identyczne. To właśnie w ten sposób następuje logiczne powiązanie pomiędzy kontrolką formularza i jego etykietą.

Co najważniejsze: prawidłowo ustawiona etykieta reaguje na kliknięcie – powiązana z nią kontrolka formularza zyskuje aktywność. Atrybut placeholder (ang. "rezerwujący miejsce") powoduje wyświetlenie wewnątrz pola wyszarzonej podpowiedzi, która podpowiada użytkownikowi jakiej informacji w tym polu oczekuje witryna:

 <label for="pole">Podaj login:</label>
<input type="text" id="pole" placeholder="nick lub e-mail">

Kiedy tylko zaczniemy pisać w polu, to podpowiedź zniknie – jej miejsce zajmie wpisana przez nas wartość.

Pole z hasłem: input type password

Pole tekstowe do wpisywania haseł określimy ustawiając wartość atrybutu type na password. Ze względów bezpieczeństwa kontrolka ta automatycznie maskuje wprowadzane do niej znaki, tak aby osoba przyglądająca się monitorowi nie była w stanie zwyczajnie zobaczyć naszego hasła. Takie pole - rzecz jasna - najczęściej spotkamy w formularzach logowania czy rejestracji:

 <label for="pass">Podaj hasło:</label>
<input type="password" id="pass">

Pole numeryczne: input type number

Jest to pole edycyjne, wprowadzone w HTML5, które w zamyśle ma służyć do wprowadzania liczb (a raczej napisów, które powinny się na liczbę bezproblemowo dać przekonwertować). Takie pole rzeczywiście pomaga użytkownikowi nie pomylić się przy wprowadzaniu liczb, jako iż nie pozwala w ogóle wprowadzić z klawiatury liter (poza literką e, której można używać w tzw. notacji naukowej). Oczywiście notacja naukowa najbardziej przydaje się do pokazywania naprawdę dużych lub naprawdę małych liczb, natomiast właśnie ze względu na istnienie tego zapisu, w polu numerycznym możemy wpisywać literkę e.

 <label for="liczba">Podaj hasło:</label>
<input type="number" id="liczba">

Przyjrzyjmy się przykładom zapisu numerycznego:

  • 1.5e2 - przecinek przesuwamy o 2 miejsca w prawo, gdyż po literze e znalazła się liczba dodatnia 2 – zatem jest to inaczej zapisana liczba 150.
  • 1.5e-2 - przecinek przesuwamy o 2 miejsca w lewo, gdyż po literze e znalazła się liczba ujemna -2 - jest to zatem inaczej zapisana liczba 0.015.

Możliwość wpisania litery e sprawia, iż użytkownik może wpisać do pola np. frazę: "eeeee". Wniosek jest prosty: łańcuch numeryczny zawsze wypada sprawdzić (zwalidować czy aby na pewno jest poprawną liczbą). Ponadto, jako element wprowadzony w HTML5, pole numeryczne może być niepoprawnie obsługiwane w przeglądarkach z rodziny IE - wówczas wyświetlone zostanie zwykłe pole <input type="text">.

Zobacz także

Daj się zaskoczyć! Poniżej wylosowałem dla Ciebie pięć wpisów z innych kategorii blogowych aniżeli ta, którą właśnie przeglądasz:

Polecamy: Sekurak Academy 2024

Sekurak Academy 2024

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp do materiałów z edycji Sekurak Academy z roku 2023! Przy zakupie możecie skorzystać z kodu: pasja-akademia w koszyku, uzyskując rabat -30% na bilety w wersji "Standard" - warto korzystać! Więcej szczegółów znajdziecie tutaj.

Książka: Wprowadzenie do bezpieczeństwa IT

Wprowadzenie do bezpieczeństwa IT

Niedawno wystartował dodruk świetnej, rozchwytywanej książki pt. "Wprowadzenie do bezpieczeństwa IT, Tom I" (około 940 stron). Mamy dla Was kod: pasja (wpisz go w koszyku), dzięki któremu otrzymacie 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla naszych Widzów! Jest to pierwszy tom serii o ITsec, który wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

Pomóż dzieciom

Polska Akcja Humanitarna od wielu lat dożywia dzieci. Proszę, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękuję!

Komentarze

Disqus

Kategorie wpisów

Oto polecana książka warta Waszej uwagi.
Pełna lista polecanych książek jest tutaj.

WIELKANOCNY KIERMASZ 2024! W dniach od 26.03.2024 do 01.04.2024 trwa w Helionie duża świąteczna promocja. Przeceniono tysiące książek, ebooków i kursów video, a rabaty sięgają do -98%. Zobacz promocję w: helion.pl (książki techniczne), ebookpoint.pl (książki rozwojowe i fabularne), videopoint.pl (kursy video).

Bądź na bieżąco