Naar de inhoud
Gratis naslagwerk over HTML
HTML leren en naslaan
Naslag / Formulieren

Het element <button>

Het <button>-element van HTML is een interactief element dat door een gebruiker wordt geactiveerd met een muis, toetsenbord, vinger, spraakcommando of andere ondersteunende technologie. Eenmaal geactiveerd voert het een actie uit, zoals het versturen van een formulier of het openen van een dialoogvenster.

Auteur: Maarten Soetens

Code 
<button class="favorite styled" type="button">Add to favorites</button>
Resultaat in de browser

Attributen

De attributen van dit element omvatten de globale attributen.

autofocus

Dit Booleaanse attribuut geeft aan dat de knop focus moet krijgen wanneer de pagina wordt geladen. Slechts één element in een document mag dit attribuut hebben.

command

Specificeert de actie die moet worden uitgevoerd op een element dat wordt bestuurd door een control-<button> die is opgegeven via het commandfor-attribuut. De mogelijke waarden zijn:
  • "show-modal"
    • : De knop toont een <dialog> als modaal venster. Als het dialoogvenster al modaal is, wordt geen actie ondernomen. Dit is een declaratief equivalent van het aanroepen van de HTMLDialogElement.showModal()-methode op het <dialog>-element.
  • "close"
    • : De knop sluit een <dialog>-element. Als het dialoogvenster al gesloten is, wordt geen actie ondernomen. Dit is een declaratief equivalent van het aanroepen van de HTMLDialogElement.close()-methode op het <dialog>-element. Wanneer gebruikt in combinatie met het value-attribuut, wordt de waarde van de knop doorgegeven als de returnValue-eigenschap van het dialoogvenster.
  • "request-close"
    • : De knop activeert een cancel-gebeurtenis op een <dialog>-element om de browser te verzoeken het te sluiten, gevolgd door een close-gebeurtenis. Dit verschilt van het close-commando doordat auteurs Event.preventDefault() kunnen aanroepen op de cancel-gebeurtenis om te voorkomen dat de <dialog> sluit. Als het dialoogvenster al gesloten is, wordt geen actie ondernomen. Dit is een declaratief equivalent van het aanroepen van de HTMLDialogElement.requestClose()-methode op het <dialog>-element. Wanneer gebruikt in combinatie met het value-attribuut van de knop, wordt de waarde doorgegeven als de returnValue-eigenschap van het dialoogvenster.
  • "show-popover"
    • : De knop toont een verborgen popover. Als je probeert een al zichtbare popover te tonen, wordt geen actie ondernomen. Zie Popover API voor meer details. Dit is gelijk aan het instellen van een waarde show voor het popovertargetaction-attribuut, en biedt ook een declaratief equivalent van het aanroepen van de HTMLElement.showPopover()-methode op het popover-element.
  • "hide-popover"
    • : De knop verbergt een zichtbare popover. Als je probeert een al verborgen popover te verbergen, wordt geen actie ondernomen. Zie Popover API voor meer details. Dit is gelijk aan het instellen van een waarde hide voor het popovertargetaction-attribuut, en biedt ook een declaratief equivalent van het aanroepen van de HTMLElement.hidePopover()-methode op het popover-element.
  • "toggle-popover"
    • : De knop schakelt een popover tussen zichtbaar en verborgen. Als de popover verborgen is, wordt hij getoond; als de popover zichtbaar is, wordt hij verborgen. Zie Popover API voor meer details. Dit is gelijk aan het instellen van een waarde toggle voor het popovertargetaction-attribuut, en biedt ook een declaratief equivalent van het aanroepen van de HTMLElement.togglePopover()-methode op het popover-element.
  • Aangepaste waarden
    • : Dit attribuut kan aangepaste waarden bevatten die worden voorafgegaan door twee koppeltekens (--). Knoppen met een aangepaste waarde versturen de CommandEvent naar het bestuurde element.

commandfor

Maakt van een <button>-element een commandoknop, die een bepaald interactief element bestuurt door het commando uit te voeren dat is opgegeven in het command-attribuut van de knop. Het commandfor-attribuut heeft als waarde de ID van het te besturen element. Dit is een meer algemene versie van popovertarget.

disabled

Dit Booleaanse attribuut verhindert dat de gebruiker met de knop kan interacteren: hij kan niet worden ingedrukt of gefocust.

form

Het <form>-element waaraan de knop wordt gekoppeld (zijn form owner). De waarde van dit attribuut moet de id zijn van een <form> in hetzelfde document. (Als dit attribuut niet is ingesteld, wordt de <button> gekoppeld aan het bovenliggende <form>-element, indien aanwezig.)

Met dit attribuut kun je <button>-elementen koppelen aan <form>-elementen die zich overal in het document bevinden, niet alleen binnen een <form>. Het kan ook een bovenliggend <form>-element overschrijven.

formaction

De URL die de door de knop verzonden gegevens verwerkt. Overschrijft het action-attribuut van de form owner van de knop. Heeft geen effect als er geen form owner is.

formenctype

Als de knop een submit-knop is (deze bevindt zich in of is gekoppeld aan een <form> en heeft niet type="button"), specificeert dit attribuut hoe de verzonden formuliergegevens worden gecodeerd. Mogelijke waarden:

  • application/x-www-form-urlencoded: De standaard als het attribuut niet wordt gebruikt.
  • multipart/form-data: Gebruikt om <input>-elementen te versturen waarvan het type-attribuut is ingesteld op file.
  • text/plain: Bedoeld als hulpmiddel bij het debuggen; mag niet worden gebruikt voor daadwerkelijke formulierverzending.

Als dit attribuut is opgegeven, overschrijft het het enctype-attribuut van de form owner van de knop.

formmethod

Als de knop een submit-knop is (deze bevindt zich in of is gekoppeld aan een <form> en heeft niet type="button"), specificeert dit attribuut de HTTP-methode die wordt gebruikt om het formulier te verzenden. Mogelijke waarden:

  • post: De gegevens van het formulier worden opgenomen in de body van het HTTP-verzoek wanneer dit naar de server wordt gestuurd. Gebruik dit wanneer het formulier gegevens bevat die niet openbaar mogen zijn, zoals inloggegevens.
  • get: De formuliergegevens worden toegevoegd aan de action-URL van het formulier, gescheiden door een ?, en de resulterende URL wordt naar de server gestuurd. Gebruik deze methode wanneer het formulier geen neveneffecten heeft, zoals zoekformulieren.
  • dialog: Deze methode geeft aan dat de knop het dialoogvenster sluit waaraan hij gekoppeld is, en verstuurt de formuliergegevens helemaal niet.

Indien opgegeven, overschrijft dit attribuut het method-attribuut van de form owner van de knop.

formnovalidate

Als de knop een submit-knop is, geeft dit Booleaanse attribuut aan dat het formulier niet moet worden gevalideerd bij het verzenden. Indien opgegeven, overschrijft dit attribuut het novalidate-attribuut van de form owner van de knop.

Dit attribuut is ook beschikbaar op <input type="image">- en <input type="submit">-elementen.

formtarget

Als de knop een submit-knop is, is dit attribuut een door de auteur gedefinieerde naam of een gestandaardiseerd, met een underscore voorafgegaan trefwoord dat aangeeft waar de respons van het verzenden van het formulier moet worden weergegeven. Dit is de name van, of een trefwoord voor, een browsing context (een tabblad, venster of <iframe>). Indien opgegeven, overschrijft dit attribuut het target-attribuut van de form owner van de knop. De volgende trefwoorden hebben een speciale betekenis:
  • _self: Laadt de respons in dezelfde browsing context als de huidige. Dit is de standaard als het attribuut niet is opgegeven.
  • _blank: Laadt de respons in een nieuwe, naamloze browsing context — meestal een nieuw tabblad of venster, afhankelijk van de browserinstellingen van de gebruiker.
  • _parent: Laadt de respons in de bovenliggende browsing context van de huidige. Als er geen bovenliggende context is, gedraagt deze optie zich hetzelfde als _self.
  • _top: Laadt de respons in de browsing context op het hoogste niveau (dat wil zeggen, de browsing context die een voorouder is van de huidige, en geen bovenliggende context heeft). Als er geen bovenliggende context is, gedraagt deze optie zich hetzelfde als _self.

interestfor Experimenteel Niet-standaard

Definieert het <button>-element als een interest invoker. De waarde ervan is de id van een doelelement, dat op een bepaalde manier wordt beïnvloed (meestal getoond of verborgen) wanneer belangstelling wordt getoond voor of verloren gaat op het invoker-element (bijvoorbeeld door er met de muis overheen te gaan/weg te gaan of het te focussen/de focus te verliezen). Zie Interest invokers gebruiken voor meer details en voorbeelden.

name

De naam van de knop, verstuurd als een paar samen met de value van de knop als onderdeel van de formuliergegevens, wanneer die knop wordt gebruikt om het formulier te verzenden.

popovertarget

Maakt van een <button>-element een popover-controleknop; heeft als waarde de ID van het te besturen popover-element. Het vastleggen van een relatie tussen een popover en de bijbehorende invoker-knop met behulp van het popovertarget-attribuut heeft twee extra nuttige effecten:
  • De browser creëert een impliciete aria-details- en aria-expanded-relatie tussen popover en invoker, en plaatst de popover op een logische positie in de volgorde van toetsenbordfocusnavigatie wanneer deze wordt getoond. Dit maakt de popover toegankelijker voor gebruikers van toetsenbord en ondersteunende technologie (AT) (zie ook Toegankelijkheidsfuncties van popovers).
  • De browser creëert een impliciete ankerverwijzing tussen de twee, waardoor het zeer handig wordt om popovers te positioneren ten opzichte van hun bedieningselementen met behulp van CSS-ankerpositionering. Zie Ankerpositionering van popovers voor meer details.

popovertargetaction

Specificeert de actie die moet worden uitgevoerd op een popover-element dat wordt bestuurd door een control-<button>. Mogelijke waarden zijn:
  • "hide"
    • : De knop verbergt een getoonde popover. Als je probeert een al verborgen popover te verbergen, wordt geen actie ondernomen.
  • "show"
    • : De knop toont een verborgen popover. Als je probeert een al zichtbare popover te tonen, wordt geen actie ondernomen.
  • "toggle"
    • : De knop schakelt een popover tussen zichtbaar en verborgen. Als de popover verborgen is, wordt hij getoond; als de popover zichtbaar is, wordt hij verborgen. Als popovertargetaction wordt weggelaten, is "toggle" de standaardactie die door de control-knop wordt uitgevoerd.

type

Het standaardgedrag van de knop. Mogelijke waarden zijn:
  • submit: De knop verstuurt de formuliergegevens naar de server. Dit is de standaard als het attribuut niet is opgegeven voor knoppen die gekoppeld zijn aan een <form>, of als het attribuut een lege of ongeldige waarde heeft.
  • reset: De knop zet alle bedieningselementen terug naar hun oorspronkelijke waarden, zoals <input type="reset">. (Dit gedrag heeft de neiging gebruikers te irriteren.)
  • button: De knop heeft geen standaardgedrag en doet standaard niets wanneer erop wordt gedrukt. Er kunnen client-side scripts naar de gebeurtenissen van het element luisteren, die worden geactiveerd wanneer de gebeurtenissen plaatsvinden.

value

Definieert de waarde die is gekoppeld aan de name van de knop wanneer deze samen met de formuliergegevens wordt verzonden. Deze waarde wordt als parameter naar de server gestuurd wanneer het formulier met deze knop wordt verzonden. Wanneer gebruikt in combinatie met de close- of request-close-commando's, stelt het value-attribuut de returnValue in van het bestuurde <dialog>-element.

Opmerkingen

Een submit-knop met het formaction-attribuut ingesteld, maar zonder gekoppeld formulier, doet niets. Je moet een form owner instellen, ofwel door de knop in een <form> te plaatsen, ofwel door het form-attribuut in te stellen op de id van het formulier.

<button>-elementen zijn veel eenvoudiger te stylen dan <input>-elementen. Je kunt binnenin HTML-inhoud toevoegen (denk aan <i>, <br>, of zelfs <img>), en ::after- en ::before-pseudo-elementen gebruiken voor complexe weergave.

Als je knoppen niet bedoeld zijn om formuliergegevens naar een server te versturen, zorg er dan voor dat je hun type-attribuut instelt op button. Anders proberen ze formuliergegevens te versturen en de (niet-bestaande) respons te laden, wat mogelijk de huidige staat van het document verstoort.

Hoewel <button type="button"> geen standaardgedrag heeft, kunnen event handlers worden gescript om gedrag te activeren. Een geactiveerde knop kan programmeerbare acties uitvoeren met behulp van JavaScript, zoals het verwijderen van een item uit een lijst.

Standaard stylen user agents knoppen als display: flow-root, wat een nieuwe block formatting context creëert en de children van de knop zowel horizontaal als verticaal centreert, zolang ze niet overlopen. Als de knop is gedefinieerd als een flex- of grid-container, gedragen de children zich als flex- of grid-items. Een knop die is ingesteld op display: inline wordt gestyled alsof de waarde display: inline-block was.

Toegankelijkheid

Icoonknoppen

Knoppen die alleen een icoon weergeven, hebben geen accessible name. Accessible names bieden informatie voor ondersteunende technologie, zoals schermlezers, om te raadplegen wanneer ze het document verwerken en een toegankelijkheidsboom genereren. Ondersteunende technologie gebruikt vervolgens de toegankelijkheidsboom om paginacontent te navigeren en te manipuleren.

Om een icoonknop een accessible name te geven, plaats je tekst in het <button>-element die de functionaliteit van de knop beknopt beschrijft.

Voorbeelden

HTML
<button name="favorite">
  <svg fill="black" viewBox="0 0 42 42">
    <path
      d="M21,1c1.081,0,5.141,12.315,6.201,13.126s13.461,1.053,13.791,2.137 c0.34,1.087-9.561,8.938-9.961,10.252c-0.409,1.307,
      3.202,13.769,2.331,14.442c-0.879,0.673-11.05-6.79-12.361-6.79 c-1.311,0-11.481,7.463-12.36,6.79c-0.871-0.674,2.739-13.136,
      2.329-14.442c-0.399-1.313-10.3-9.165-9.96-10.252 c0.33-1.084,12.731-1.326,13.791-2.137S19.91,1,21,1z"></path>
  </svg>
  Add to favorites
</button>
Resultaat
Resultaat in de browser

Als je de tekst van de knop visueel wilt verbergen, is een toegankelijke manier om dit te doen het gebruik van een combinatie van CSS-eigenschappen om de tekst visueel van het scherm te verwijderen, maar toch verwerkbaar te houden voor ondersteunende technologie.

Het is echter de moeite waard om op te merken dat het zichtbaar laten van de knoptekst kan helpen voor mensen die mogelijk niet bekend zijn met de betekenis van het icoon of het doel van de knop niet begrijpen. Dit is vooral belangrijk voor mensen die niet technologisch onderlegd zijn of die mogelijk andere culturele interpretaties hebben van het gebruikte icoon.

Grootte en nabijheid

Grootte

Interactieve elementen zoals knoppen moeten een oppervlak hebben dat groot genoeg is om gemakkelijk te activeren. Dit helpt een breed scala aan mensen, waaronder mensen met motorische problemen en mensen die niet-precieze vormen van invoer gebruiken, zoals een stylus of vingers. Een minimale interactieve grootte van 44×44 CSS-pixels wordt aanbevolen.

Nabijheid

Grote hoeveelheden interactieve inhoud — waaronder knoppen — die dicht bij elkaar visueel worden geplaatst, moeten voorzien zijn van ruimte ertussen. Deze afstand is gunstig voor mensen die motorische problemen ervaren, die per ongeluk de verkeerde interactieve inhoud kunnen activeren.

Ruimte kan worden gecreëerd met CSS-eigenschappen zoals margin.

ARIA-statusinformatie

Om de status van een knop te beschrijven, is het juiste ARIA-attribuut om te gebruiken aria-pressed en niet aria-checked of aria-selected. Lees meer informatie over de ARIA button-rol om hier meer over te weten te komen.

Knopstijlen

Het is het beste om de standaard focusring voor elementen die focus hebben niet te overschrijven. Als de knopstijlen worden overschreven, is het belangrijk om ervoor te zorgen dat de focusstatus voldoende contrast heeft, zodat mensen met slechtziendheid deze kunnen waarnemen en mensen met cognitieve verschillen deze zullen begrijpen.

De :focus-visible-pseudoklasse kan worden gebruikt om stijlen toe te passen op een element dat :focus heeft, alleen wanneer de heuristieken van de user agent bepalen dat de focus moet worden gemarkeerd, zoals wanneer een <button> toetsenbordfocus ontvangt. Zie :focus versus :focus-visible voor meer informatie.

De kleurcontrastverhouding wordt bepaald door de helderheid van de tekst- en achtergrondkleurwaarden van de knop te vergelijken met de achtergrond waarop de knop is geplaatst. Om te voldoen aan de huidige Web Content Accessibility Guidelines (WCAG), is een verhouding van 4,5:1 vereist voor tekstinhoud en 3:1 voor grote tekst. (Grote tekst wordt gedefinieerd als 18,66px en bold of groter, of 24px of groter.)

Klikken en focus

Of het klikken op een <button> of <input>-knoptype ervoor zorgt dat deze (standaard) focus krijgt, verschilt per browser en besturingssysteem. De meeste browsers geven wel focus aan een knop waarop wordt geklikt, maar Safari doet dit met opzet niet.

Voorbeelden

Een eenvoudige knop maken

Dit voorbeeld maakt een klikbare knop. Het type="button"-attribuut zorgt ervoor dat de knop geen standaardgedrag heeft. Je kunt deze knop interactief maken met behulp van JavaScript of attributen zoals command en commandfor.

HTML
<button type="button" name="button">I'm a button</button>
Resultaat in de browser

De waarde request-close gebruiken voor het command-attribuut

Het dialoogvenster in dit voorbeeld heeft twee keuzerondjes die bepalen of het dialoogvenster wel of niet kan worden gesloten. Selecteer Yes of No, en klik vervolgens op Request to Close om te proberen het dialoogvenster te sluiten. Als Yes is geselecteerd, sluit het dialoogvenster; als No is geselecteerd, blijft het dialoogvenster open en wordt in plaats daarvan een bericht getoond.

HTML
<button type="button" commandfor="mydialog" command="show-modal">
  Open Dialog
</button>
<dialog id="mydialog">
  <div class="wrapper">
    <form>
      <fieldset>
        <legend>Allow this dialog to close when requested?</legend>
        <div>
          <input type="radio" id="no" name="close" value="no" checked />
          <label for="no">No</label>
        </div>
        <div>
          <input type="radio" id="yes" name="close" value="yes" />
          <label for="yes">Yes</label>
        </div>
      </fieldset>
    </form>
    <button commandfor="mydialog" command="request-close">
      Request to Close
    </button>
    <p class="warning" hidden>You must choose "Yes" to close this dialog.</p>
  </div>
</dialog>
CSS
.warning {
  color: tomato;
}
JS
const dialog = document.querySelector("dialog");
const radio = document.querySelector("form").elements["close"];
const warning = document.querySelector(".warning");

dialog.addEventListener("cancel", (e) => {
  if (!e.cancelable) return;
  if (radio.value === "no") {
    warning.hidden = false;
    e.preventDefault();
  } else {
    warning.hidden = true;
  }
});
Resultaat in de browser

De knop Open Dialog opent het <dialog>-element met command="show-modal".

De knop Request to Close heeft command="request-close", wat het <dialog>-element target via het commandfor="mydialog"-attribuut. Wanneer erop wordt geklikt, vraagt het aan de <dialog> of deze gesloten mag worden (in tegenstelling tot het command="close"-attribuut, dat de <dialog> onmiddellijk zou sluiten). Dit controleert of de <dialog> cancelable is via een cancel-gebeurtenis.

Wanneer de gebeurtenis cancelable is, wordt de waarde van de keuzerondjes gecontroleerd:

  • Als deze is ingesteld op yes, wordt het dialoogvenster gesloten.
  • Als deze is ingesteld op no, wordt het hidden-attribuut op de waarschuwing uitgeschakeld en wordt de preventDefault()-methode aangeroepen, wat het standaard sluitgedrag van de <dialog> voorkomt.

Het value-attribuut gebruiken met het close-commando van een dialoogvenster

Dit voorbeeld laat zien hoe je het value-attribuut van de knop gebruikt met het close-commando om de returnValue-eigenschap van een dialoogvenster in te vullen.

Wanneer op de knop Cancel of Delete wordt geklikt, sluit het dialoogvenster en wordt de returnValue ervan ingesteld op het value-attribuut van de knop. De close-event listener controleert dialog.returnValue om te bepalen welke actie de gebruiker heeft gekozen, en logt het resultaat op het scherm.

HTML

De HTML definieert eerst een Delete Record-knop die het commandfor-attribuut gebruikt om het te openen dialoogvenster op te geven.

Binnen het dialoogvenster gebruiken de knoppen Cancel en Delete het commandfor-attribuut om aan te geven dat ze van toepassing zijn op het huidige dialoogvenster. Ze stellen ook het command-attribuut in op "close" en stellen het value-attribuut in op respectievelijk "cancel" en "delete" — de waarde van de geselecteerde knop wordt automatisch gekopieerd naar de returnValue van het dialoogvenster wanneer op de knop wordt geklikt.

HTML
<button commandfor="confirm-dialog" command="show-modal">Delete Record</button>
<dialog id="confirm-dialog">
  <header>
    <h1>Delete Record?</h1>
  </header>
  <p>Are you sure? This action cannot be undone</p>
  <footer>
    <button commandfor="confirm-dialog" command="close" value="cancel">
      Cancel
    </button>
    <button commandfor="confirm-dialog" command="close" value="delete">
      Delete
    </button>
  </footer>
</dialog>
HTML
<pre id="log"></pre>
CSS
#log {
  height: 20px;
}
JS
const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = text;
}

JavaScript

De code gebruikt een close-event listener om de returnValue van het dialoogvenster te loggen.

JS
const dialog = document.getElementById("confirm-dialog");

dialog.addEventListener("close", () => {
  switch (dialog.returnValue) {
    case "cancel":
      log("Cancel was clicked");
      break;
    case "delete":
      log("Delete was clicked");
      break;
    default:
      log("Closed with value:", dialog.returnValue);
  }
});

Resultaten

Resultaat in de browser

Technische samenvatting

Content categories Flow content, phrasing content, Interactive content, listed, labelable, en submittable form-associated element, palpable content.
Toegestane inhoud Phrasing content maar er mag geen Interactive content aanwezig zijn. Als de <button> het eerste kind is van een aanpasbaar select-element, mag het ook nul of één <selectedcontent>-element bevatten.
Weglaten van tags Geen, zowel de begin- als eindtag zijn verplicht.
Toegestane bovenliggende elementen Elk element dat phrasing content accepteert.
Impliciete ARIA-rol button
Toegestane ARIA-rollen checkbox, combobox, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab
DOM-interface HTMLButtonElement

Verwante elementen

<datalist> <fieldset> <form> <input> <label> <legend> <meter> <optgroup>