CSS posiada duże możliwości, jeżeli chodzi na przykład o formatowanie tekstu. Możliwe jest także panowanie nad różnymi elementami, jak mają się zachować w określonych przez nas sytuacjach. Jedną z nich jest pole wyszukiwarki na stronie - proste, nie wyróżnia się, ale jest przydatne. Postanowiłem dodać do niego tekst "Wyszukaj artykuł...", można to zrobić poprzez dodanie parametru value. Takie rozwiązanie posiada wadę, jeżeli faktycznie ktoś, będzie chciał skorzystać z wyszukiwarki to będzie musiał kliknąć w to pole, usunąć ten domyślny tekst, wpisać własny i wysłać zapytanie. Teraz pojawia się pytanie, po co utrudniać Użytkownikowi życie, skoro możemy tę drogę skócić.

Ciekawostka. Która zasada jest poprawna - "tę książkę" czy "tą książkę"?
Jest zasada w formie pisanej:
- tę – w połączeniu z biernikiem
- tą – w połączeniu z narzędnikiem
Nie ma zasady co do formy mówionej, czyli obowiązuje i jedna i druga. :-)

#1. Placeholder w HTML5

Porada zaktualizowana 19.05.2017 r. Tworzymy proste pole formularza, które posłuży za wyszukiwarkę. Skorzystamy poniżej z atrybutu placeholder.

Jest to z języka angielskiego - wypełniacz miejsca, tekst pomocniczy, tekst zastępczy. Jako wartość tego atrybutu podaje się tekst. Wyświetli się w przypadku gdy użytkownik nie wpisał jeszcze żadnego tekstu do pola (input), natomiast jeśli zacznie wpisywać, to placeholder zniknie.

Należy pamiętać, że jest to element najnowszej wersji HTMLa - HTML5. Starsze przeglądarki mogą go nie wyświetlić (natomiast mówimy tu już o naprawdę starych przeglądarkach).

<form method="get" action="">
<input value="" type="text" placeholder="Wyszukaj artykuł">
<input type="submit" value="Szukaj">
</form>

#2. Domyślny tekst znika po kliknięciu

Ten podpunkt piszę bardziej jako ciekawostkę. Tworzymy proste pole formularza, które posłuży za wyszukiwarkę.

<form method="get" action="">
<input value="" type="text" />
<input type="submit" value="Szukaj" />
</form>

Teraz sprawmy, żeby po kliknięciu w pole wyszukiwarki, tekst domyślny zniknął sam. Użyjemy JavaScript w tym przypadku.

<form method="get" action="">
<input value="Wyszukaj artykuł..." onfocus="if(this.value=='' || this.value == 'Wyszukaj artykuł...') this.value=''" onblur="if(this.value == '') {this.value=this.defaultValue}" onkeyup="keyUp();"  type="text" />
<input type="submit" value="Szukaj" />
</form>

Podsumowując. Jest już wyszukiwarka, która posiada domyślny tekst oraz posiada funkcję, że po najechaniu tekst znika.

#3. Podstawowe pseudoklasy w CSS oraz zastosowanie

CSS posiada tak zwane pseudoklasy, dzięki którym możemy odnieść się do określonych sytuacji, podczas korzystania z danych elementów strony. Selektor pseudoklasy jest połączony nazwą z innym selektorem za pomocą dwukropka.

Podstawowe pseudoklasy powyżej, więc pora przejść do praktyki. Teraz można dodać kilka dodatkowych parametrów za pomocą CSS. Planuję zrobić, by przed kliknięciem w pole tekst był pisany kursywą i był przygaszony, a po kliknięciu był wyraźny i bez kursywy. Jak to zrobić?

form input[type="text"]{ color: #999; font-style: italic; }
form input[type="text"]:focus{ color: #222; font-style: normal; }

Najpierw odwołujemy się do pola formularza czyli form input[type="text"]. W pierwszej kolejności nadajemy kolor tekstu szary oraz kursywę. W drugiej linijce powtarzamy to samo odwołanie z tym, że dodajemy pseudoklasę focus (gdy ktoś zacznie pisać w formularzu, to będzie to działać) oraz style - tekst wyraźny i bez kursywy.

↑ Skocz do góry

Opublikowano: 26 stycznia 2013. Autor: Bartosz Stefanicki.
Tagi: , , .

Dodaj komentarz

2 komentarzy do "Jak wstawić domyślny tekst do pola wyszukiwarki? (oraz omówienie podstawowych pseudoklas w CSS)"

avatar
Sortuj wg:   najnowszy | najstarszy | oceniany
Comandeer
Gość

A propos #1 - czemu po prostu nie placeholder z HTML5? co najwyżej z fallbackiem to czegoś takiego. Zrobić test na obecność placeholdera łatwo, więc...

Bartosz Stefanicki
Gość

@Comandeer,

Dzięki za zwrócenie uwagi. W Internet Explorer 9 placeholder nie działa (teraz obsługuje tylko Safari, Chrome, Firefox). Ale ciekawe rozwiązania się szykują...

wpDiscuz