HTML Academy · Oppitunti

button-elementti: submit, reset ja button

Käynnistä lomakkeen lähetys, nollaus tai mukautettu toiminto painikkeilla.

Oppitunti 4/413 vaihetta

button-elementti: submit, reset ja button on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.

button-elementti

<button>-elementti on ensisijainen tapa luoda napsautettavia ohjaimia:

<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" lähettää lomakkeen, kun painiketta napsautetaan:

<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" tyhjentää kaikki lomakekentät ja palauttaa ne oletusarvoihinsa:

<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" ei tee oletusarvoisesti mitään — liittäkää mukaan 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 vs input[type=submit]

<button>-elementtiä suositellaan käytettäväksi <input type="submit">-elementin sijaan:

<!-- 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 -->

Käytöstä poistettu painike

Poistakaa painike käytöstä disabled-attribuutilla:

<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;

Lataustilan malli

Näyttäkää lataustila lomaketta lähetettäessä:

<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>

formaction- ja formmethod-ohitukset

Ohittakaa lomakkeen toiminto tai metodi tietyn painikkeen kohdalla:

<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>

Painike ARIA-määrityksillä

Mukautetut painikkeet tarvitsevat ARIA-määrityksiä, jos ne näyttävät erilaisilta kuin natiivipainikkeet:

<!-- 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>

Painikkeiden saavutettavuuden parhaat käytännöt

Painikkeiden saavutettavuuden tarkistuslista:

Määrittäkää aina type — älkää koskaan luottako oletusarvoon
Käyttäkää aria-label-määritettä vain kuvakkeesta koostuvissa painikkeissa
Käyttäkää aria-pressed-määritettä vaihtopainikkeissa
Käytöstä poistetut painikkeet: harkitkaa yhdistelmää aria-disabled="true" + JavaScript, jotta painike säilyy kohdistettavana
Älkää koskaan käyttäkö <div>- tai <span>-elementtiä painikkeena

Napsautusalue ja kosketuskohteet

Painikkeilla on oltava kosketuskäyttäjille riittävän suuri napautuskohde:

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;
}

Pikatarkistus

Mitä tapahtuu, jos jätätte type-attribuutin pois lomakkeen sisällä olevasta painikkeesta?

Vastaa interaktiivisessa oppitunnissa

Kertaus: button-elementti

Painikkeen perusteet:

type="submit" — lähettää lomakkeen
type="reset" — palauttaa kaikki kentät oletusarvoihin
type="button" — ei oletustoimintoa; liittäkää mukaan JavaScript
Määrittäkää type aina — oletusarvo on submit
Suosikaa <button>-elementtiä <input type="submit">-elementin sijaan
Käyttäkää aria-label-määritettä vain kuvakkeesta koostuvissa painikkeissa

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 40
Oppitunnit: 159

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”button-elementti: submit, reset ja button” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “button-elementti: submit, reset ja button”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”button-elementti: submit, reset ja button”?

Käynnistä lomakkeen lähetys, nollaus tai mukautettu toiminto painikkeilla. Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”button-elementti: submit, reset ja button”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?

Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

form-elementti: action, method ja enctype
Input-tyypit: text, password, email, number ja tel
label-elementti ja saavutettavuus
button-elementti: submit, reset ja button

← Takaisin: HTML Academy