W skrócie: enterkeyhint w HTML pozwala podpowiedzieć telefonowi, jaki napis pokazać na klawiszu Enter w klawiaturze ekranowej. Dzięki temu w wyszukiwarce może pojawić się „Szukaj”, w formularzu kontaktowym „Wyślij”, a w wieloetapowym formularzu „Dalej”.
enterkeyhint w HTML to mały atrybut, który potrafi poprawić formularz mobilny bez JavaScriptu. Nie zmienia wyglądu strony na desktopie, nie robi walidacji i nie wysyła formularza sam z siebie. Robi jedną rzecz: podpowiada przeglądarce, jak opisać klawisz Enter na klawiaturze ekranowej.
To brzmi drobno, ale na telefonie ma znaczenie. Jeśli klient szuka produktu, lepiej zobaczyć klawisz „Szukaj” niż neutralny Enter. Jeśli wysyła wiadomość do firmy usługowej z Zielonej Góry, Gdyni albo Świebodzina, „Wyślij” jest czytelniejsze niż domyślna ikona.
Co robi enterkeyhint w HTML?
enterkeyhint mówi przeglądarce, jaka akcja najlepiej pasuje do danego pola formularza. Najczęściej użyjesz wartości takich jak search, send, next, done, go, enter albo previous.
Przykład: pole wyszukiwarki na stronie firmowej może dostać enterkeyhint='search'. Formularz kontaktowy przy ostatnim polu może dostać enterkeyhint='send'. Pole w formularzu krok po kroku może dostać enterkeyhint='next'.
Minimalny przykład wygląda tak:
<form action='/szukaj/' method='get'>
<label for='site-search'>Szukaj na stronie</label>
<input
id='site-search'
name='q'
type='search'
inputmode='search'
enterkeyhint='search'
autocomplete='off'
>
<button type='submit'>Szukaj</button>
</form>Warto zauważyć dwie rzeczy. Po pierwsze, enterkeyhint najlepiej działa na urządzeniach z klawiaturą ekranową. Po drugie, sam atrybut nie zastępuje poprawnego typu pola, etykiety, przycisku ani obsługi formularza.
Gdzie użyć tego na stronie firmowej?
Najlepsze miejsca to wyszukiwarka, formularz kontaktowy, zapytanie ofertowe i koszyk w sklepie. To są punkty, w których użytkownik coś wpisuje i chce szybko przejść dalej.
- Wyszukiwarka produktów: użyj
type='search'ienterkeyhint='search', żeby klawisz jasno sugerował szukanie. - Formularz kontaktowy: przy polu wiadomości możesz użyć
enterkeyhint='send', ale pamiętaj, że w<textarea>Enter bywa potrzebny do nowej linii. - Formularz wieloetapowy: przy polach pośrednich sprawdzi się
next, a na końcudonealbosend. - Checkout w sklepie: przy kolejnych polach adresu lub danych dostawy
nextmoże zmniejszyć drobne tarcie.
To detal UX, podobny do widocznego focusa w formularzach i przyciskach. Jeśli lubisz takie drobne poprawki, zobacz też nasz wpis o tym, dlaczego widoczny focus w CSS pomaga użytkownikom.
Czego enterkeyhint nie zrobi za Ciebie?
enterkeyhint nie uruchamia akcji, tylko opisuje intencję pola. Jeżeli formularz ma się wysłać, nadal potrzebujesz działającego <form>, przycisku submit i poprawnego adresu w action. Jeżeli pole ma przejść do następnego kroku, musisz to obsłużyć strukturą formularza albo JavaScriptem.
Nie traktuj tego atrybutu jako magicznego skrótu. Traktuj go jak elegancką podpowiedź dla telefonu. Użytkownik nadal musi rozumieć etykietę pola, wiedzieć, co wpisuje, i mieć jasny przycisk akcji.
W projektach stron dla małych firm takie detale zbierają się w większą całość: czytelny formularz, wygodne pola, szybkie ładowanie i sensowna ścieżka kontaktu. Właśnie tak podchodzimy do tworzenia stron i sklepów internetowych w PEWIT.
Wsparcie przeglądarek i fallback
enterkeyhint ma szerokie wsparcie, ale jego dokładne zachowanie zależy od przeglądarki, systemu i klawiatury ekranowej. Jeśli urządzenie nie obsłuży atrybutu, po prostu go zignoruje. Formularz dalej będzie działał normalnie.
To idealny przykład progressive enhancement: podstawowy formularz musi być poprawny sam w sobie, a enterkeyhint tylko go ulepsza. Fallback jest więc prosty: nie musisz dopisywać osobnego kodu. Użyj dobrych typów pól, np. email, search, tel, dodaj etykiety i normalny przycisk.
Dokumentację atrybutu znajdziesz na MDN Web Docs. Warto też sprawdzić dokumentację elementu input, bo dobry typ pola często działa w parze z dobrą klawiaturą mobilną.