Pole wyszukiwania w formularzu HTML5

W rozdziale:

Pola wyszukiwania

Ten typ jest trochę nietypowy. Sama idea jest prosta, ale sposoby implementacji mogą wymagac odrobinę wyjaśnień. Proszę Państwa, oto…

Pole wyszukiwania. Nie zwykłe pole wyszukiwarki Google czy Yahoo. (Chociaż te również.) Pomyśl raczej o jakimkolwiek polu wyszukiwania na jakiejkolwiek stronie, w jakimkolwiek portalu. Amazon ma takie pole. Newegg je ma. Większość blogów zawiera takie cudo. Jakiego znacznika używa się do jego utworzenia? <input type="text">, jak do każdego innego pola tekstowego. Trzeba to zmienić.

Pole wyszukiwania nowej ery:

<form>
  <input name="q" type="search">
  <input type="submit" value="Szukaj">
</form>

Sprawdź pole <input type="search"> w swojej przeglądarce. W niektórych przeglądarkach pole to niczym nie będzie się różnić od zwykłego pola tekstowego. Ale w Safari w systemie Mac OS X wygląda ono tak:

Widzisz różnicę? Pole ma zaokrąglone rogi! Wiem, wiem pewnie nie posiadasz się z radości. Ale poczekaj, jest coś jeszcze! Gdy zaczniesz wpisywać coś w polu type="search", Safari po prawej stronie wyświetla mały przycisk „x”. Kliknięcie tego przycisku powoduje skasowanie zawartości pola. (Także przeglądarka Google Chrome, która pod względem technicznym ma wiele wspólnego z Safari, również wykazuje takie działanie.) Dodatki te mają za zadanie ujednolicić styl pól wyszukiwania w iTunes i innych aplikacjach na system Mac OS X.

W witrynie Apple.com pole <input type="search"> było używane, aby upodobnić styl stron do systemu Mac. Ale nie ma w tym nic specyficznego dla systemu Mac. To tylko kod HTML, który każda przeglądarka może prezentować w sposób spójny z platformą, na której działa. Podobnie jak z innymi typami pól wejściowych, jeśli pole type="search" nie zostanie rozpoznane, to przeglądarka potraktuje je jako type="text", a więc można już teraz zacząć używać pól type="search" na wszystkich stronach.

Pytanie do profesora Kodeckiego

Domyślnie starsze wersje przeglądarki Safari nie stosują żadnych arkuszy CSS do pól <input type="search">. Jeśli chcesz, aby przeglądarka ta traktowała te pola jako tekstowe (aby móc je formatować przy użyciu CSS), dodaj do arkusza stylów poniższą regułę:
input[type="search"] {
  -webkit-appearance: textfield;
}
Dziękuję Johnowi Leinowi za pokazanie mi tej sztuczki.