This post comes from the first version of this blog.
Please send me an email if anything needs an update. Thanks!

Każdy z nas traktuje język HTML jako proste oraz dobrze znane narzędzie. Okazuje się, że i on kryje jednak interesujące zakamarki, które mogą zaciekawić potencjalnego programistę stron internetowych. O ile nie są to jakieś krytyczne dla działania strony kwestie, o tyle czasem można wykorzystać te informacje do stworzenia jeszcze bardziej ambitnych rozwiązań. W dzisiejszym wpisie chciałbym pokazać jeden z takich zakamarków, na który natknąłem się jakiś czas temu.

 

 

HTML: Wartości "x" oraz "y" w wysłanym formularzu.

Co takiego stało się tym razem? Szczerze mówiąc - nic wielkiego. Programując kolejne funkcje w jednym z projektów otrzymałem wymaganie, żeby przycisk wysyłania formularza był obrazkiem. Niewiele się namyślając przygotowałem kod podobny do poniższego: 
1

<input type="image" value="send" src="file.jpg" onclick="this.submit();" />

Tak się złożyło, że ponadto “wyrzuciłem na ekran” zawartość  tablicy $_POST:

array(3) {
  ["field"]=>
  string(0) ""
  ["x"]=>
  string(3) "115"
  ["y"]=>
  string(2) "36"
}

W tablicy tej znajdowały się oczywiście wartości przesłane przez formularz, w tym przypadku reprezentowane przez pole “field”. W tym miejscu powstało też jednak pytanie - skąd się wzięły wartości “x” oraz “y”? Żeby było jasne - trzy razy sprawdziłem, czy nigdzie na stronie nie zostały nieopatrznie wstawione pola z tymi nazwami. Nie zostały.

Nie namyślając się długo zacząłem szukać informacji na ten temat. Po kilku minutach trafiłem na pewien trop - zmieniłem nieco profil moich zapytań do wyszukiwarki i w końcu udało się trafić na miejsce, w którym zostało wyjaśnione całe “zjawisko”.

Na czym ono polega? Otóż, jeśli pole wysyłające formularz jest obrazem, to podczas wysyłania do samego formularza zostają dołączone informacje o współrzędnych, na wysokości których odbyło się kliknięcie. Oczywiście informacje te są podawane relatywnie dla samego obrazka, a więc na podstawie danych o jego rozmiarze można ocenić np. to, która część jest najbardziej “atrakcyjna” dla Internautów. W tym przypadku kliknąłem na piksel o współrzędnych [115, 36] w obrazku 200x200 px, także wybrałem “górny środek” zdjęcia.

Poza tym, jeśli wspomniane na początku pole typu obrazkowego otrzyma nazwę:

1

<input type="image" value="send" src="file.jpg" name="sbm" onclick="this.submit();" />

To wartości w tablicy $_POST otrzymają odpowiedni prefiks:

array(3) {
  ["field"]=>
  string(0) ""
  ["sbm_x"]=>
  string(3) "107"
  ["sbm_y"]=>
  string(2) "53"
}

Mam nadzieję, że przedstawione dzisiaj informacje pomogą Wam w pracy nad jeszcze lepszymi możliwościami w Waszych projektach. Zapraszam też do dyskusji na temat wpisu w komentarzach.