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 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">.