HTML -formulieren
Een HTML-formulier wordt gebruikt om gebruikersinvoer te verzamelen. De gebruikersinvoer wordt meestal naar een server gestuurd voor verwerking.
Voorbeeld
Het <form>-element
Het HTML <form>-element wordt gebruikt om een HTML-formulier voor gebruikersinvoer te maken:
<form>
.
form elements
.
</form>
Het <form>element is een container voor verschillende soorten invoerelementen, zoals: tekstvelden, selectievakjes, keuzerondjes, verzendknoppen, enz.
Alle verschillende formulierelementen worden behandeld in dit hoofdstuk: HTML-formulierelementen .
Het <input>-element
Het HTML <input>-element is het meest gebruikte formulierelement.
Een <input>element kan op vele manieren worden weergegeven, afhankelijk van het type
attribuut.
Hier zijn enkele voorbeelden:
| Type | Beschrijving |
|---|---|
| <input type="text"> | Geeft een tekstinvoerveld van één regel weer |
| <input type="radio"> | Geeft een keuzerondje weer (voor het selecteren van een van de vele keuzes) |
| <input type="checkbox"> | Geeft een selectievakje weer (voor het selecteren van nul of meer van de vele keuzes) |
| <input type="submit"> | Geeft een verzendknop weer (voor het verzenden van het formulier) |
| <input type="button"> | Geeft een klikbare knop weer |
Alle verschillende invoertypen worden behandeld in dit hoofdstuk: HTML-invoertypen .
Tekstvelden
De <input type="text">definieert een invoerveld met één regel voor tekstinvoer.
Voorbeeld
Een formulier met invoervelden voor tekst:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Zo wordt de bovenstaande HTML-code weergegeven in een browser:
Let op: Het formulier zelf is niet zichtbaar. Houd er ook rekening mee dat de standaardbreedte van een invoerveld 20 tekens is.
Het <label>-element
Let op het gebruik van het <label>element in het bovenstaande voorbeeld.
De <label>tag definieert een label voor veel formulierelementen.
Het <label>element is handig voor gebruikers van schermlezers, omdat de schermlezer het label hardop zal voorlezen wanneer de gebruiker zich op het invoerelement concentreert.
Het <label>element helpt ook gebruikers die moeite hebben met het klikken op zeer kleine regio's (zoals keuzerondjes of selectievakjes) - omdat wanneer de gebruiker op de tekst in het <label>element klikt, het keuzerondje/selectievakje wordt omgeschakeld.
Het forattribuut van de <label>tag moet gelijk zijn aan het idattribuut van het <input>
element om ze samen te binden.
Radio knoppen
De <input type="radio">definieert een keuzerondje.
Met keuzerondjes kan een gebruiker EEN van een beperkt aantal keuzes selecteren.
Voorbeeld
Een formulier met keuzerondjes:
<p>Choose your favorite Web language:</p>
<form>
<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">
<label
for="css">CSS</label><br>
<input type="radio" id="javascript"
name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Zo wordt de bovenstaande HTML-code weergegeven in een browser:
Kies uw favoriete webtaal:
Selectievakjes
De <input type="checkbox">definieert een selectievakje .
Met selectievakjes kan een gebruiker NUL of MEER opties van een beperkt aantal keuzes selecteren.
Voorbeeld
Een formulier met selectievakjes:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Zo wordt de bovenstaande HTML-code weergegeven in een browser:
De verzendknop
De <input type="submit">definieert een knop voor het verzenden van de formuliergegevens naar een formulier-handler.
De formulier-handler is meestal een bestand op de server met een script voor het verwerken van invoergegevens.
De formulier-handler wordt gespecificeerd in het action
attribuut van het formulier.
Voorbeeld
Een formulier met een verzendknop:
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Zo wordt de bovenstaande HTML-code weergegeven in een browser:
Het naamkenmerk voor <input>
Merk op dat elk invoerveld een nameattribuut moet hebben dat moet worden ingediend.
Als het nameattribuut wordt weggelaten, wordt de waarde van het invoerveld helemaal niet verzonden.
Voorbeeld
In dit voorbeeld wordt de waarde van het invoerveld "Voornaam" niet ingediend:
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>