<button>

Klikalny przycisk: wysyła formularz, czyści go albo uruchamia akcję na stronie.

Wyświetlanie: inline-block
Znacznik zamykający: Wymagany
Dozwolona zawartość: Treść frazowa bez elementów interaktywnych

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Atrybuty
Atrybuty w praktyce
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

HTML

<button type="button">
  <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true">
    <path d="M4 2 L14 8 L4 14 Z" fill="currentColor" />
  </svg>
  Uruchom kod
</button>
<button type="button" disabled>Zapisz (brak zmian)</button>

Podgląd

Definicja i zastosowanie

Element <button> tworzy przycisk, który można kliknąć myszą, stuknąć palcem albo aktywować klawiszem Enter lub spacją. Od razu działa z klawiaturą i czytnikami ekranu, czego nie zapewni <div> z obsługą kliknięcia.

Zachowanie określa atrybut type. Wewnątrz formularza przycisk bez tego atrybutu ma typ submit i wysyła formularz, co bywa źródłem błędów: kliknięcie „Pokaż hasło” niespodziewanie wysyła dane. Przyciskom, które tylko uruchamiają kod JavaScript, zawsze nadawaj type="button".

W przeciwieństwie do <input type="submit"> przycisk <button> może zawierać HTML: ikonę SVG, obraz albo pogrubiony tekst. Nie może jednak zawierać innych elementów interaktywnych, takich jak link czy drugi przycisk.

Składnia

<button type="button">Tekst przycisku</button>

Atrybuty

type
submit | reset | button
Rodzaj przycisku. submit (domyślnie w formularzu) wysyła formularz, reset przywraca wartości początkowe wszystkich pól, a button sam z siebie nic nie robi i czeka na Twój kod JavaScript.
disabled
atrybut logiczny
Wyłącza przycisk: nie da się go kliknąć ani wybrać klawiszem Tab. Samo wyszarzenie nie mówi użytkownikowi, dlaczego przycisk nie działa, więc wyjaśnij to obok.
name / value
tekst
Para wysyłana z formularzem, gdy formularz wysłano właśnie tym przyciskiem. Dzięki temu serwer wie, który z kilku przycisków kliknięto, na przykład „Zapisz szkic” czy „Opublikuj”.
form
id formularza
Przypisuje przycisk do formularza o podanym id, nawet jeśli przycisk stoi w kodzie poza nim, na przykład w stopce okna albo na pasku u dołu ekranu.
formaction / formmethod / formnovalidate / formtarget
jak atrybuty `action`, `method`, `novalidate` i `target` formularza
Nadpisują ustawienia formularza tylko dla tego przycisku. Najczęściej przydaje się formnovalidate: przycisk „Zapisz szkic” może wysłać niekompletny formularz bez walidacji, a „Wyślij do oceny” nadal wymaga wypełnienia pól.
popovertarget
id elementu z atrybutem `popover`
Otwiera i zamyka wskazany element z atrybutem popover bez pisania JavaScriptu. Dodatkowy atrybut popovertargetaction (toggle, show, hide) określa, co ma się stać po kliknięciu. Działa we wszystkich głównych przeglądarkach od początku 2025 roku.
commandfor / command
id elementu / show-modal | close | toggle-popover | show-popover | hide-popover
Wywołuje polecenie na wskazanym elemencie bez JavaScriptu: command="show-modal" otwiera okno <dialog> jako modal, a command="close" je zamyka. To nowość, która działa we wszystkich głównych przeglądarkach dopiero od grudnia 2025 roku, więc w starszych wersjach przycisk nic nie zrobi.

Atrybut	Wartości	Opis
type	submit \| reset \| button	Rodzaj przycisku. `submit` (domyślnie w formularzu) wysyła formularz, `reset` przywraca wartości początkowe wszystkich pól, a `button` sam z siebie nic nie robi i czeka na Twój kod JavaScript.
disabled	atrybut logiczny	Wyłącza przycisk: nie da się go kliknąć ani wybrać klawiszem Tab. Samo wyszarzenie nie mówi użytkownikowi, dlaczego przycisk nie działa, więc wyjaśnij to obok.
name / value	tekst	Para wysyłana z formularzem, gdy formularz wysłano właśnie tym przyciskiem. Dzięki temu serwer wie, który z kilku przycisków kliknięto, na przykład „Zapisz szkic” czy „Opublikuj”.
form	id formularza	Przypisuje przycisk do formularza o podanym `id`, nawet jeśli przycisk stoi w kodzie poza nim, na przykład w stopce okna albo na pasku u dołu ekranu.
formaction / formmethod / formnovalidate / formtarget	jak atrybuty `action`, `method`, `novalidate` i `target` formularza	Nadpisują ustawienia formularza tylko dla tego przycisku. Najczęściej przydaje się `formnovalidate`: przycisk „Zapisz szkic” może wysłać niekompletny formularz bez walidacji, a „Wyślij do oceny” nadal wymaga wypełnienia pól.
popovertarget	id elementu z atrybutem `popover`	Otwiera i zamyka wskazany element z atrybutem `popover` bez pisania JavaScriptu. Dodatkowy atrybut `popovertargetaction` (`toggle`, `show`, `hide`) określa, co ma się stać po kliknięciu. Działa we wszystkich głównych przeglądarkach od początku 2025 roku.
commandfor / command	id elementu / show-modal \| close \| toggle-popover \| show-popover \| hide-popover	Wywołuje polecenie na wskazanym elemencie bez JavaScriptu: `command="show-modal"` otwiera okno `<dialog>` jako modal, a `command="close"` je zamyka. To nowość, która działa we wszystkich głównych przeglądarkach dopiero od grudnia 2025 roku, więc w starszych wersjach przycisk nic nie zrobi.

Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.

Atrybuty w praktyce

type

submit | reset | button

Rodzaj przycisku. submit (domyślnie w formularzu) wysyła formularz, reset przywraca wartości początkowe wszystkich pól, a button sam z siebie nic nie robi i czeka na Twój kod JavaScript.

HTML

<form>
  <label>Twoja odpowiedź <input type="text" name="answer" value="&lt;p&gt;"></label>
  <p>
    <button type="submit">Sprawdź</button>
    <button type="reset">Wyczyść</button>
    <button type="button">Podpowiedź</button>
  </p>
</form>

Podgląd

disabled

atrybut logiczny

Wyłącza przycisk: nie da się go kliknąć ani wybrać klawiszem Tab. Samo wyszarzenie nie mówi użytkownikowi, dlaczego przycisk nie działa, więc wyjaśnij to obok.

HTML

<button type="submit" disabled>Wyślij projekt</button>
<p><small>Najpierw dodaj link do repozytorium.</small></p>

Podgląd

name / value

tekst

Para wysyłana z formularzem, gdy formularz wysłano właśnie tym przyciskiem. Dzięki temu serwer wie, który z kilku przycisków kliknięto, na przykład „Zapisz szkic” czy „Opublikuj”.

HTML

<form>
  <textarea name="post" rows="2" cols="30" aria-label="Treść wpisu">Mój pierwszy wpis</textarea>
  <p>
    <button type="submit" name="action" value="draft">Zapisz szkic</button>
    <button type="submit" name="action" value="publish">Opublikuj</button>
  </p>
</form>

Podgląd

form

id formularza

Przypisuje przycisk do formularza o podanym id, nawet jeśli przycisk stoi w kodzie poza nim, na przykład w stopce okna albo na pasku u dołu ekranu.

HTML

<form id="profile-form">
  <label>Imię <input type="text" name="name" value="Ania"></label>
</form>
<footer>
  <button type="submit" form="profile-form">Zapisz profil</button>
</footer>

Podgląd

formaction / formmethod / formnovalidate / formtarget

jak atrybuty `action`, `method`, `novalidate` i `target` formularza

Nadpisują ustawienia formularza tylko dla tego przycisku. Najczęściej przydaje się formnovalidate: przycisk „Zapisz szkic” może wysłać niekompletny formularz bez walidacji, a „Wyślij do oceny” nadal wymaga wypełnienia pól.

HTML

<form action="/zadania/wyslij" method="post">
  <label>Link do repozytorium <input type="url" name="repo" required></label>
  <p>
    <button type="submit">Wyślij do oceny</button>
    <button type="submit" formaction="/zadania/szkic" formnovalidate>Zapisz szkic</button>
  </p>
</form>

Podgląd

popovertarget

id elementu z atrybutem `popover`

Otwiera i zamyka wskazany element z atrybutem popover bez pisania JavaScriptu. Dodatkowy atrybut popovertargetaction (toggle, show, hide) określa, co ma się stać po kliknięciu. Działa we wszystkich głównych przeglądarkach od początku 2025 roku.

HTML

<button type="button" popovertarget="hint">Pokaż podpowiedź</button>
<div id="hint" popover>
  Pamiętaj o zamknięciu znacznika <code>&lt;/p&gt;</code>.
</div>

Podgląd

commandfor / command

id elementu / show-modal | close | toggle-popover | show-popover | hide-popover

Wywołuje polecenie na wskazanym elemencie bez JavaScriptu: command="show-modal" otwiera okno <dialog> jako modal, a command="close" je zamyka. To nowość, która działa we wszystkich głównych przeglądarkach dopiero od grudnia 2025 roku, więc w starszych wersjach przycisk nic nie zrobi.

HTML

<button type="button" commandfor="quiz-rules" command="show-modal">Zasady quizu</button>
<dialog id="quiz-rules">
  <p>Masz 10 minut na 5 pytań. Każde ma jedną poprawną odpowiedź.</p>
  <button type="button" commandfor="quiz-rules" command="close">Zamknij</button>
</dialog>

Podgląd

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Nie buduj przycisków z <div> czy <span>. Straciłbyś obsługę klawiatury, fokus i rolę przycisku, które <button> ma za darmo.
Jeśli kliknięcie przenosi na inną stronę, to jest link <a>, a nie przycisk.
Przycisk z samą ikoną potrzebuje dostępnej nazwy, na przykład aria-label="Zamknij".

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs