Dokumentacja HTML z przykładami: Przycisk

Q: Jak zrobić przycisk w HTML?

Napisz Click me . Tekst między znacznikami to etykieta. Dodaj nasłuchiwanie click w JavaScripcie, żeby przycisk coś robił, albo umieść go w z type="submit", żeby wysyłał formularz.

Q: Jaki jest domyślny typ przycisku w HTML?

submit. bez atrybutu type wewnątrz formularza po kliknięciu wysyła ten formularz, dlatego zwykły przycisk w formularzu potrafi przeładować stronę. Każdemu przyciskowi, który ma uruchamiać JavaScript, dopisz type="button".

Q: Czym różni się button od input type=submit?

Oba wysyłają formularz. może zawierać HTML (ikonę, pogrubiony tekst) między znacznikami, a bierze etykietę z atrybutu value i może mieć tylko zwykły tekst. Większość współczesnego kodu używa .

Q: Jak wyłączyć przycisk w HTML?

Dodaj atrybut disabled: Save . Wyłączonego przycisku nie da się kliknąć ani ustawić na nim fokusu, a jego nazwa i wartość nie są wysyłane z formularzem. Aby go znowu włączyć, usuń atrybut (btn.disabled = false w JavaScripcie).

Q: Jak sprawić, żeby przycisk HTML przenosił na inną stronę?

Użyj linku wystylizowanego jak przycisk: See pricing . służy do akcji na bieżącej stronie. Owinięcie przycisku w to niepoprawny HTML.

Q: Dlaczego mój przycisk przeładowuje stronę?

Jest wewnątrz i nie ma type, więc jest przyciskiem wysyłającym: przeglądarka wysyła formularz i wczytuje odpowiedź. Dodaj mu type="button" albo wywołaj event.preventDefault() w nasłuchiwaniu submit, jeśli obsługujesz formularz w JavaScripcie.

Jak zrobić przycisk w HTML

Przycisk to element <button>. Treść między znacznikami to to, co widzi użytkownik, a type="button" mówi, że przycisk uruchamia twój skrypt, a nie wysyła formularza. Kliknij go w podglądzie:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button</title>
</head>
<body>
  <button type="button" id="like">Like</button>
  <p>Likes: <span id="count">0</span></p>

  <script>
    const count = document.querySelector('#count');
    document.querySelector('#like').addEventListener('click', () => {
      count.textContent = Number(count.textContent) + 1;
    });
  </script>
</body>
</html>

To wszystko, czego potrzebuje działający przycisk: etykieta, type i coś, co nasłuchuje click. Przeglądarka pozwala ustawić na nim fokus z klawiatury i aktywuje go klawiszem Enter lub Spacją, więc użytkownicy klawiatury dostają to za darmo. <div> z obsługą kliknięcia nie dostaje nic z tego.

Możesz też spotkać onclick="..." wpisane bezpośrednio w znacznik. Działa, ale addEventListener trzyma skrypt poza kodem HTML i pozwala kilku funkcjom nasłuchującym dzielić jeden przycisk.

Trzy typy przycisków

Atrybut type decyduje, co robi przycisk po naciśnięciu.

`type`	Co robi	Do czego go używać
`submit`	Wysyła formularz, do którego należy. To wartość domyślna.	Główna akcja formularza
`button`	Sam nic nie robi; decyduje twój JavaScript	Przełączniki, okna dialogowe, liczniki, wszystko ze skryptem
`reset`	Przywraca każde pole formularza do wartości początkowej	Rzadko; użytkownicy klikają go przez pomyłkę

Wpisz coś, a potem wypróbuj każdy przycisk. Podgląd nie opuszcza strony przy wysłaniu formularza; pokazuje dane, które formularz by wysłał.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button types</title>
</head>
<body>
  <form>
    <label>Name <input name="name" value="Ada"></label>
    <p>
      <button type="submit">Submit</button>
      <button type="reset">Reset</button>
      <button type="button" id="upper">Uppercase</button>
    </p>
  </form>

  <script>
    document.querySelector('#upper').addEventListener('click', () => {
      const field = document.querySelector('input[name="name"]');
      field.value = field.value.toUpperCase();
    });
  </script>
</body>
</html>

Reset przywraca wartość zapisaną w HTML (Ada), a nie puste pole. A jeśli usuniesz type="button" z Uppercase, stanie się przyciskiem wysyłającym: zamieni imię na wielkie litery, a potem wyśle formularz.

Przycisk submit w HTML: wysyłanie nazwy i wartości

Przycisk wysyłający może mieć własne name i value. Są one wysyłane z formularzem tylko wtedy, gdy to on wysłał formularz, więc dwa przyciski mogą dzielić jeden formularz i powiedzieć serwerowi, którą akcję wybrano:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Submit buttons</title>
</head>
<body>
  <form>
    <label>Title <input name="title" value="My first post" required></label>
    <p>
      <button type="submit" name="action" value="draft">Save draft</button>
      <button type="submit" name="action" value="publish">Publish</button>
    </p>
  </form>
</body>
</html>

Naciśnij Publish, a formularz wyśle title=My first post i action=publish. Wyczyść tytuł i naciśnij którykolwiek przycisk: required zatrzymuje wysyłanie, a przeglądarka pokazuje własny komunikat. Naciśnięcie Enter w polu tekstowym też wysyła formularz, a przeglądarka traktuje to jak naciśnięcie pierwszego przycisku wysyłającego, więc wysyła action=draft.

Przyciski wysyłające przyjmują też atrybuty, które nadpisują ustawienia formularza dla tego jednego przycisku: formaction (inny adres URL), formmethod, formtarget i formnovalidate, który pomija walidację. formnovalidate to typowy wybór dla przycisku "Zapisz szkic", który ma działać, gdy wymagane pola są jeszcze puste.

Przycisk umieszczony poza formularzem nadal może go wysłać dzięki atrybutowi form, który przyjmuje id formularza: <button type="submit" form="signup">Sign up</button>.

Wyłączone przyciski

Atrybut disabled wyłącza przycisk. Wyłączony przycisk ignoruje kliknięcia, jest pomijany przez Tab i nie jest wysyłany z formularzem. Przeglądarki dodatkowo go wyszarzają. Częsty wzorzec to trzymanie przycisku wysyłającego wyłączonego, dopóki nie zostanie spełniony warunek:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Disabled button</title>
</head>
<body>
  <form>
    <label>
      <input type="checkbox" id="agree" name="terms" value="accepted">
      I accept the terms
    </label>
    <p><button type="submit" id="go" disabled>Create account</button></p>
  </form>

  <script>
    const agree = document.querySelector('#agree');
    const go = document.querySelector('#go');
    agree.addEventListener('change', () => {
      go.disabled = !agree.checked;
    });
  </script>
</body>
</html>

W JavaScripcie button.disabled to właściwość logiczna: ustaw ją na true lub false. W HTML liczy się obecność atrybutu, więc disabled="false" nadal wyłącza przycisk.

Wyłączony przycisk nie podaje powodu, dla którego jest wyłączony, a użytkownicy klawiatury i czytników ekranu poruszający się klawiszem Tab nigdy na niego nie trafiają. Gdy powód nie jest oczywisty, napisz go obok przycisku albo zostaw przycisk włączony i pokaż komunikat o błędzie po jego naciśnięciu.

Stylowanie przycisku w CSS

Przeglądarki rysują przyciski z własną czcionką, obramowaniem i tłem. Kilka właściwości zastępuje to wszystko. Zachowaj widoczny styl fokusu: dzięki niemu użytkownicy klawiatury widzą, gdzie są.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled buttons</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      font: inherit;
      padding: 10px 18px;
      border: 2px solid #2563eb;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      cursor: pointer;
    }
    .btn:hover { background: #1d4ed8; border-color: #1d4ed8; }
    .btn:active { transform: translateY(1px); }
    .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .btn-secondary { background: #fff; color: #2563eb; }
    .btn-secondary:hover { background: #e5e7eb; }
  </style>
</head>
<body>
  <button type="button" class="btn">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn" disabled>Disabled</button>
</body>
</html>

Do czego służy każda reguła:

font: inherit sprawia, że przycisk używa czcionki strony. Bez tego przyciski używają mniejszej czcionki formularzy przeglądarki (13.33px w Chrome i Firefoksie).
cursor: pointer pokazuje kursor w kształcie dłoni. Domyślnie przyciski pokazują zwykłą strzałkę.
:hover, :active i :focus-visible stylizują stany najechania, wciśnięcia i fokusu z klawiatury. :focus-visible pokazuje ramkę przy fokusie z klawiatury, ale nie po kliknięciu myszą, więc nie musisz usuwać outline, żeby jej uniknąć.
:disabled wybiera przyciski z atrybutem disabled.

Naciśnij Tab w podglądzie, żeby zobaczyć, jak bursztynowa ramka fokusu przechodzi między dwoma pierwszymi przyciskami. Wyłączony jest pomijany. (Na Macu Safari i Firefox przechodzą klawiszem Tab do przycisków tylko wtedy, gdy w ustawieniach systemu włączona jest nawigacja klawiaturą; w Safari Option+Tab działa i bez tego.) Pełną listę stanów znajdziesz na stronie CSS hover.

Przyciski z ikonami

Ponieważ <button> może zawierać HTML, ikona trafia do środka obok tekstu. Przycisk z samą ikoną nie ma tekstu, który czytniki ekranu mogłyby ogłosić, więc nadaj mu aria-label:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Icon buttons</title>
  <style>
    button {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font: inherit;
      padding: 8px 12px;
      border: 1px solid #111827;
      border-radius: 6px;
      background: #fff;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button type="button">
    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M2 8h12M8 2v12" stroke="#16a34a" stroke-width="2"/>
    </svg>
    Add item
  </button>

  <button type="button" aria-label="Delete">
    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M3 3l10 10M13 3L3 13" stroke="#dc2626" stroke-width="2"/>
    </svg>
  </button>
</body>
</html>

aria-hidden="true" na SVG usuwa go z drzewa dostępności, więc pierwszy przycisk jest ogłaszany jako "Add item, przycisk", a drugi jako "Delete, przycisk".

button a input type="submit"

<input type="submit"> to starszy sposób na przycisk wysyłający. Oba wysyłają formularz tak samo; różnią się tym, co mogą zawierać.

<input type="submit" value="Send">   <!-- label comes from value, text only -->
<button type="submit">Send</button>  <!-- label is the content, HTML allowed -->

	`<button>`	`<input type="submit">`
Etykieta	Treść między znacznikami	Atrybut `value`
Może zawierać ikony lub kod HTML	Tak	Nie
Znacznik zamykający	Wymagany	Brak (element pusty)
Typ domyślny	`submit`	Zawsze submit

Używaj <button>. Jedyny powód, by zostawić <input type="submit">, to istniejący CSS lub JavaScript, który go wybiera. Są też <input type="button"> i <input type="reset">, ten sam pomysł dla dwóch pozostałych typów.

Przycisk czy link?

Przycisk robi coś na bieżącej stronie: wysyła, otwiera, przełącza, usuwa. Link przenosi pod inny adres URL. Jeśli kliknięcie zmienia pasek adresu, powinien to być <a href>, wystylizowany jak przycisk, jeśli wymaga tego projekt. Ten wzorzec i powód, dla którego przycisk w linku jest niepoprawny, opisuje strona przycisk jako link.

Dostępność

Używaj prawdziwego <button>. Można ustawić na nim fokus, działa z Enter i Spacją i jest ogłaszany jako przycisk. Odtworzenie tego na <div> wymaga role, tabindex i obsługi klawiszy, a i tak zwykle jest niekompletne.
Każdy przycisk potrzebuje nazwy: swojego tekstu albo aria-label, gdy ma tylko ikonę.
Zachowaj widoczny styl fokusu. outline: none bez zamiennika zostawia użytkowników klawiatury bez orientacji.
Zadbaj, by cel był dość duży. WCAG 2.2 wymaga co najmniej 24 na 24 piksele CSS; padding jak w wystylizowanym przykładzie wyżej daje około 40 pikseli wysokości.
Przy przełączniku dodaj aria-pressed="true" lub "false" i aktualizuj go, gdy zmienia się stan.

Częste błędy

Przycisk w formularzu bez type. Wysyła formularz. Dopisz type="button" każdemu przyciskowi, który nie ma wysyłać.
Owijanie przycisku w link, <a href="/x"><button>Go</button></a>. To niepoprawny HTML, który w różnych przeglądarkach działa inaczej. Użyj jednego elementu: linku wystylizowanego jak przycisk.
Używanie <div onclick> jako przycisku. Nie da się do niego dojść klawiaturą.
Usuwanie ramki fokusu bez dodania stylu :focus-visible.
Pisanie disabled="false" w oczekiwaniu na włączony przycisk. Zamiast tego usuń atrybut.
Brak font: inherit i zdziwienie, że przyciski mają inną czcionkę niż reszta strony.

Najczęściej zadawane pytania

Jak zrobić przycisk w HTML?

Napisz <button type="button">Click me</button>. Tekst między znacznikami to etykieta. Dodaj nasłuchiwanie click w JavaScripcie, żeby przycisk coś robił, albo umieść go w <form> z type="submit", żeby wysyłał formularz.

Jaki jest domyślny typ przycisku w HTML?

submit. <button> bez atrybutu type wewnątrz formularza po kliknięciu wysyła ten formularz, dlatego zwykły przycisk w formularzu potrafi przeładować stronę. Każdemu przyciskowi, który ma uruchamiać JavaScript, dopisz type="button".

Czym różni się button od input type=submit?

Oba wysyłają formularz. <button> może zawierać HTML (ikonę, pogrubiony tekst) między znacznikami, a <input type="submit"> bierze etykietę z atrybutu value i może mieć tylko zwykły tekst. Większość współczesnego kodu używa <button>.

Jak wyłączyć przycisk w HTML?

Dodaj atrybut disabled: <button disabled>Save</button>. Wyłączonego przycisku nie da się kliknąć ani ustawić na nim fokusu, a jego nazwa i wartość nie są wysyłane z formularzem. Aby go znowu włączyć, usuń atrybut (btn.disabled = false w JavaScripcie).

Jak sprawić, żeby przycisk HTML przenosił na inną stronę?

Użyj linku wystylizowanego jak przycisk: <a href="/pricing" class="btn">See pricing</a>. <button> służy do akcji na bieżącej stronie. Owinięcie przycisku w <a> to niepoprawny HTML.

Dlaczego mój przycisk przeładowuje stronę?

Jest wewnątrz <form> i nie ma type, więc jest przyciskiem wysyłającym: przeglądarka wysyła formularz i wczytuje odpowiedź. Dodaj mu type="button" albo wywołaj event.preventDefault() w nasłuchiwaniu submit, jeśli obsługujesz formularz w JavaScripcie.

Powiązane zagadnienia