HTML 6: Formulieren
Artikel details
Share
Soortgelijke artikels
Een van van de belangrijkste mogelijkheden van HTML is het kunnen maken van formulieren. Deze kunnen immers worden gebruikt om een bezoeker informatie te doen opgeven. Zo kan een bezoeker bijvoorbeeld zijn mening geven over een bepaald artikel op je website. Formulieren maken met HTML is niet heel moeilijk maar zonder gebruik te maken van een andere (server-side) programmeertaal ben je hier weinig mee. Want HTML stelt je immers enkel in staat om het formulier aan te maken, niet om het te verwerken. Hiervoor kan bijvoorbeeld gebruik worden gemaakt van PHP of ASP.
Een formulier begint telkens door gebruik te maken van een zogenaamde form-tag. (<form>). Aan deze tag worden vervolgens enkele attributen meegegeven om het formulier te verwerken.
Nu kunnen we velden aan dit formulier toevoegen.
Deze wordt tussen de forms tag geplaatst en wordt gebruikt om korte woorden in te vullen zoals gebruikersnaam, woonplaats.
<input type="text" name="gebruikersnaam" value="Gebruiker" />
Zo kun je de bezoeker z'n gebruikersnaam laten invullen.
Het attribuut type: text staat voor een textveld. (Kan ook bijvoorbeeld password zijn, dan zie je ******)
Het attribuut name: Gebruikt op informatie op te halen bij het verwerken.
Het attribuut value: Een vooringevulde waarde van het veld.
Een knop kan worden gebruikt om bijvoorbeeld naar een vorige pagina gaan.
Een submit knop wordt gebruikt om het gehele formulier te verzenden. Staat in de form tag het attribuut op post dan zie je niet dat het formulier is verzonden. Staat dit op get kun je dit via de URL waarnemen. Bij het verzenden wordt de pagina geladen tussen het attribuut action in de form tag. Is deze niet aanwezig of niet ingevuld dan wordt gewoon dezelfde pagina opnieuw geladen.
<input type="button" name="terug" value="Ga terug" />
<input type="submit" name="verzend" value="Verzend" />
Het attribuut type: button staat voor knop. Submit om een verzendknop aan te maken
Het attribuut name: Gebruikt op informatie op te halen bij het verwerken.
Het attribuut value: Een vooringevulde waarde op de knop.
Wordt veel gebruikt om bijvoorbeeld in te stemmen met de voorwaarden.
<input type="checkbox" name="accepteer" value="1" checked="checked" />
Het attribuut type: zorgt ervoor dat we een checkbox aanmaken
Het attribuut name: Gebruikt op informatie op te halen bij het verwerken.
Het attribuut value: Een vooringevulde waarde voor bij het verzenden.
Het attribuut checked: Eventueel toevoegen om de checkbox al in te vullen.
Gebruikt om een selectie te maken tussen verschillende onderdelen.
<input type="radio" name="naam" value="1" checked />
<input type="radio" name="naam" value="2" />
<input type="radio" name="naam" value="3" />
Het attribuut type: Radio aanmaken
Het attribuut name: Gebruikt op informatie op te halen bij het verwerken. Als je meerdere radio's naast elkaar maakt met dezelfde name kun je maar één van deze selecteren.
Het attribuut value: Een vooringevulde waarde voor de radio.
Gebruikt om een grotere hoeveelheid tekst in te vullen.
<textarea name="bericht" rows="5" cols="30"></textarea>
Het attribuut name: Gebruikt op informatie op te halen bij het verwerken.
Opmerking: Om een standaart waarde in dit veld in te voeren moet je de tekst tussen de twee tags plaatsen.
Gebruikt om uit verschillende waarden te kiezen.
<select name="Land">
<option value="be">België</option>
<option value="nl">Nederland</option>
</select>
Het attribuut type:
Het attribuut name: Gebruikt op informatie op te halen bij het verwerken. Opmerkelijk is dat de value als het veld verzonden wordt afhankelijk is van hetgeen jij geselecteerd hebt. Selecteer je nederland dan is de waarde van het veld Land = nl .
De velden op deze pagina zijn reeds bewerkt met css daarom dat ze verschillen van de normale kleuren.
Hoe ziet een formulier er uit?
Een formulier begint telkens door gebruik te maken van een zogenaamde form-tag. (<form>). Aan deze tag worden vervolgens enkele attributen meegegeven om het formulier te verwerken.
- method: Gebruikt om data te verzenden via get (via de url) of post. VB: <form method="post">
- action: Als op de verzend knop wordt gedrukt stuur de bezoeker naar de ingevulde pagina. VB: <form action="verwerk.php">
Als we dit samenvoegen komen we tot
<form method="post" action="verwerk.php">
<!--velden en textareas-->
</form>
<!--velden en textareas-->
</form>
Nu kunnen we velden aan dit formulier toevoegen.
Velden
Deze wordt tussen de forms tag geplaatst en wordt gebruikt om korte woorden in te vullen zoals gebruikersnaam, woonplaats.
<input type="text" name="gebruikersnaam" value="Gebruiker" />
Zo kun je de bezoeker z'n gebruikersnaam laten invullen.
Het attribuut type: text staat voor een textveld. (Kan ook bijvoorbeeld password zijn, dan zie je ******)
Het attribuut name: Gebruikt op informatie op te halen bij het verwerken.
Het attribuut value: Een vooringevulde waarde van het veld.
Knoppen en submit knoppen
Een knop kan worden gebruikt om bijvoorbeeld naar een vorige pagina gaan.
Een submit knop wordt gebruikt om het gehele formulier te verzenden. Staat in de form tag het attribuut op post dan zie je niet dat het formulier is verzonden. Staat dit op get kun je dit via de URL waarnemen. Bij het verzenden wordt de pagina geladen tussen het attribuut action in de form tag. Is deze niet aanwezig of niet ingevuld dan wordt gewoon dezelfde pagina opnieuw geladen.
<input type="button" name="terug" value="Ga terug" />
<input type="submit" name="verzend" value="Verzend" />
Het attribuut type: button staat voor knop. Submit om een verzendknop aan te maken
Het attribuut name: Gebruikt op informatie op te halen bij het verwerken.
Het attribuut value: Een vooringevulde waarde op de knop.
Checkbox
Wordt veel gebruikt om bijvoorbeeld in te stemmen met de voorwaarden.
<input type="checkbox" name="accepteer" value="1" checked="checked" />
Het attribuut type: zorgt ervoor dat we een checkbox aanmaken
Het attribuut name: Gebruikt op informatie op te halen bij het verwerken.
Het attribuut value: Een vooringevulde waarde voor bij het verzenden.
Het attribuut checked: Eventueel toevoegen om de checkbox al in te vullen.
Radio knopje
Gebruikt om een selectie te maken tussen verschillende onderdelen.
<input type="radio" name="naam" value="1" checked />
<input type="radio" name="naam" value="2" />
<input type="radio" name="naam" value="3" />
Het attribuut type: Radio aanmaken
Het attribuut name: Gebruikt op informatie op te halen bij het verwerken. Als je meerdere radio's naast elkaar maakt met dezelfde name kun je maar één van deze selecteren.
Het attribuut value: Een vooringevulde waarde voor de radio.
Textarea
Gebruikt om een grotere hoeveelheid tekst in te vullen.
<textarea name="bericht" rows="5" cols="30"></textarea>
Het attribuut name: Gebruikt op informatie op te halen bij het verwerken.
Opmerking: Om een standaart waarde in dit veld in te voeren moet je de tekst tussen de twee tags plaatsen.
Selecteer box
Gebruikt om uit verschillende waarden te kiezen.
<select name="Land">
<option value="be">België</option>
<option value="nl">Nederland</option>
</select>
Het attribuut type:
Het attribuut name: Gebruikt op informatie op te halen bij het verwerken. Opmerkelijk is dat de value als het veld verzonden wordt afhankelijk is van hetgeen jij geselecteerd hebt. Selecteer je nederland dan is de waarde van het veld Land = nl .
De velden op deze pagina zijn reeds bewerkt met css daarom dat ze verschillen van de normale kleuren.
Er zijn nog geen reacties op dit artikel.
Om op dit artikel te reageren dient u een account aan te maken.
