HTML Formulier Eigenschappen

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 het volgende 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, 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 nadat het formulier is ingediend.

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 genaamde iframe.

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

Voorbeeld

Hierop zal het ingediende resultaat in een nieuwe browserkaart 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 formuliergegevens.

Formuliergegevens kunnen als URL-variabelen worden gebruikt (gebruik method="get") of als HTTP POST-transactie (gebruik method="post") verzenden.

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

Voorbeeld

Dit voorbeeld gebruikt de GET-methode om formuliergegevens in te dienen:

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

Probeer het zelf

Voorbeeld

Dit voorbeeld gebruikt de POST-methode om formuliergegevens in te dienen:

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

Probeer het zelf

Opmerkingen over GET:

  • Voeg de formuliergegevens toe aan de URL in de vorm van naam/waarde-paren
  • Gebruik nooit GET om gevoelige gegevens te verzenden! (De ingediende formuliergegevens zijn zichtbaar in de URL!)
  • De lengte van de URL is beperkt (2048 tekens)
  • Zeer nuttig voor formulierindieningen waarbij de gebruiker de resultaten als bladwijzer wilt toevoegen
  • GET is geschikt voor niet-beveiligde gegevens, zoals querystrings in Google

Opmerkingen over POST:

  • Voeg de formuliergegevens toe aan het lichaam van de HTTP-verzoek (de ingediende formuliergegevens worden 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:Gebruik POST onvermijdelijk als de formuliergegevens gevoelige informatie of persoonlijke informatie bevatten!

Autocomplete-eigenschap

autocomplete De eigenschap bepaalt of het formulier de automatische voltooiingsfunctie moet inschakelen.

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

Voorbeeld

Formulieren met geactiveerde automatische invulling inschakelen:

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

Probeer het zelf

Novalidate eigenschap

novalidate Eigenschap is een booleaanse eigenschap.

Indien ingesteld, stelt het vast 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 Stelt vast welke tekenset wordt gebruikt voor het indienen van het formulier.
action Stelt vast waar de formuliergegevens naar worden gestuurd bij het indienen van het formulier.
autocomplete Stelt vast of het formulier de functie van automatisch invullen moet openen.
enctype Stelt vast hoe formuliergegevens moeten worden gecodeerd wanneer deze naar de server worden gestuurd (alleen voor method="post").
method Stelt het HTTP-methode vast dat moet worden gebruikt bij het verzenden van formuliergegevens.
name Stelt de naam van het formulier vast.
novalidate Stelt vast dat het formulier niet geverifieerd moet worden bij het indienen.
rel Stelt vast het verband tussen de bron en het huidige document van de link.
target Stelt vast waar de ontvangen reactie na het indienen van het formulier wordt weergegeven.