Knoppen
Snelstart
- Bepaal welk HTML-element geschikt is. Zie HTML-element kiezen voor meer informatie.
- Bepaal welke stijl geschikt is voor de knop. Beschikbare button types
- Kopiëer de voorbeeldcode van het gekozen component.
HTML-element kiezen
Knoppen kunnen op verschillende manieren opgebouwd worden. Iets wat er visueel als een knop uit ziet kan in de html een link zijn. Welk html-element geschikt is hangt af van de situatie. In deze documentatie zetten we de verschillen met situatieschetsen uiteen.
Kies altijd voor het semantisch correcte html-element. Bijvoorbeeld een
<a> voor een link en een <button> voor een knop. Het
gebruik maken van semantisch correcte html-elementen zorgt ervoor dat gebruikers die door middel
van hulptechnologiën navigeren ook de correcte informatie krijgen. In de onderstaande tabel
staan enkele veelvoorkomende voorbeelden.
| Situatie | <button> | <input> | <a> |
| Submitknop binnen een formulier | Correct | Correct | Incorrect |
| Resetknop binnen een formulier | Correct | Correct | Incorrect |
| Login-knop naar login-pagina | Incorrect | Incorrect | Correct |
| Actieknop met een link naar een ander deel van de site | Incorrect | Incorrect | Correct |
| Semantisch correct en het gewenste html-element voor hulptechnologiën. | Semantisch correct maar geeft mogelijk problemen voor bepaalde gebruikersgroepen of is semantisch gezien niet de mooiste oplossing. | Semantisch incorrect. |