Przycisk formularza to kontrolka uruchamiająca zdefiniowaną akcję, np. zatwierdzenie wprowadzonych danych.
Rola przycisku w strukturze formularza
Przycisk formularza to element interfejsu, który pozwala użytkownikowi wywołać określone działanie po wprowadzeniu danych do pól formularza. W aplikacjach internetowych najczęściej jest tworzony za pomocą elementu HTML <button> albo <input type="submit">. Oba rozwiązania mogą służyć do wysłania formularza, ale różnią się możliwościami. Element <button> może zawierać tekst, elementy formatowania, ikonę lub grafikę, natomiast <input type="submit"> wyświetla etykietę określoną atrybutem value.
Przycisk powinien znajdować się w obrębie elementu <form> albo być powiązany z formularzem za pomocą atrybutu form wskazującego identyfikator odpowiedniego formularza. Standardowym typem przycisku wysyłającego dane jest type="submit". W przypadku elementu <button> pominięcie atrybutu type w formularzu może skutkować traktowaniem go jako przycisku zatwierdzającego, dlatego jawne określenie typu ogranicza ryzyko niezamierzonego wysłania danych.
Typy akcji wywoływanych przez kontrolkę
Przycisk z typem submit uruchamia mechanizm wysłania formularza. Przed przekazaniem danych przeglądarka może wykonać natywną walidację pól oznaczonych między innymi atrybutami required, type="email", min, max, minlength i maxlength. Jeżeli wartość nie spełnia wymagań, formularz może zostać zatrzymany, a przeglądarka wyświetli komunikat walidacyjny. Po pomyślnej walidacji dane są wysyłane zgodnie z atrybutami formularza action i method. Metoda get umieszcza wartości w adresie URL, a metoda post przekazuje je w treści żądania HTTP.
Przycisk z typem reset przywraca kontrolkom formularza ich wartości początkowe zapisane w dokumentach HTML. Nie jest to tożsame z wyczyszczeniem wszystkich pól do pustych wartości, ponieważ pola mogą mieć zdefiniowane wartości domyślne. Typ button nie wykonuje domyślnej akcji formularza. Zwykle służy do uruchomienia kodu JavaScript, na przykład pokazania dodatkowych pól, przeliczenia wartości, przełączenia widoku albo pobrania danych bez przeładowania strony. Sam przycisk nie decyduje jednak o tym, jaka operacja zostanie wykonana; działanie wynika z obsługi zdarzenia, takiej jak click, oraz z przypisanego kodu.
Walidacja, wysyłanie danych i obsługa zdarzeń
Przeglądarka może uruchomić zdarzenie submit formularza zarówno po kliknięciu przycisku zatwierdzającego, jak i po użyciu klawisza Enter w polu tekstowym. Z tego powodu logika aplikacji powinna być przypisana do obsługi wysłania formularza, a nie wyłącznie do zdarzenia kliknięcia konkretnego przycisku. W skrypcie można użyć metody preventDefault(), aby zatrzymać standardowe przejście do adresu określonego w action i obsłużyć dane po stronie klienta. Jeżeli kod zatrzyma domyślną akcję, musi samodzielnie przeprowadzić dalszą komunikację, na przykład wysłać żądanie za pomocą fetch() i zareagować na odpowiedź serwera.
Przycisk może mieć dodatkowe atrybuty sterujące sposobem wysyłania formularza. Atrybut name nadaje nazwę wartości przekazywanej razem z formularzem, a value określa jej zawartość. Przyciski <button> i <input> mogą mieć własne atrybuty formaction, formenctype, formmethod, formnovalidate i formtarget, które dla danego przycisku nadpisują odpowiednie ustawienia formularza. Przykładowo formnovalidate pomija natywną walidację przy konkretnej akcji, dlatego powinien być stosowany tylko wtedy, gdy taki przepływ jest zamierzony. Walidacja wykonana w przeglądarce nie zastępuje sprawdzenia danych na serwerze, ponieważ żądanie HTTP może zostać utworzone poza interfejsem strony.
Stan przycisku powinien odpowiadać stanowi wykonywanej operacji. Po rozpoczęciu wysyłania formularza aplikacja może czasowo ustawić disabled, aby ograniczyć wielokrotne zgłoszenia, a po zakończeniu żądania przywrócić możliwość wykonania akcji. Tekst przycisku powinien wskazywać czynność, na przykład „Wyślij zgłoszenie”, „Zapisz ustawienia” albo „Wyczyść pola”, zamiast używać niejednoznacznej etykiety. Przycisk wyłączony przez atrybut disabled nie reaguje na kliknięcia użytkownika i nie jest uwzględniany w standardowym przesyłaniu danych formularza.
Przycisk w praktyce serwisowej i diagnostyce interfejsu
Nieprawidłowe działanie przycisku formularza może wynikać z problemu w kodzie strony, błędnej walidacji, niedostępnego skryptu JavaScript, niepoprawnego adresu w atrybucie action albo z błędu po stronie serwera. Przy diagnostyce warto sprawdzić, czy element jest widoczny, czy nie ma ustawionego disabled, czy formularz otrzymuje zdarzenie submit oraz czy przeglądarka nie zgłasza błędów w konsoli. W narzędziach deweloperskich można również przeanalizować żądanie w zakładce sieciowej: jego metodę HTTP, adres docelowy, kod odpowiedzi i przesyłane pola. Samo pojawienie się komunikatu po kliknięciu nie oznacza jeszcze, że dane zostały zapisane, ponieważ interfejs może reagować niezależnie od wyniku operacji serwerowej.
Na laptopie lub komputerze PC warto porównać zachowanie formularza w aktualnej przeglądarce oraz po wyłączeniu rozszerzeń, które mogą modyfikować skrypty lub zawartość stron. Jeżeli przycisk nie reaguje tylko w jednym programie, przyczyną może być uszkodzony profil przeglądarki, niezgodność z konkretną wersją silnika renderującego albo blokada zasobu wymaganego przez formularz. Jeżeli problem występuje w wielu przeglądarkach, bardziej prawdopodobny jest błąd aplikacji, połączenia sieciowego lub serwera. Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów, komputerów PC oraz ich podzespołów, a w ramach diagnostyki sprzętu może sprawdzić działanie systemu, przeglądarki, połączenia internetowego i urządzeń wejściowych używanych do obsługi formularza.
