Poznaj Programowanie

Tagi HTML: button

Piotr Grochal 6 min. czytania

Tag <button> to jeden z najważniejszych elementów HTML, służący do tworzenia klikalnych przycisków w interfejsach użytkownika. W odróżnieniu od prostszego <input type="button">, <button> pozwala umieszczać wewnątrz tekst, ikony, obrazy i inne elementy HTML, co czyni go idealnym do nowoczesnych formularzy i aplikacji webowych. W HTML5 przycisk stał się podstawą interaktywnych komponentów także w bibliotekach takich jak React i Vue.

Podstawowa składnia i proste przykłady użycia

Aby utworzyć najprostszy przycisk, użyj tagu <button> z tekstem wewnętrznym:

Przykład:

<button>Kliknij mnie</button>

Ten kod generuje standardowy przycisk z tekstem „Kliknij mnie”, gotowy do użycia w formularzach lub do wyzwalania akcji JavaScript. Tag <button> wymaga zarówno znacznika otwierającego, jak i zamykającego i może zawierać złożoną treść (np. <abbr>, <img>, <strong>, <svg>).

Porównanie z alternatywą <input> w najczęstszych zastosowaniach:

Element Przykładowy kod Zalety <button>
<input> <input type="button" value="Kliknij"> zawiera tylko tekst w atrybucie value
<button> <button>Kliknij <strong>mnie</strong></button> obsługuje złożoną zawartość, np. ikony i formatowanie

Atrybuty tagu <button> – pełne możliwości konfiguracji

Najważniejsze atrybuty przycisku to:

  • type – określa typ przycisku; domyślnie submit wysyła formularz;
  • name i value – name przypisuje nazwę kontrolki wysyłanej z formularzem, a value jej wartość; przy wielu przyciskach z tym samym name wysyłana jest wartość klikniętego przycisku;
  • disabled – wyłącza przycisk, uniemożliwiając interakcję;
  • globalne atrybuty – m.in. id, class, style, title, lang, tabindex;
  • atrybuty zdarzeń – m.in. onclick, onmouseover, do bezpośredniego podpinania JS bez zewnętrznych skryptów;
  • dostępność – skróty accesskey i atrybuty aria-* zwiększające wsparcie dla czytników ekranu.

Dostępne wartości atrybutu type to:

  • button – zwykły przycisk bez akcji domyślnej (idealny do JS),
  • submit – wysyła dane formularza,
  • reset – czyści formularz do wartości domyślnych.

Przykład użycia atrybutu type w praktyce:

<button type="submit">Wyślij formularz</button>
<button type="reset">Wyczyść</button>
<button type="button">Akcja JS</button>

Przykłady atrybutów name/value oraz disabled:

<button name="action" value="save" type="submit">Zapisz</button>
<button disabled>Nieaktywny przycisk</button>

Pełna lista (np. w webref.pl) podkreśla, że <button> może znajdować się wewnątrz <form>, a jego zawartość obejmuje także elementy jak <div>, <img> czy <ul>.

Integracja z formularzami HTML

Przykład użycia przycisku w formularzu z ikoną SVG:

<form>
<button type="submit">
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
</svg>
Wyślij
</button>

<input type="button" value="Zwykły input">
<button type="reset">Resetuj</button>
<button disabled>Nieaktywny</button>
</form>

Kliknięcie przycisku z typem submit automatycznie wyśle dane formularza.

Stylizacja przycisków za pomocą CSS

Domyślny wygląd <button> jest podstawowy — CSS pozwala na pełne dostosowanie. Oto przykładowy, responsywny styl:

.button {
background-color: #4CAF50; /* Zielone tło */
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
display: inline-block;
text-decoration: none;
}
.button:hover {
background-color: #45a049;
}
.button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}

Zastosowanie klasy przycisku w HTML:

<button class="button">Stylizowany przycisk</button>
<a href="https://twojastrona.pl" class="button">Link jako przycisk</a>

Link z klasą „button” może wyglądać jak przycisk, ale <button> jest semantycznie lepszy dla akcji (a link dla nawigacji).

Dla lepszej responsywności można dodać media queries:

@media (max-width: 600px) {
.button {
width: 100%;
padding: 15px;
}
}

Interakcja z JavaScript – dynamiczne przyciski

Prosty przykład użycia zdarzenia onclick:

<button onclick="alert('Kliknięto przycisk!')">Test</button>

Zaawansowane użycie z addEventListener i manipulacją DOM:

<!DOCTYPE html>
<html>
<head>
<style>
.module { border: 1px solid #ccc; padding: 20px; margin: 10px 0; }
</style>
</head>
<body>
<button id="test">Wstaw moduł</button>
<div id="container"></div>

<script>
const btn = document.querySelector('#test');
const container = document.getElementById('container');

btn.addEventListener('click', () => {
const html = `
<div class="module">
<h2>Dynamiczny tytuł</h2>
<p>To jest <strong>wstawiony HTML</strong></p>
<button class="button">Podprzycisk</button>
</div>
`;
container.innerHTML = html; // Wstawia HTML dynamicznie
console.log(btn.tagName); // Wyświetla "BUTTON"
});
</script>
</body>
</html>

Tutaj innerHTML modyfikuje zawartość kontenera, a tagName pozwala zidentyfikować typ elementu.

Dobre praktyki, dostępność i błędy do uniknięcia

Poniżej znajdziesz kluczowe zasady, które warto stosować przy pracy z przyciskami:

  • Dostępność (a11y) – używaj aria-label dla przycisków ikonowych, zapewnij widoczny focus i testuj nawigację klawiaturą;
  • Semantyka – preferuj <button> zamiast <div onclick>, ponieważ przyciski są natywnie dostępne i obsługują klawiaturę;
  • Bezpieczeństwo – unikaj ustawiania innerHTML na danych pochodzących z niezaufanych źródeł (ryzyko XSS);
  • Responsywność i wydajność – testuj na urządzeniach mobilnych; rozważ touch-action: manipulation, aby zredukować opóźnienia przy dotyku;
  • Kontrola zachowania w formularzach – w przyciskach używanych przez JS wewnątrz formularzy jawnie ustawiaj type="button", aby uniknąć przypadkowego wysłania danych;
  • Spójność UI – stosuj wspólne klasy (np. .button) i stany (hover, focus, disabled), aby zachować jednolity wygląd komponentów.