HTML Form Attributes

Dit hoofdstuk introduceert HTML <form> Verschillende eigenschappen van het element.

Action eigenschap

action De eigenschap definieert de actie die moet worden uitgevoerd bij het indienen van het formulier.

Meestal worden de formuliergegevens naar een bestand op de server verzonden wanneer de gebruiker op de knop "Indienen" klikt.

In onderstaand voorbeeld worden de formuliergegevens naar een bestand genaamd "action_page.php" verzonden. Dit bestand bevat een server-side script dat de formuliergegevens verwerkt:

Voorbeeld

Na het indienen van het formulier worden de formuliergegevens naar "action_page.php" verzonden:

<form action="/action_page.php">
  <label for="fname">Voornaam:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">Achternaam:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="Submit">
</form>

Probeer het zelf

Tip:Als de action-eigenschap wordt weggelaten, wordt de actie ingesteld op de huidige pagina.

Target-eigenschap

target De eigenschap bepaalt waar de respons wordt weergegeven na het indienen van het formulier.

target De eigenschap kan een van de volgende waarden instellen:

Waarde Beschrijving
_blank De respons wordt weergegeven in een nieuw venster of tabblad.
_self De respons wordt weergegeven in het huidige venster.
_parent De respons wordt weergegeven in de ouderlijke frame.
_top De respons wordt weergegeven in de hele body van het venster.
framename De respons wordt weergegeven in de benoemde iframe.

De standaardwaarde is _self, wat betekent dat de respons in het huidige venster zal worden geopend.

Voorbeeld

Hier zal het ingediende resultaat in een nieuwe browser-tab worden geopend:

<form action="/action_page.php" target="_blank">

Probeer het zelf

Method-eigenschap

De method-eigenschap specificeert de HTTP-methode die moet worden gebruikt bij het indienen van formulierdata.

Formulierdata kan als URL-variabele worden gebruikt (gebruik method="get") of als HTTP POST-transactie (gebruik method="post") verzenden.

De standaard HTTP-methode bij het indienen van formulierdata is GET.

Voorbeeld

Dit voorbeeld gebruikt de GET-methode bij het indienen van formulierdata:

<form action="/action_page.php" method="get">

Probeer het zelf

Voorbeeld

Dit voorbeeld gebruikt de POST-methode bij het indienen van formulierdata:

<form action="/action_page.php" method="post">

Probeer het zelf

Let op bij GET:

  • Voeg de formulierdata toe aan de URL in de vorm van naam/waardeparen
  • Gebruik nooit GET om gevoelige gegevens te verzenden! (De ingediende formulierdata is zichtbaar in de URL!)
  • De lengte van de URL is beperkt (2048 tekens)
  • Veel gebruikt voor formulierindieningen waarbij de gebruiker de resultaten als bladwijzer wil toevoegen
  • GET is geschikt voor niet-beveiligde gegevens, zoals querystrings in Google

Let op bij POST:

  • Voeg de formulierdata toe aan het lichaam van de HTTP-verzoek (de ingediende formulierdata wordt niet in de URL weergegeven)
  • POST heeft geen limiet op de grootte en kan gebruikt worden om grote hoeveelheden gegevens te verzenden.
  • Formulieren met POST-indiening kunnen geen bladwijzers toevoegen

Tip:Als het formulierdata gevoelige informatie of persoonlijke informatie bevat, gebruik dan POST!

Autocomplete-eigenschap

autocomplete De eigenschap bepaalt of het formulier de functie voor automatische voltooiing moet inschakelen.

Na het inschakelen van de functie voor automatische voltooiing, zal de browser automatisch waarden invullen op basis van de eerder ingevoerde waarden van de gebruiker.

Voorbeeld

Formulieren met geactiveerde automatische invulling:

<form action="/action_page.php" autocomplete="on">

Probeer het zelf

Novalidate eigenschap

novalidate Eigenschap is een booleanse eigenschap.

Indien ingesteld, bepaalt het dat het formulier niet moet worden geverifieerd bij het indienen.

Voorbeeld

Formulier zonder ingestelde novalidate eigenschap:

<form action="/action_page.php" novalidate>

Probeer het zelf

Lijst van alle <form> eigenschappen

Eigenschap Beschrijving
accept-charset Bepaalt de te gebruiken tekenset voor het indienen van het formulier.
action Bepaalt waar de formuliergegevens naar moeten worden verzonden bij het indienen van het formulier.
autocomplete Bepaalt of het formulier de automatische voltooiingsfunctie (invullen) moet openen.
enctype Bepaalt hoe formuliergegevens moeten worden gecodeerd wanneer ze naar de server worden verzonden (alleen voor method="post").
method Bepaalt de HTTP-methode die moet worden gebruikt om formuliergegevens te verzenden.
name Bepaalt de naam van het formulier.
novalidate Bepaalt dat het formulier niet moet worden geverifieerd bij het indienen.
rel Bepaalt de relatie tussen het bronbestand en het huidige document.
target Bepaalt waar de ontvangen reactie wordt weergegeven nadat het formulier is ingediend.