HTML Invoerformulier* Attributen
Dit hoofdstuk beschrijft de verschillende form*attributen voor het HTML- <input>element.
Het formulierkenmerk
Het forminvoerattribuut specificeert de vorm waartoe het <input>element behoort.
De waarde van dit attribuut moet gelijk zijn aan het id attribuut van het <form> element waartoe het behoort.
Voorbeeld
Een invoerveld buiten het HTML-formulier (maar nog steeds een deel van het formulier):
<form action="/action_page.php" id="form1">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
<label for="lname">Last
name:</label>
<input type="text" id="lname"
name="lname" form="form1">
Het formaction-kenmerk
Het formactioninvoerkenmerk specificeert de URL van het bestand dat de invoer zal verwerken wanneer het formulier wordt verzonden.
Opmerking: dit attribuut overschrijft het
actionattribuut van het <form>element.
Het formactionattribuut werkt met de volgende invoertypen: indienen en afbeelding.
Voorbeeld
Een HTML-formulier met twee verzendknoppen, met verschillende acties:
<form action="/action_page.php">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formaction="/action_page2.php" value="Submit as Admin">
</form>
Het formenctype-kenmerk
Het input formenctype -attribuut specificeert hoe de formuliergegevens moeten worden gecodeerd wanneer ze worden ingediend (alleen voor formulieren met method="post").
Opmerking: dit attribuut overschrijft het enctype-attribuut van het <form>element.
Het formenctypeattribuut werkt met de volgende invoertypen: indienen en afbeelding.
Voorbeeld
Een formulier met twee verzendknoppen. De eerste verzendt de formuliergegevens met standaardcodering, de tweede verzendt de formuliergegevens gecodeerd als "multipart/form-data":
<form action="/action_page_binary.asp" method="post">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
<input type="submit"
formenctype="multipart/form-data"
value="Submit as
Multipart/form-data">
</form>
Het formuliermethodekenmerk
Het formmethod invoerkenmerk definieert de HTTP-methode voor het verzenden van formuliergegevens naar de actie-URL.
Opmerking: dit attribuut overschrijft het method-attribuut van het <form>element.
Het formmethodattribuut werkt met de volgende invoertypen: indienen en afbeelding.
De formuliergegevens kunnen worden verzonden als URL-variabelen (method="get") of als een HTTP-posttransactie (method="post").
Opmerkingen over de "get"-methode:
- Deze methode voegt de formuliergegevens toe aan de URL in naam/waarde-paren
- Deze methode is handig voor formulierinzendingen waarbij een gebruiker een bladwijzer wil maken voor het resultaat
- Er is een limiet aan hoeveel gegevens u in een URL kunt plaatsen (verschilt tussen browsers), daarom kunt u er niet zeker van zijn dat alle formuliergegevens correct worden overgedragen
- Gebruik nooit de "get"-methode om gevoelige informatie door te geven! (wachtwoord of andere gevoelige informatie is zichtbaar in de adresbalk van de browser)
Opmerkingen over de "post"-methode:
- Deze methode verzendt de formuliergegevens als een HTTP-posttransactie
- Formulierinzendingen met de "post"-methode kunnen niet worden gemarkeerd als bladwijzer
- De "post"-methode is robuuster en veiliger dan "get", en "post" heeft geen beperkingen voor de grootte
Voorbeeld
Een formulier met twee verzendknoppen. De eerste verzendt de formuliergegevens met method="get". De tweede stuurt de formuliergegevens met method="post":
<form action="/action_page.php" method="get">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<input type="submit" value="Submit using
GET">
<input type="submit" formmethod="post" value="Submit using
POST">
</form>
Het formtarget-kenmerk
Het formtargetinvoerkenmerk specificeert een naam of een trefwoord dat aangeeft waar het antwoord moet worden weergegeven dat wordt ontvangen na het indienen van het formulier.
Opmerking: dit attribuut heeft voorrang op het doelattribuut van het <form>element.
Het formtargetattribuut werkt met de volgende invoertypen: indienen en afbeelding.
Voorbeeld
Een formulier met twee verzendknoppen, met verschillende doelvensters:
<form action="/action_page.php">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>
Het formuliernovalidate-attribuut
Het input formnovalidate-attribuut specificeert dat een <input>-element niet moet worden gevalideerd wanneer het wordt ingediend.
Opmerking: dit attribuut overschrijft het novalidate attribuut van het <form>
element.
Het formnovalidateattribuut werkt met de volgende invoertypes: submit.
Voorbeeld
Een formulier met twee verzendknoppen (met en zonder validatie):
<form action="/action_page.php">
<label for="email">Enter your
email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
<input type="submit"
formnovalidate="formnovalidate"
value="Submit without validation">
</form>
Het novalidate-kenmerk
Het novalidateattribuut is een <form>attribuut.
Indien aanwezig, specificeert novalidate dat niet alle formuliergegevens moeten worden gevalideerd wanneer ze worden ingediend.
Voorbeeld
Specificeer dat er geen formuliergegevens moeten worden gevalideerd bij het indienen:
<form action="/action_page.php" novalidate>
<label
for="email">Enter your email:</label>
<input type="email"
id="email" name="email"><br><br>
<input type="submit"
value="Submit">
</form>
HTML-formulier en invoerelementen
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
Bezoek onze HTML Tag Reference voor een volledige lijst van alle beschikbare HTML-tags .