HTML Academy · leksjon

Elementet button: submit, reset og button

Utløs innsending av skjema, tilbakestilling eller egendefinerte handlinger med knapper.

Leksjon 4 av 413 trinn

Elementet button: submit, reset og button er en gratis leksjon i HTML Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i HTML Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i HTML Academy inneholder totalt 4 leksjoner.

button-elementet

<button>-elementet er den primære måten å lage klikkbare kontroller på:

<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" sender inn skjemaet når det klikkes:

<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" tømmer alle skjemafelt og tilbakestiller dem til standardverdiene:

<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" gjør ingenting som standard – koble til 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 kontra input[type=submit]

<button> foretrekkes fremfor <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 -->

Deaktivert knapp

Deaktiver en knapp med disabled-attributtet:

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

Mønster for innlastingstilstand

Vis innlastingstilstanden mens et skjema sendes inn:

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

Overstyringer med formaction og formmethod

Overstyr skjemaets handling eller metode for en bestemt knapp:

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

Knapp med ARIA

Egendefinerte knapper trenger ARIA hvis de ser annerledes ut enn innebygde knapper:

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

Beste praksis for tilgjengelige knapper

Sjekkliste for tilgjengelige knapper:

Angi alltid type – stol aldri på standardverdien
Bruk aria-label for knapper som bare inneholder et ikon
Bruk aria-pressed for veksleknapper
Deaktiverte knapper: vurder å bruke aria-disabled="true" + JavaScript for å holde dem fokuserbare
Bruk aldri <div> eller <span> som knapper

Klikkområde og berøringsmål

Knapper må ha tilstrekkelig størrelse på trykkmålet for brukere på berøringsenheter:

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

Hurtigsjekk

Hva skjer hvis man utelater type-attributtet på en knapp i et skjema?

Besvar den i den interaktive leksjonen

Oppsummering: button-elementet

Det viktigste om knapper:

type="submit" – sender inn skjemaet
type="reset" – tilbakestiller alle felt til standardverdiene
type="button" – ingen standardvirkemåte; koble til JavaScript
Angi alltid type – standardverdien er submit
Foretrekk <button> fremfor <input type="submit">
Bruk aria-label for knapper som bare inneholder et ikon

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 40
Leksjoner: 159

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Elementet button: submit, reset og button» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien HTML Academy, inkludert «Elementet button: submit, reset og button», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i HTML Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Elementet button: submit, reset og button»?

Utløs innsending av skjema, tilbakestilling eller egendefinerte handlinger med knapper. Du øver på HTML Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med HTML Academy?

Ingen tidligere erfaring er nødvendig. HTML Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Elementet button: submit, reset og button»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne HTML Academy-leksjonen?

Ja. Alle HTML Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Elementet form: action, method og enctype
Inputtyper: text, password, email, number og tel
Elementet label og tilgjengelighet
Elementet button: submit, reset og button

← Tilbake til HTML Academy