Waarde
Het value-attribuut van een <input type="submit">-element bevat een string die wordt weergegeven als het label van de knop. Knoppen hebben verder geen echte waarde. De value levert de accessible description voor de knop.
Het value-attribuut instellen
<input type="submit" value="Send Request" />Het value-attribuut weglaten
Als je geen value opgeeft, krijgt de knop een standaardlabel, gekozen door de user agent. Dit label is waarschijnlijk iets in de trant van "Submit" of "Submit Query." Hier is een voorbeeld van een submit-knop met een standaardlabel in jouw browser:
<input type="submit" />Aanvullende attributen
Naast de attributen die worden gedeeld door alle <input>-elementen, ondersteunen submit-knopinputs de volgende attributen.
formaction
Een string die de URL aangeeft waarnaar de gegevens moeten worden verzonden. Deze heeft voorrang op het action-attribuut van het <form>-element waartoe de <input> behoort.
Dit attribuut is ook beschikbaar op <input type="image">- en <button>-elementen.
formenctype
Een string die de coderingsmethode aangeeft die moet worden gebruikt bij het versturen van de formuliergegevens naar de server. Er zijn drie toegestane waarden:
application/x-www-form-urlencoded | Dit, de standaardwaarde, verstuurt de formuliergegevens als een string na het percent-encoderen van de tekst met behulp van een algoritme zoals encodeURI(). |
|---|---|
multipart/form-data | Gebruikt de FormData-API om de gegevens te beheren, waardoor bestanden naar de server kunnen worden verstuurd. Je moet dit coderingstype gebruiken als je formulier <input>-elementen bevat van type file (<input type="file">). |
text/plain | Platte tekst; vooral nuttig voor het debuggen, zodat je gemakkelijk kunt zien welke gegevens worden verzonden. |
Indien opgegeven, overschrijft de waarde van het formenctype-attribuut het enctype-attribuut van het bijbehorende formulier.
Dit attribuut is ook beschikbaar op <input type="image">- en <button>-elementen.
formmethod
Een string die de HTTP-methode aangeeft die moet worden gebruikt bij het versturen van de gegevens van het formulier; deze waarde overschrijft elk method-attribuut dat is opgegeven op het bijbehorende formulier. Toegestane waarden zijn:
get | Er wordt een URL samengesteld door te beginnen met de URL die is opgegeven door het formaction- of action-attribuut, gevolgd door een vraagteken ("?"), waarna de gegevens van het formulier worden toegevoegd, gecodeerd zoals beschreven door formenctype of het enctype-attribuut van het formulier. Deze URL wordt vervolgens naar de server verzonden met behulp van een HTTP-get-verzoek. Deze methode werkt goed voor formulieren die alleen ASCII-tekens bevatten en geen neveneffecten hebben. Dit is de standaardwaarde. |
|---|---|
post | De gegevens van het formulier worden opgenomen in de body van het verzoek dat wordt verzonden naar de URL die is opgegeven door het formaction- of action-attribuut, met behulp van een HTTP-post-methode. Deze methode ondersteunt complexe gegevens en bestandsbijlagen. |
dialog | Deze methode geeft aan dat de knop het dialoogvenster sluit waaraan de input gekoppeld is, en verstuurt de formuliergegevens helemaal niet. |
Dit attribuut is ook beschikbaar op <input type="image">- en <button>-elementen.
formnovalidate
Een Booleaans attribuut dat, indien aanwezig, aangeeft dat het formulier niet moet worden gevalideerd voordat het naar de server wordt verzonden. Dit overschrijft de waarde van het novalidate-attribuut op het bijbehorende formulier van het element.
Dit attribuut is ook beschikbaar op <input type="image">- en <button>-elementen.
formtarget
Een string die een naam of trefwoord aangeeft dat aangeeft waar de ontvangen respons na het versturen van het formulier moet worden weergegeven. De string moet de naam zijn van een browsing context (dat wil zeggen, een tabblad, venster of <iframe>). Een hier opgegeven waarde overschrijft elk doel dat is opgegeven door het target-attribuut op het <form> waartoe deze input behoort.
Naast de daadwerkelijke namen van tabbladen, vensters of inline frames, zijn er een paar speciale trefwoorden die kunnen worden gebruikt:
_self | Laadt de respons in dezelfde browsing context als degene die het formulier bevat. Dit vervangt het huidige document door de ontvangen gegevens. Dit is de standaardwaarde die wordt gebruikt als er geen andere is opgegeven. |
|---|---|
_blank | Laadt de respons in een nieuwe, naamloze browsing context. Dit is meestal een nieuw tabblad in hetzelfde venster als het huidige document, maar kan verschillen afhankelijk van de configuratie van de user agent. |
_parent | Laadt de respons in de bovenliggende browsing context van de huidige. Als er geen bovenliggende context is, gedraagt dit zich hetzelfde als _self. |
_top | Laadt de respons in de browsing context op het hoogste niveau; dit is de browsing context die de bovenste voorouder is van de huidige context. Als de huidige context de bovenste context is, gedraagt dit zich hetzelfde als _self. |
Dit attribuut is ook beschikbaar op <input type="image">- en <button>-elementen.
Submit-knoppen gebruiken
<input type="submit">-knoppen worden gebruikt om formulieren te versturen. Als je een aangepaste knop wilt maken en het gedrag vervolgens wilt aanpassen met JavaScript, moet je <input type="button"> gebruiken, of nog beter, een <button>-element.
Als je ervoor kiest om <button>-elementen te gebruiken om de knoppen in je formulier te maken, houd dan het volgende in gedachten: als de <button> zich binnen een <form> bevindt, wordt die knop behandeld als de "submit"-knop. Je zou daarom de gewoonte moeten aannemen om expliciet aan te geven welke knop de submit-knop is.
Een eenvoudige submit-knop
We beginnen met het maken van een formulier met een eenvoudige submit-knop:
<form>
<div>
<label for="example">Let's submit some text</label>
<input id="example" type="text" name="text" />
</div>
<div>
<input type="submit" value="Send" />
</div>
</form>Dit wordt als volgt weergegeven:
Probeer wat tekst in het tekstveld in te voeren en het formulier vervolgens te versturen.
Bij het versturen wordt het naam/waarde-paar van de gegevens naar de server verzonden. In dit geval is de string text=user-text, waarbij "user-text" de door de gebruiker ingevoerde tekst is, gecodeerd om speciale tekens te behouden. Waar en hoe de gegevens worden verzonden, hangt af van de configuratie van het <form>; zie Formuliergegevens versturen voor meer details.
Een toetsenbordsnelkoppeling aan een submit-knop toevoegen
Toetsenbordsnelkoppelingen, ook bekend als access keys en toetsenbordequivalenten, stellen de gebruiker in staat om een knop te activeren met een toets of combinatie van toetsen op het toetsenbord. Om een toetsenbordsnelkoppeling aan een submit-knop toe te voegen — net zoals je dat zou doen bij elke <input> waarvoor dit zinvol is — gebruik je het globale attribuut accesskey.
In dit voorbeeld is s opgegeven als de access key (je moet s plus de specifieke modifier-toetsen voor jouw browser/OS-combinatie indrukken). Om conflicten met de eigen toetsenbordsnelkoppelingen van de user agent te vermijden, worden voor access keys andere modifier-toetsen gebruikt dan voor andere snelkoppelingen op de hostcomputer. Zie accesskey voor meer details.
Hier is het vorige voorbeeld met de s-access key toegevoegd:
<form>
<div>
<label for="example">Let's submit some text</label>
<input id="example" type="text" name="text" />
</div>
<div>
<input type="submit" value="Send" accesskey="s" />
</div>
</form>Bijvoorbeeld, in Firefox voor Mac activeert het indrukken van Control-Option-S de Send-knop, terwijl Chrome op Windows Alt+S gebruikt.
Het probleem met het bovenstaande voorbeeld is dat de gebruiker niet weet wat de access key is! Dit geldt des te meer omdat de modifiers 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 niet interfereert met het ontwerp van de site (bijvoorbeeld door een gemakkelijk toegankelijke link te bieden die verwijst naar informatie over de access keys van de site). Het toevoegen van een tooltip aan de knop (met behulp van het title-attribuut) kan ook helpen, hoewel dit geen volledige oplossing is voor toegankelijkheidsdoeleinden.
Een submit-knop uitschakelen en inschakelen
Om een submit-knop uit te schakelen, geef je het disabled-attribuut op, zoals hier:
<input type="submit" value="Send" disabled />Je kunt knoppen tijdens runtime in- en uitschakelen door disabled in te stellen op true of false; in JavaScript ziet dit er als volgt uit: btn.disabled = true of btn.disabled = false.
Zie de pagina <input type="button"> voor meer ideeën over het in- en uitschakelen van knoppen.
Validatie
Submit-knoppen nemen niet deel aan constraint-validatie; ze hebben geen echte waarde om te beperken.
Voorbeelden
We hebben hierboven al basisvoorbeelden opgenomen. Er valt eigenlijk niet veel meer te zeggen over submit-knoppen. Er is een reden waarom dit soort bedieningselement soms een "eenvoudige knop" wordt genoemd.
Technische samenvatting
| Waarde | Een string die als label van de knop wordt gebruikt |
| Gebeurtenissen | click |
| Ondersteunde gemeenschappelijke attributen |
type en
value
|
| IDL-attributen | value |
| DOM-interface |
|
| Impliciete ARIA-rol | button |