HTML Input form* Attributes

Dit hoofdstuk introduceert HTML <input> De verschillende elementen form* Eigenschappen.

form-eigenschap

van input form De eigenschap bepaalt <input> Het formulier waarvan het element deel uitmaakt.

De waarde van deze eigenschap moet gelijk zijn aan de id-eigenschap van het bijbehorende <form>-element.

Voorbeeld

Een invoerveld dat zich buiten het HTML-formulier bevindt (maar nog steeds onderdeel van het formulier is):

<form action="/action_page.php" id="form1">
  <label for="fname">Achternaam:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Indienen">
</form>
<label for="lname">Naam:</label>
<input type="text" id="lname" name="lname" form="form1">

Probeer het zelf

formaction-eigenschap

van input formaction De eigenschap bepaalt de URL van het bestand dat wordt gebruikt om de invoer (data) te verwerken bij het indienen van het formulier.

Opmerking:Deze eigenschap overschrijft <form> Het eigenschap van het element action Eigenschappen.

formaction De eigenschap is van toepassing op de volgende inputtypen: submit en image.

Voorbeeld

Een HTML-formulier met twee verzendknoppen, die verschillende acties (action) hebben:

<form action="/action_page.php">
  <label for="fname">Achternaam:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Naam:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Indienen">
  <input type="submit" formaction="/action_page2.php" value="Met beheerder indienen">
</form>

Probeer het zelf

formenctype-eigenschap

van input formenctype De eigenschap specificeert hoe de formulierdata moet worden gecodeerd bij het indienen (alleen van toepassing op formulieren met method="post").

Opmerking:Deze eigenschap zal de <form> Het enctype-eigenschap van het element.

formenctype De eigenschap is van toepassing op de volgende inputtypen: submit en image.

Voorbeeld

Een formulier met twee verzendknoppen. De eerste stuurt het formulierdata met de standaard codering, de tweede stuurt formulierdata met de codering "multipart/form-data":

<form action="/action_page_binary.asp" method="post">
  <label for="fname">Voornaam:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Indienen">
  <input type="submit" formenctype="multipart/form-data"
  value="Gebruik Multipart/form-data om in te dienen">
</form>

Probeer het zelf

formmethod-eigenschap

van input formmethod De eigenschap definieert de HTTP-methode die wordt gebruikt om de formulierdata naar de action URL te verzenden.

Opmerking:Deze eigenschap zal de <form> Het method-eigenschap van het element.

formmethod De eigenschap is van toepassing op de volgende inputtypen: submit en image.

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

Opmerkingen over GET:

  • Voeg formuliergegevens toe aan de URL in de vorm van naam/waardeparen
  • Gebruik nooit GET om gevoelige gegevens te verzenden! (De verzonden formuliergegevens zijn zichtbaar in de URL!)
  • De lengte van de URL is beperkt (2048 tekens)
  • Veel nuttig voor formulierindieningen waarbij gebruikers de resultaten willen toevoegen als bladwijzer
  • GET is geschikt voor niet-veilige gegevens, zoals querystrings in Google

Opmerkingen over POST:

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

Tip:Als formuliergegevens gevoelige informatie of persoonlijke gegevens bevatten, moet POST worden gebruikt!

Voorbeeld

Formulieren met twee indieningsknoppen. De eerste gebruikt method="get" om formuliergegevens te verzenden. De tweede gebruikt method="post" om formuliergegevens te verzenden:

<form action="/action_page.php" method="get">
  <label for="fname">Achternaam:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Naam:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Gebruik GET om in te dienen">
  <input type="submit" formmethod="post" value="Gebruik POST om in te dienen">
</form>

Probeer het zelf

formtarget-eigenschap

van input formtarget De eigenschap specificeert een naam of een sleutelwoord, dat aangeeft waar de ontvangen reactie wordt weergegeven nadat het formulier is ingediend.

Opmerking:Deze eigenschap zal de <form> de target-eigenschap van het element.

formtarget De eigenschap is van toepassing op de volgende inputtypen: submit en image.

Voorbeeld

Formulieren met twee indieningsknoppen en verschillende doelvensters:

<form action="/action_page.php">
  <label for="fname">Achternaam:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Naam:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Indienen">
  <input type="submit" formtarget="_blank" value="Indienen in een nieuw venster/kaartje">
</form>

Probeer het zelf

de formnovalidate-eigenschap

van input formnovalidate Het kenmerk specifies dat de <input>-element niet gecontroleerd moet worden bij het indienen.

Opmerking:Deze eigenschap zal de <form> Elementen novalidate Eigenschap.

formnovalidate Eigenschap is van toepassing op de volgende invoertypes: submit.

Voorbeeld

Een formulier met twee indieningsknoppen (met en zonder verificatie):

<form action="/action_page.php">
  <label for="email">Voer uw e-mailadres in:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Indienen">
  <input type="submit" formnovalidate="formnovalidate"
  value="Indienen zonder verificatie">
</form>

Probeer het zelf

novalidate Eigenschap

novalidate Eigenschap is <form> Eigenschappen.

Als ingesteld, stelt de novalidate-eigenschap vast dat geen enkele formuliergegevens worden geverifieerd bij het indienen.

Voorbeeld

Stelt vast dat geen enkele formuliergegevens worden geverifieerd bij het indienen:

<form action="/action_page.php" novalidate>
  <label for="email">Voer uw e-mailadres in:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Indienen">
</form>

Probeer het zelf

HTML Form en Input Elementen

Tag Beschrijving
<form> Definieer HTML formulieren voor gebruikersinvoer.
<input> Definieer invoercontrole

Voor een volledige lijst van alle beschikbare HTML tags, bezoek onze HTML Tag Referenties.