Przycisk - jak to z nim jest...
Facebook

Przeglądając różne projekty często spotykam się z wykorzystywaniem linka <a>, przycisku <button> oraz pola wejściowego <input> jako przycisku. Zacząłem więc sprawdzać, czy ma to uzasadnienie oraz, czy są sytuacje, w których lepiej wykorzystać taki a nie inny sposób. Jedak jedyny wniosek jaki mi się nasuwa, to taki iż czasem na siłę próbuje się udowodnić, że coś można zrobić inaczej. Pewnie są scenariusze użycia, do których nie zdołałem dotrzeć, a które rozwiałyby moje wątpliwości co do zasadności takiego zastosowania poszczególnych elementów. Artykuł ten nie jest tutorialem jak i kiedy stosować dany tag jako przycisk, lecz stanowi zebranie moich spostrzeżeń w jednym miejscu.

Poniżej zaprezentuję przykłady użycia poszczególnych tagów jako przycisk bez zagłębiania się w szczegóły.

Link może wyglądać w następujący sposób <a class="button" href="#">Przycisk</a>, dodatkowo CSS'em można osiągnąć wygląd przycisku. Przy zastosowaniu JavaScript zachowanie linku również może ulec zmianie.

Input jest lepiej przygotowanym tagiem, jeśli chodzi o wykorzystanie go zamiennie do przycisku: <input type="button" value="Przycisk"> <input type="reset" value="Przycisk"> <input type="submit" value="Przycisk">.

W przypadku <input> jedyną wadą użycia jako przycisk jest to, że nie ma możliwości dodania mu elementów wewnątrz, gdyż nie posiada tagu zamykającego. Kolejna kwestia, to pozycjonowanie strony, jeśli będzie to publicznie dostępne. Inny mocno interesujący temat, to dostępność strony, czyli jak takie rozwiązania zachowają się w różnego rodzaju narzędziach ułatwiających przeglądanie stron ludziom niepełnosprawnym.

Moim zdaniem (zazwyczaj staram się tego trzymać) wychodzę z założenia, że element <a> ma służyć do przeniesienia użytkownika do konkretnego miejsca na stronie i nie istotne, czy to będzie akapit, czy inna strona. Element <input> powinien być wykorzystywany do zbierania informacji od użytkownika i w ostateczności do obsługi formularza. Natomiast <button> powinno się stosować do interakcji z użytkownikiem.