HTML - Tworzenie stron | Artykuł

Elementy formularza: rodzaje przycisków

MIROSŁAW ZELENT

Istnieją trzy podstawowe sposoby definiowania przycisków w HTML - wyróżniamy kolejno: <input type="submit">, <input type="button"> oraz <button></button>. W niniejszym wpisie poznamy różnice pomiędzy nimi!

Przycisk input type submit

Przycisk tego typu zazwyczaj służy w formularzu do dokonania 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 input type 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, czyli z PHP po stronie back-endowej. To jest właśnie istota różnicy pomiędzy type="submit" i type="button".

Przycisk button

Zamiast pojedynczego znacznika <input>, możemy zamiennie zapisać podwójny znacznik <button></button>. W tej wersji napis na przycisku umieszczamy po prostu 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.