Formularz: inputy oraz etykieta label

Artykuł  | Mirosław Zelent

Pole tekstowe (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.

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ą. Ustawiona prawidłowo 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 hasła (type password)

Pole tekstowe do wpisywania haseł – wartość atrybutu type to 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 (type number)

Jest to pole edycyjne, wprowadzone w HTML5, które w zamyśle ma służyć do wprowadzania liczb, a w zasadzie 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. 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.
 <label for="liczba">Podaj hasło:</label>
<input type="number" id="liczba">

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”>).

Komentarze

Czy macie jakieś uwagi, pytania, sugestie? A może zauważyliście literówkę albo błąd? Dajcie koniecznie znać w komentarzach. Dziękujemy Wam za poświęcony czas!