0Pricing
HTML Academy · Lekcja

Element button: submit, reset i button

Wywoływać wysyłanie i resetowanie formularza lub własne działania za pomocą przycisków.

Element button: submit, reset i button to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Element button

Element <button> to podstawowy sposób tworzenia klikalnych elementów sterujących:

<button type="submit">Submit</button>
<button type="reset">Clear Form</button>
<button type="button">Do Something</button>

<!-- Three types, each with a different default behavior -->
<!-- Always specify type — the default is submit inside forms -->

type=submit

type="submit" przesyła formularz po kliknięciu:

<form action="/register" method="post">
  <input type="email" name="email">
  <button type="submit">Create Account</button>
</form>
<!-- Triggers form validation, then sends the form data -->
<!-- Also triggered by pressing Enter in most text inputs -->

type=reset

type="reset" czyści wszystkie pola formularza, przywracając ich wartości domyślne:

<form>
  <input type="text" name="name" value="">  <!-- empty default -->
  <input type="number" name="qty" value="1">  <!-- default: 1 -->
  <button type="reset">Clear</button>
</form>
<!-- Clicking reset restores qty to 1 and clears name -->
<!-- Use sparingly — users often accidentally reset forms -->

type=button

type="button" domyślnie nie robi nic — należy dołączyć JavaScript:

<button type="button" id="toggle-theme">Toggle Dark Mode</button>

<script>
document.getElementById('toggle-theme').addEventListener('click', () => {
  document.body.classList.toggle('dark');
});
</script>
<!-- type="button" prevents accidental form submission
     Always use this for non-submit buttons -->

button a input[type=submit]

<button> jest preferowany zamiast <input type="submit">:

<!-- Old way (limited): -->
<input type="submit" value="Submit">

<!-- Modern way (flexible — can contain HTML): -->
<button type="submit">
  <svg><!-- icon --></svg>
  Submit Form
</button>
<!-- button can contain icons, emphasis, and any inline HTML
     input type=submit can only have plain text via the value attribute -->

Wyłączony przycisk

Wyłącz przycisk za pomocą atrybutu disabled:

<button type="submit" disabled>Submit</button>
<!-- Disabled buttons:
  - Cannot be clicked
  - Not in tab order
  - NOT submitted with the form
  - Browser renders them grayed out -->

<!-- Enable/disable with JavaScript: -->
btn.disabled = true;
btn.disabled = false;

Wzorzec stanu ładowania

Wyświetl stan ładowania podczas wysyłania formularza:

<button type="submit" id="submit-btn">
  <span id="btn-text">Submit</span>
  <span id="btn-spinner" hidden aria-hidden="true">⏳</span>
</button>

<script>
form.addEventListener('submit', () => {
  document.getElementById('submit-btn').disabled = true;
  document.getElementById('btn-text').textContent = 'Submitting...';
  document.getElementById('btn-spinner').hidden = false;
  document.getElementById('btn-spinner').removeAttribute('aria-hidden');
});
</script>

Nadpisywanie formaction i formmethod

Nadpisz action/method formularza dla konkretnego przycisku:

<form action="/save" method="post">
  <input type="text" name="title">

  <!-- Save: uses form defaults -->
  <button type="submit">Save Draft</button>

  <!-- Publish: overrides action and method -->
  <button type="submit" formaction="/publish" formmethod="post">
    Publish Now
  </button>
</form>

Przycisk z ARIA

Niestandardowe przyciski wymagają ARIA, jeśli wyglądają inaczej niż przyciski natywne:

<!-- Icon-only button -->
<button type="button" aria-label="Close dialog">
  <svg aria-hidden="true"><!-- X icon --></svg>
</button>

<!-- Toggle button -->
<button type="button" aria-pressed="false" id="bold-btn">
  Bold
</button>
<script>
document.getElementById('bold-btn').addEventListener('click', function() {
  const pressed = this.getAttribute('aria-pressed') === 'true';
  this.setAttribute('aria-pressed', !pressed);
});
</script>

Najlepsze praktyki dotyczące dostępności przycisków

Lista kontrolna dostępności przycisków:

  • Zawsze określaj type — nigdy nie polegaj na wartości domyślnej
  • Używaj aria-label w przypadku przycisków zawierających tylko ikonę
  • Używaj aria-pressed w przypadku przycisków przełączających
  • Wyłączone przyciski: rozważ użycie aria-disabled="true" + JavaScript, aby zachować możliwość ustawienia na nich fokusu
  • Nigdy nie używaj <div> ani <span> jako przycisków

Obszar kliknięcia i cele dotykowe

Przyciski muszą mieć odpowiednio duży obszar dotyku dla użytkowników korzystających z ekranów dotykowych:

button {
  min-height: 44px;   /* Apple HIG minimum */
  min-width: 44px;    /* WCAG 2.5.5 (AAA) recommends 44x44 -->
  padding: 0.5rem 1rem;
  cursor: pointer;
}

/* Increase tap area without changing visual size: */
button {
  position: relative;
}
button::before {
  content: '';
  position: absolute;
  inset: -8px;
}

Szybkie sprawdzenie

Co się stanie w przypadku pominięcia atrybutu type w przycisku znajdującym się w formularzu?

Podsumowanie: element button

Najważniejsze informacje o przyciskach:

  • type="submit" — przesyła formularz
  • type="reset" — przywraca wartości domyślne wszystkich pól
  • type="button" — brak domyślnego działania; należy dołączyć JavaScript
  • Zawsze określaj type — wartością domyślną jest submit
  • Preferuj <button> zamiast <input type="submit">
  • Używaj aria-label w przypadku przycisków zawierających tylko ikonę

Często zadawane pytania

Czy lekcja „Element button: submit, reset i button” jest bezpłatna?

Tak — pełny tekst „Element button: submit, reset i button” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Element button: submit, reset i button”?

Wywoływać wysyłanie i resetowanie formularza lub własne działania za pomocą przycisków. Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Element button: submit, reset i button”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Element form: action, method i enctype
  2. Typy input: text, password, email, number i tel
  3. Element label i dostępność
  4. Element button: submit, reset i button
← Powrót do HTML Academy