<label for="imie">Imię: </label> <input id="imie" value="Wpisz dane" title="Wpisz imię"><br> <label for="nazw">Nazwisko: </label> <input id="nazw"...
<label for="imie">Imię: </label> <input id="imie" value="Wpisz dane" title="Wpisz imię"><br> <label for="nazw">Nazwisko: </label> <input id="nazw" placeholder="Wpisz dane" title="Wpisz nazwisko">W formularzu zdefiniowano kontrolki do wpisania imienia i nazwiska. Który atrybut reprezentuje podpowiedź umiejscowioną w polu kontrolki, znikającą w momencie, gdy użytkownik rozpocznie wpisywanie wartości?
A. value
B. title
C. placeholder
D. for
Pytanie z egzaminu CKE, styczeń 2023 (arkusz EE.09-SG-23.01).
Atrybut placeholder jest tutaj właściwą odpowiedzią, bo w HTML służy właśnie do pokazania krótkiej podpowiedzi wewnątrz pola formularza, gdy pole jest puste. Taki tekst znika, gdy użytkownik zacznie wpisywać własną wartość, albo gdy pole dostanie rzeczywistą zawartość. W pokazanym przykładzie dla pola nazwiska użyto placeholder=Wpisz dane, więc przeglądarka wyświetli ten napis w polu jako sugestię, a nie jako realnie wpisaną wartość formularza. To ważna różnica praktyczna: placeholder nie jest normalną wartością wysyłaną z formularzem. Moim zdaniem warto zapamiętać, że placeholder ma pomagać użytkownikowi, ale nie powinien zastępować etykiety label. Dobra praktyka i zalecenia dostępności mówią, że etykieta powinna być zawsze widoczna, bo po rozpoczęciu pisania placeholder znika. Atrybut title może dawać dymek podpowiedzi, value ustawia faktyczną wartość pola, a for łączy etykietę label z konkretną kontrolką przez id.
W tym pytaniu łatwo pomylić kilka atrybutów formularzy, bo wszystkie jakoś pomagają opisać pole, ale robią to w zupełnie inny sposób. Atrybut title nie jest tekstem umieszczonym w środku kontrolki. Najczęściej przeglądarka pokazuje go jako dymek po najechaniu kursorem albo może wykorzystać go jako dodatkową informację pomocniczą. Nie należy jednak traktować go jako głównej instrukcji dla użytkownika, bo na telefonach i przy obsłudze klawiaturą bywa słabo dostępny. Atrybut for również nie tworzy żadnej podpowiedzi w polu. Jego zadaniem jest powiązanie etykiety label z elementem formularza o danym id, dzięki czemu kliknięcie tekstu etykiety ustawia fokus w odpowiednim polu. To jest bardzo dobra praktyka semantyczna i dostępnościowa, ale nie chodzi tu o tekst znikający podczas pisania. Z kolei value oznacza rzeczywistą wartość pola. Jeśli wpiszemy value=Wpisz dane, to taki tekst będzie już zawartością kontrolki, a nie lekką sugestią. Użytkownik musi go usunąć albo nadpisać, a formularz może wysłać tę wartość, jeśli nic nie zostanie zmienione. Typowy błąd myślowy polega na tym, że widzimy tekst w polu i zakładamy, że każdy taki tekst to podpowiedź. W HTML trzeba rozróżniać wartość domyślną od placeholdera. Podpowiedź znikająca po rozpoczęciu wpisywania zapewnia atrybut placeholder.