czwartek,
Znacznik label
W przypadku pól formularza istotnym elementem są etykiety. W języku HTML służy do tego znacznik label. Prawidłowo nadana etykieta jest powiązana z elementem formularza nie tylko wizualnie, ale także programowo, co oznacza, że rozmaite technologie wspierające, np. czytniki ekranu, mogą interpretować kontrolki formularza w sposób zgodny z zamysłem autora. Etykiety pól formularza są jednym z najmniej pracochłonnych aspektów związanych z zapewnieniem dostępności strony internetowej, opis pola dla użytkownika i tak jest potrzebny, a zastosowanie do niego znacznika ułatwia opracowanie stylów CSS dla formularza. W przypadku potrzeby ukrycia etykiety przed użytkownikami standardowych przeglądarek stron internetowych działających w trybie graficznym istnieją gotowe rozwiązania wykorzystujące kaskadowe arkusze stylów. Kliknięcie tego elementu aktywuje docelową kontrolkę, co ułatwia wypełnianie formularza.
Do przekazywania informacji o przeznaczeniu pola formularza odpowiedni wydaje się atrybut placeholder, jednak z kilku względów jest to błędne przekonanie. Po pierwsze wielu użytkowników widzących wypełnione pola, uzna, że są one już wypełnione i prześle je dalej, po drugie po wpisaniu treści placeholder przestaje być widoczny i w razie wątpliwości, które mogą pojawić się przed wysłaniem danych, nie ma informacji, co należało tam wpisać. Atrybut placeholder jest dobry jako dodatkowa podpowiedź.
Atrybut label może być stosowany dla elementów select, textarea, progres oraz input typu checkbox, color, date, datetime-local, email, file, month, number, password, radio, range, search, tel, text, time, url i week. Nie powinien być stosowany w przypadku znaczników input typu button, submit i reset, ponieważ etykietę dla nich stanowi atrybut value, który jest wyświetlany na przycisku, oraz type hidden (z natury tego elementu), a także typu image (ma on wymagany atrybut alt).
Etykietę można stosować na dwa sposoby, pierwszy z nich wykorzystuje odrębny znacznik, a powiązanie z polem formularza stanowi atrybut for, który zawiera identyfikator (artybut id) docelowego elementu. Etykieta może znajdować się zarówno przed, jak i za właściwym polem formularza. Poprawne składniowo jest nawet umieszczenie etykiety poza formularzem, jednak nie ma to sensu.
Pierwszy sposób nadania etykiety:
Kod HTML pierwszego przykładu:
<label for="fpass">Podaj hasło: </label>
<input id="fpass" type="password">
Drugi sposób zastosowania znacznika label to objęcie nim elementu docelowego. Etykieta może posiadać właściwie ustawiony atrybut for, jednak w przypadku jego braku nadal wskazuje ona właściwy element.
Drugi sposób nadania etykiety:
Kod HTML drugiego przykładu:
<label>Podaj hasło:
<input type="password">
</label>
