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:
<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 200×200 px, także wybrałem „górny środek” zdjęcia.
Poza tym, jeśli wspomniane na początku pole typu obrazkowego otrzyma nazwę:
<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.
Warto przeczytać.
Trwa ładowanie…
Przydatne, jeśli button jest czymś więcej, niż tylko zaokrąglonym wyrazem „Submit” ;]
GitHub – kodowanie społecznościowe
Najgorsze jest to, że kilka lat temu zachodziłem w głowę, dlaczego pewien bot mi nie chce działać, a okazało się właśnie, że ktoś po drugiej stronie sprawdzał czy istnieją te dwa wpisy „.x” i „.y”.
Do artykułu można dodać, że na niektórych systemach (nie znalazłem od czego to zależy jeszcze) zamiast podkreślnika pojawia się kropka przed „x” i „y”.
Generowanie losowego ciągu znaków – hash
Ciekawy bajer.. próbuję wymyślić jakieś tego zastosowanie i pomysłu brak.
Choć ciekawi mnie czemu zamiast ostylowanego submita robisz input z onclick… jakieś konkretne powody?
NewsBox
1. Chyba nie piszesz dużo w HTML skoro dopiero teraz to zauważyłeś (rzecz stara jak świat). Zwłaszcza że w IE zachowanie tego przycisku jest deczko inne. Warto sprawdzić zanim się go użyje.
2. Masz współrzędne kliknięcia. Co z tym zrobić ? Przykładowo masz zdjęcie klasowe i mapę obrazka która definiuje co robi kliknięcie w odpowiedni obszar. Piszesz wiadomość i klikasz w osobę na zdjęciu by wskazać odbiorcę.
3. Po co tam jest $(this).submit() skoro input image działa jak submit ?
4. Osobiście przy „ostylowanych przyciskach” preferuje zwykły submit. Można mu nadać tło i wszystko jak należy. Za value można dać twardą spację. Ale lepiej zostawić napis. W razie czego prościej zmienić napis niż cały obrazek w tle.
5. Myślałem że ten blog nie omawia podstaw HTML
@Ender: Nie miałem wtedy zbyt wielkiego wyboru, tak dokładnie kazali zrobić, to się podporządkowałem. ;]
HTML: Wartości „x” oraz „y” w wysłanym formularzu.
@Quadina: Może to pole miało kropkę, jako nazwę, sprawdziłeś? W każdym razie dzięki za informację, aczkolwiek mam nadzieję, że mi się nie przyda. ;]
HTML: Wartości „x” oraz „y” w wysłanym formularzu.
@Michał Wachowski: Faktycznie, można było to zrobić nieco inaczej, aczkolwiek wtedy wydało mi się to najszybsze rozwiązanie. Tak, jak napisałem, to nie jest *najlepsze* rozwiązanie, tylko to, co wtedy napisałem. Gdybym ostylował submita, nie byłoby tego wpisu. ;]
HTML: Wartości „x” oraz „y” w wysłanym formularzu.
@gorylek: 1. Masz rację, nie jestem koderem HTMLa – muszę tylko od czasu do czasu coś w nim zrobić, więc wiem tyle, ile muszę [co nie znaczy, że mało]. Jeśli zachowanie w IE jest nieco inne, może podzielisz się z nami informacjami „jak” to działa?
2. Ciekawe, dzięki za pomysł.
3. Dlaczego? Nie mam teraz czasu, żeby przygotować jakieś demko, ale spójrz na to: http://forum.php.pl/index.php?showtopic=26509 – chłopaki mają trochę problemów z działaniem submit vs image, które rozwiązują właśnie podpięciem zdarzenia onclick. Jak będę miał chwilę czasu to sprawdzę ten przypadek i być może opiszę różnice na blogu [jeśli będą].
4. Tak jak napisałem Michałowi Wachowskiemu – tak zrobiłem to „wtedy”, czyli dłuuugo przed tym wpisem. Teraz faktycznie zrobiłbym to inaczej.
5. Ten blog omawia problemy i zagadnienia [głównie] związane z programowaniem stron internetowych. W związku z czym omawiam tu wszystko, co wydaje mi się interesujące lub na tyle nieintuicyjne, że „warto o tym wiedzieć”. Zresztą chyba się zgodzisz, że co jest dla Ciebie podstawą, nie musi być nią dla kogoś innego.
HTML: Wartości „x” oraz „y” w wysłanym formularzu.
W ten sposób można na własne potrzeby zrobić sobie eye traking :)
Eye trackingu raczej w ten sposób nie zrobisz, bo musiałbyś wysyłać za każdym razem formularz z informacjami o pozycji myszki. :)
CodeRetreat 2011: Na miejsca, gotów…