Rodzaje przycisków

Artykuł  | Mirosław Zelent

Przycisk typu submit

Przycisk zazwyczaj służy w formularzu do tzw. submita, czyli podsumowania całego formularza dane zostają wysyłane na serwer wybraną metodą (get lub post).

 <input type="submit" value="Kliknij"> 

Rezultat w przeglądarce:

Napis na przycisku określamy jak widać atrybutem value (ang. wartość). I teraz bardzo ważny wniosek: kliknięcie przycisku, który jest submitem, spowoduje próbę wysłania formularza na serwer, w przeciwieństwie do drugiego typu przycisku <input type=”button”>, który opisano w sekcji poniżej.

Przycisk typu button

Znacznik <input type=”button”> definiuje “zwykły” przycisk – w sensie: jego kliknięcie nie submituje całego formularza (po kliknięciu nie zostaje podjęta próba wysłania danych formularza wybraną metodą na serwer):

 <input type="button" value="Kliknij"> 

Rezultat w przeglądarce (wizualnie) jest identyczny, jednak kliknięcie nie spowoduje wysłania formularza:

Czasami potrzebujemy takiego niesubmitującego zachowania, gdyż chcemy aby kliknięcie przycisku uruchomiło nam lokalny skrypt JS po stronie front-endu, a nie powodowało podjęcia próby komunikacji z serwerem, z PHP po stronie back-endowej. To jest właśnie istota różnicy pomiędzy type=”submit” i type=”button” – ten pierwszy podsumowuje formularz, ten drugi nie robi tego.

Przycisk <button>

Zamiast pojedynczego znacznika <input>, możemy zamiennie zapisać podwójny znacznik <button></button>. W tej wersji napis na przycisku umieszczamy pomiędzy tagami:

 <button>Kliknij</button> 

Dlaczego dano nam możliwość zapisywania oprócz powyższych dwóch inputów, także znacznika button? Odpowiedź tkwi właśnie w fakcie, iż znacznik button jest podwójny – tzn. ma tag otwierający i zamykający, w przeciwieństwie do pojedynczego <input>. A to sprawia, że pomiędzy tagami <button> /button>, można np. umieścić obrazek <img>, czyli niejako uatrakcyjnić wizualnie ten element:

 <button><img src="obraz.png" alt="">Wyślij</button> 

Jeżeli chodzi o zachowanie elementu wewnątrz formularza, to kliknięcie elementu <button><button>, podobnie jak <input type=”submit”> spowoduje podsumowanie formularza (zatem jedynie <input type=”button”> wyróżnia się nie podejmując w ogóle próby kontaktu z serwerem).

Oczywiście na początku swoboda wyboru z aż trzech dostępnych opcji podczas tworzenia przycisku sieje mocny zamęt w głowach adeptów HTML, ale spokojnie – ty już znasz różnice pomiędzy nimi. I na tym zakończyliśmy omawianie podstawowych kontrolek, które spotkamy w formularzach.

Komentarze

Czy macie jakieś uwagi, pytania, sugestie? A może zauważyliście literówkę albo błąd? Dajcie koniecznie znać w komentarzach. Dziękujemy Wam za poświęcony czas!