Het element <input type="reset">

Waarde

Het value-attribuut van een <input type="reset">-element bevat een tekenreeks die wordt gebruikt als het label van de knop en die de knop voorziet van een accessible description. Knoppen zoals reset hebben verder geen waarde.

Het value-attribuut instellen

<input type="reset" value="Reset the form" />

Het value-attribuut weglaten

Als je geen value opgeeft, krijg je een knop met het standaardlabel (meestal "Reset", maar dit varieert afhankelijk van de user agent):

<input type="reset" />

Resetknoppen gebruiken

<input type="reset">-knoppen worden gebruikt om formulieren te resetten. Als je een aangepaste knop wilt maken en het gedrag vervolgens wilt aanpassen met JavaScript, moet je <input type="button"> gebruiken, of beter nog, een <button>-element.

Een eenvoudige resetknop

We beginnen met het maken van een eenvoudige resetknop:

<form>
  <div>
    <label for="example">Type in some sample text</label>
    <input id="example" type="text" />
  </div>
  <div>
    <input type="reset" value="Reset the form" />
  </div>
</form>

Dit wordt als volgt weergegeven:

Probeer wat tekst in het tekstveld in te voeren en druk vervolgens op de resetknop.

Een sneltoets voor resetten toevoegen

Om een sneltoets aan een resetknop toe te voegen — net zoals je zou doen bij elke <input> waarvoor dit zinvol is — gebruik je het globale attribuut accesskey.

In dit voorbeeld is r opgegeven als sneltoets (je moet r samen met de specifieke controletoetsen voor jouw browser/OS-combinatie indrukken; zie accesskey voor een nuttige lijst hiervan).

<form>
  <div>
    <label for="example">Type in some sample text</label>
    <input id="example" type="text" />
  </div>
  <div>
    <input type="reset" value="Reset the form" accesskey="r" />
  </div>
</form>

Het probleem met het bovenstaande voorbeeld is dat er voor de gebruiker geen manier is om te weten wat de sneltoets is! Dit geldt met name omdat de controletoetsen doorgaans niet-standaard zijn om conflicten te vermijden. Zorg er bij het bouwen van een site voor dat je deze informatie op een manier verstrekt die de vormgeving van de site niet verstoort (bijvoorbeeld door een gemakkelijk toegankelijke link aan te bieden die verwijst naar informatie over wat de sneltoetsen van de site zijn). Het toevoegen van een tooltip aan de knop (met behulp van het title-attribuut) kan ook helpen, hoewel het geen volledige oplossing is voor toegankelijkheidsdoeleinden.

Een resetknop uitschakelen en inschakelen

Om een resetknop uit te schakelen, geef je het disabled-attribuut eraan op, als volgt:

<input type="reset" value="Disabled" disabled />

Je kunt knoppen tijdens runtime in- en uitschakelen door disabled in te stellen op true of false; in JavaScript ziet dit er zo uit: btn.disabled = true of btn.disabled = false.

Validatie

Knoppen nemen niet deel aan constraint validation; ze hebben geen echte waarde om te beperken.

Voorbeelden

We hebben hierboven al basisvoorbeelden opgenomen. Er valt eigenlijk niet veel meer te zeggen over resetknoppen.

Technische samenvatting

Zie ook

• <input>
• <button>