Podświetlanie pola tekstowego

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-02-21

szukaj: pole tekstowe input formularze html

Wraz z rozwojem internetu coraz częściej spotykamy się z polami formularzy. Przeważnie są mdłe - jednokolorowe i statyczne. Ale można to zmienić! Zobacz jak łatwo.

Prosty kod XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<style type="text/css">
 /* tu będzie kod CSS */
</style>
<body>
 <form action="#">
  <input type="text" name="pole" />
 </form>
</body>
</html>

Najprostszy z możliwych formularz. Nawet nigdzie nie prześle tych danych. Ale tu nie o wysyłanie danych też chodzi:-)

A teraz CSS z seksji head:

/* dla normalnego inputa tworzę regułę */
input { 
border: 1px solid black;
font: normal 12px arial, sans-serif; 
}
input:hover { 
background: transparent url(tlo.gif) top left no-repeat;
}

Cały zabieg polega na wstawieniu ruchomej grafiki w tło. jest to dwukolorowy pasek przechodzący dosyć szybko z lewej na prawą stronę. Nic takiego? No, może i nic, ale pojawia się dopiero po najechaniu nad pole formularza.

Jeśli jesteś szczęśliwym posiadaczem MSIE - szybko wyrzuć to coś i zainstaluj porządną, nowoczesną przeglądarkę, np. Firefox lub Opera.

Kolory dobrałem celowo bardzo mocne, aby można było bez problemu zauważyć efekt. Ale lepiej wygląda on z delikatnymi odcieniami, mniej kontrastującymi ze sobą. Popróbuj:-)

Jeśli jednak jesteś zatwardziałym zwolennikiem MSIE, albo twoi klienci są, to spróbujmy obejść tą przeszkodę. Znalazłem kiedyś taki plik .htc, dzięki któremu wszystkie elementy na stronie mogą mieć przypisywaną regułce z pseudoklasą :hover.

Plik ten należy wstawić do reguły body:

<style type="text/css">
body {
 behavior: url(csshover.htc);
 }
 /* tu pozostały kod. I działa! */
</style>

Jak widać, nie dość, że dla MSIE trzeba dodatkowo nadrzucać kodu - większy rozmiar strony, to jeszcze trzeba zrezygnować ze standardów - bahavior nie jest zgodne ze standardami W3C. Zobaczmy jeszcze jeden sposób ma ten sam efekt.

Już nie tak prosty kod XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
</head>
<body>
 <form action="#">
  <input size="8" type="text" name="pole"      onmouseover="this.style.background='Url(\'tlo.gif\')'"
onmouseout="this.style.background='Url(\'\')';" />
 </form>
</body>
</html>

Tym razem skorzystałem ze zdarzeń JS. Też się da, ale kod stracił swoją przejrzystość, a co gorsza elastyczność! Ponieważ w kodzie zostały zagnieżdżone zdania JS.

Druga metoda działała we wszystkich przeglądarkach, w tym MSIE nawet bez tego pliku.

Po raz kolejny widać, że MSIE często wiąże ręce webmasterom. Czasem można to obejść - tak jak w powyższym przykładzie. Czasem jednak - nie. Zachęcam do używania przeglądarek - nie MSIE:-)

Patryk 'yarpo' Jar

szukaj: pole tekstowe input input formularze html html

Osoby czytające tę publikację przeglądały również:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!