Formularz: inputy oraz etykieta label
Mirosław Zelent
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 literzee
znalazła się liczba dodatnia2
– zatem jest to inaczej zapisana liczba 150.1.5e-2
- przecinek przesuwamy o 2 miejsca w lewo, gdyż po literzee
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">
.
Polecamy: 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
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. Prosimy, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękujemy!
Komentarze
Czy macie jakieś pytania, sugestie, uwagi? A może zauważyliście literówkę albo błąd? Dajcie koniecznie znać w komentarzach! Dziękujemy Wam za poświęcony na to czas!
Disqus