HTML <form> tag

Definitie en gebruik

<form> Tag wordt gebruikt om HTML formulieren te maken voor het ontvangen van gebruikersinvoer.

<form> Elementen kunnen de volgende een of meerdere formulierelementen bevatten:

Zie ook:

HTML Tutorial:HTML formulieren en invoer

HTML DOM referentiehandleiding:Form object

CSS Tutorial: Formulierstijl instellen

Voorbeeld

Voorbeeld 1

HTML formulier met twee invoervelden en een verzendknop:

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

Try it yourself

Voorbeeld 2

HTML formulier met selectievakjes:

<form action="/action_page.php" method="get">
  <input type="checkbox" name="vehicle1" value="Bike">
  <label for="vehicle1">Ik heb een fiets</label><br>
  <input type="checkbox" name="vehicle2" value="Car">
  <label for="vehicle2">Ik heb een auto</label><br>
  <input type="checkbox" name="vehicle3" value="Boot" checked>
  <label for="vehicle3">Ik heb een boot</label><br><br>
  <input type="submit" value="Submit">
</form>

Try it yourself

Example 3

HTML form with radio buttons:

<form action="/action_page.php" method="get">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS" checked="checked">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Submit">
</form>

Try it yourself

Attribute

Attribute Value Description
accept-charset Character set Specifies the character encoding to be used when submitting the form.
action URL Specifies where the form data should be sent when the form is submitted.
autocomplete
  • on
  • off
 Specifies whether the form should enable the auto-complete feature.
enctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 Specifies how form data should be encoded when submitting form data to the server.
method
  • get
  • post
 Specifies the HTTP method to be used when sending form data.
name Text Specifies the name of the form.
novalidate novalidate Specifies that the form should not be validated when submitting the form.
rel
  • external
  • help
  • license
  • next
  • nofollow
  • noopener
  • noreferrer
  • opener
  • prev
  • search
 Specifies the relationship between the linked resource and the current document.
target
  • _blank
  • _self
  • _parent
  • _top
 Specifies where the response received after submitting the form should be displayed.

Global attributes

<form> The tag also supports Global attributes in HTML.

Event properties

<form> The tag also supports Event properties in HTML.

Default CSS settings

Most browsers will display the following default values <form> Element:

form {
  display: block;
  margin-top: 0em;
{}

Try it yourself

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support