HTML formulieren

HTML formulieren worden gebruikt om verschillende types gebruikersinvoer te verzamelen.

<form> element

HTML formulieren worden gebruikt om gebruikersinvoer te verzamelen.

<form> element definieert HTML formulieren:

Voorbeeld

<form>
 .
form elementen
 .
</form>

HTML formulieren bevattenFormulier elementen.

Formulier elementen verwijzen naar verschillende types input elementen, selectievakjes, radio knoppen, submit knoppen, enz.

<input> elementen

<input> Element is het belangrijksteFormulier elementen.

Het <input> element heeft veel vormen, afhankelijk van de verschillende type Eigenschappen.

Dit zijn de types die in dit hoofdstuk worden gebruikt:

Type Beschrijving
text Definieer algemene tekst invoer.
radio Definieer radio knop invoer (keuze van meerdere opties)
submit Definieer de submit-knop (formulier indienen)

Opmerking:Je zult later in deze handleiding meer over invoertypes leren.

Tekst invoer

<input type="text"> Definieer voorTekst invoerEénregelige invoervelden van

Voorbeeld

<form>
 Voornaam:<br>
<input type="text" name="firstname">
<br>
 Achternaam:<br>
<input type="text" name="lastname">
</form>

Probeer het zelf uit

In de browser ziet het er zo uit:

Voornaam:


Achternaam:

Opmerking:Het formulier zelf is niet zichtbaar. Let ook op dat de standaard breedte van tekstvelden 20 karakters is.

Radio knoppen invoer

<input type="radio"> DefinieerRadio knoppen.

Radio knoppen laten gebruikers kiezen uit een beperkt aantal opties:

Voorbeeld

<form>
<input type="radio" name="sex" value="male" checked>Man
<br>
<input type="radio" name="sex" value="female">Vrouw
</form>

Probeer het zelf uit

Radio knoppen zien er in de browser zo uit:

Man

Vrouw

Submit-knop

<input type="submit"> Definieer voor het gebruik vanFormulierverwerker（form-handler）IndienenFormulierknoppen.

De formulierverwerker is meestal een serverpagina die scripts bevat om ingediende gegevens te verwerken.

De formulierverwerker in het formulier action Specificeer in de eigenschap:

Voorbeeld

<form action="action_page.php">
Voornaam:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Achternaam:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Probeer het zelf uit

In de browser ziet het er zo uit:

Voornaam:


Achternaam:


Action-eigenschap

Action-eigenschapDefinieer de actie die wordt uitgevoerd bij het indienen van het formulier.

Het gebruikelijke gebruik van een submit-knop om een formulier naar de server in te dienen.

Normaal gesproken wordt het formulier naar een webpagina op de webserver verzonden.

In het bovenstaande voorbeeld is een server script aangegeven om de ingediende formulier te verwerken:

<form action="action_page.php">

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

Method-eigenschap

method-eigenschapStelt het HTTP-methode in dat wordt gebruikt bij het indienen van het formulier (GET of POST)

<form action="action_page.php" method="GET">

of:

<form action="action_page.php" method="POST">

Wanneer moet u GET gebruiken?

U kunt GET (standaardmethode) gebruiken:

als het indienen van het formulier passief is (bijvoorbeeld een zoekmachinequery) en er geen gevoelige informatie is.

Wanneer u GET gebruikt, zijn de formuliergegevens zichtbaar in de adresbalk van de pagina:

action_page.php?firstname=Mickey&lastname=Mouse

Opmerking:GET is het meest geschikt voor het indienen van kleine hoeveelheden gegevens. De browser stelt een capaciteitslimiet in.

Wanneer moet u POST gebruiken?

U moet POST gebruiken:

als het formulier gegevens bijwerkt of gevoelige informatie bevat (bijvoorbeeld wachtwoorden).

POST biedt een betere beveiliging, omdat de gegevens die worden ingediend in de adresbalk van de pagina niet zichtbaar zijn.

Name-eigenschap

Elke invoerveld moet een name-eigenschap instellen om correct ingediend te worden.

In dit voorbeeld wordt alleen het "Achternaam" invoerveld ingediend:

Voorbeeld

<form action="action_page.php">
Voornaam:<br>
<input type="text" value="Mickey">
<br>
Achternaam:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Probeer het zelf uit

Gebruik <fieldset> om formuliergegevens te combineren

<fieldset> Elementen combineren relevante gegevens in het formulier

<legend> Het element definieert de titel van het <fieldset>-element.

Voorbeeld

<form action="action_page.php">
<fieldset>
<legend>Personlijke informatie:</legend>
Voornaam:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Achternaam:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

Probeer het zelf uit

De volgende HTML-code ziet er zo uit in de browser:

Persoonlijke informatie:
Voornaam:


Achternaam:


HTML Form eigenschappen

HTML <form>-element, met alle mogelijke eigenschappen ingesteld, ziet er zo uit:

Voorbeeld

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elementen
 .
</form>

Hier is een lijst van <form>-eigenschappen:

Eigenschappen Beschrijving
accept-charset Stelt het karakterset vast dat wordt gebruikt in het ingediende formulier (standaard: pagina karakterset).
action Stelt het adres in waar het formulier moet worden ingediend (URL) (indieningpagina).
autocomplete Stelt in of de browser automatisch het formulier moet voltooien (standaard: aan).
enctype Stelt de codering van de gegevens die worden ingediend (standaard: url-encoded).
method Stelt de HTTP-methode in die wordt gebruikt bij het indienen van het formulier (standaard: GET).
name Stelt de naam van het formulier vast dat wordt herkend (voor DOM: document.forms.name).
novalidate Stelt dat de browser het formulier niet verifieert.
target Stelt het doel van het adres in de action-eigenschap (standaard: _self).

Opmerking:Je zult in de volgende hoofdstukken meer over eigenschappen leren.