Jak wstawić domyślny tekst do pola wyszukiwarki? (oraz omówienie podstawowych pseudoklas w CSS)
Podczas tworzenia wyszukiwarki na stronie, bądź jakiegokolwiek pola formularza, przydatne może być dodanie domyślnej wartości czyli placeholdera.
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ę skrócić.
1. Placeholder w HTML5
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.
- visited - odnośniki, które zostały odwiedzone,
- hover - elementy, nad którymi znajduje się wskaźnik myszy,
- link - odnośniki, które nie zostały jeszcze odwiedzone,
- focus - elementy, które mają fokus (formularz, który Użytkownik aktualnie wypełnia),
- active - elementy, które są aktywne (właśnie klikany odnośnik),
- first-child - element, który jest pierwszym dzieckiem swojego rodzica (pierwszy element listy),
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.
Kategorie: HTML + CSS. Tagi: #css, #formularze, #html. Źródło obrazków: Pixabay, Font awesome.
