HTML. Formulieren. Hans Roeyen V 3.0

HTML Formulieren

© Hans Roeyen

V 3.0

26 februari 2015

HTML

Inhoud 1. 1.1.

Formulieren ................................................................................................... 3 De form tag .................................................................................................... 3

1.1.1.

Het action attribute ......................................................................................... 4

1.1.2.

Het method attribute ..................................................................................... 4

1.2.

De input tag.................................................................................................... 4

1.3.

Soorten input velden ...................................................................................... 5

1.3.1.

Tekstvelden.................................................................................................... 5

1.3.2.

Checkboxen ................................................................................................... 6

1.3.3.

Radiobuttons .................................................................................................. 6

1.3.4.

De select tag voor keuzelijsten ...................................................................... 7

1.3.5.

De option tag en het size attribuut ................................................................. 7

1.3.6.

De attributen size en maxlength..................................................................... 8

1.4.

Submit en het value attribuut ......................................................................... 9

1.5.

Het hidden attribuut...................................................................................... 11

2. 3.

Oefeningen .................................................................................................. 12 Samenvatting formulier tags ........................................................................ 16

Hans Roeyen

HTML Formulieren

2-16

HTML

1. Formulieren Formulieren laten ons toe om een reactie, bestellingen of eender welke andere informatie te ontvangen van de bezoekers van de website. Sommige vormen zijn vrij complex, zoals die waarmee u vliegtickets kunt boeken of om een verzekering online kopen. Anderen zijn vrij eenvoudig, zoals het zoekvak op de pagina van Google. Veel online formulieren hebben een sterke gelijkenis met papieren formulieren. Op papier worden formulieren gemaakt van gebieden om tekst in te voeren, vakjes om aan te kruisen, opties om uit te kiezen, en ga zo maar door. Een HTML formulier is dus een deel van een webpagina dat plaatsen omvat waar gebruikers informatie kunnen ingeven die naar de eigenaar van de website moet worden teruggestuurd. Elk formulier moet voorzien zijn van een knop waarmee de gebruiker het formulier kan doorsturen. Wanneer iemand op een dergelijke knop klikt, zal de informatie die in het formulier ingegeven werd, verstuurd worden naar een internetadres dat jij hebt ingegeven bij het maken van het formulier. HTML biedt ons een waaier aan opties om verschillende handelingen toe te voegen aan onze formulieren. Zo is het mogelijk om een lokaal script oproepen dat een foutcorrectie uitoefent voor elk veld.

1.1. De form tag Een formulier moet steeds beginnen met een

tag. <meta charset="utf-8"> Voornaam:

Familienaam:

Hans Roeyen

HTML Formulieren

3-16

HTML

1.1.1. Het action attribute Het action attribute bepaald wat er zal gebeuren als het formulier ingediend wordt, door het klikken op de submit knop. Meestal zal het formulier naar een webserver verstuurd worden die het laat verwerken door een server side script.

In dit voorbeeld zal een PHP script met de naam page.php het formulier verwerken.

1.1.2. Het method attribute Het attribuut method zal de inhoud van het formulier als een document doorsturen. Het versturen van het formulier kan op twee manieren gebeuren. De eerste manier is met GET, met de syntax zoals je hieronder ziet staan: Deze method mag je enkel gebruiken voor weinig gegevens die niet gevoelig zijn, zeker niet voor wachtwoorden en dergelijke want de gegevens komen in de url te staan. action_page.php?voornaam=Hans&familienaam=Roeyen De tweede manier is met POST, met de syntax zoals je hieronder ziet staan: Alle gegevens zullen niet zichtbaar zijn als ze verzonden worden. Meer informatie over nieuwe mogelijkheden (en de oude) vind je op: http://www.w3schools.com/html/html_forms.asp

1.2. De input tag Om de gebruiker te vragen om een specifiek gegeven of bepaalde informatie in te vullen in een formulier gebruik je de tag. Deze tag moet gebruikt worden binnenin de

structuur, maar kan zich voor de rest eender waar in de pagina bevinden, in relatie met tekst, afbeeldingen en andere HTML tags.

Voornaam:

Familienaam:

Hans Roeyen

HTML Formulieren

4-16

HTML

Elk input veld moet het name attribuut hebben om verstuurd te worden. Wil je een waarde plaatsen in het veld op de pagina geef je ook het attribuut value mee: Voornaam:

Familienaam:


1.3. Soorten input velden Er zijn verschillende soorten inputvelden die de mogelijkheid bieden om op verschillende manieren informatie te bekomen van de bezoeker van de webpagina. Tekstvelden, selectievakjes en keuzerondjes zijn de bekende vormen hiervan. Nieuwe mogelijkheden die geïntroduceerd werden met HTML5 zijn datalist, keygen en output. Meer informatie over de nieuwe mogelijkheden (en de oude) vind je op http://www.w3schools.com/html/html_form_input_types.asp http://www.w3schools.com/html/html_form_elements.asp

1.3.1. Tekstvelden Tekstvelden worden gebruikt wanneer de gebruikers bepaalde informatie moeten kunnen ingeven in een formulier. <meta charset="utf-8">

Voornaam:
Familienaam:

Merk op dat de breedte van een tekstveld standaard 20 karakters is!

Hans Roeyen

HTML Formulieren

5-16

HTML

1.3.2. Checkboxen Het eenvoudigste type input is wellicht het selectievakje (checkbox), dat als een klein vierkantje getoond wordt en dat de gebruiker kan selecteren of te de-selecteren door er op te klikken. Voorbeeld 1 <meta charset="utf-8">

Koelkast

Het serverscript ontvangt dan: artikel1=”Koelkast”. De gebruiker kan meerdere selectievakjes tegelijk selecteren. Wanneer we nu echter slechts één keuze willen toelaten moeten we keuzerondjes (radiobutton) gebruiken.

1.3.3. Radiobuttons Voorbeeld 2 <meta charset="utf-8">

Mei Juni Juli

Met ‘checked’ kunnen we aangeven dat deze knop standaard geselecteerd is. Bij name moeten we steeds dezelfde naam opgeven, de knoppen vormen immers een groep!

Hans Roeyen

HTML Formulieren

6-16

HTML

1.3.4. De select tag voor keuzelijsten Om een gebruiker te laten kiezen uit een lijstje met mogelijkheden gebruiken we de <select> tag. Zowel scroll-lijsten als pull-down lijsten maken we aan met deze tag: Voorbeeld 3 <meta charset="utf-8">

<select name="Artikelen" size="3" multiple> Koelkast Wasmachine Droogkast

1.3.5. De option tag en het size attribuut Binnen de <select> en tags mogen we enkel werken met . Met het size attribuut geven we aan hoeveel items er getoond moeten worden in de lijst. Om de andere te kunnen zien zal de gebruiker moeten scrollen. Met multiple laten we toe dat de gebruiker meerdere keuzes tegelijk kan maken, met selected zal een bepaalde keuze standaard geselecteerd weergegeven worden. Stel dat de gebruiker wasmachine en droogkast selecteerde, dan ontvangt het script het volgende: Artikelen=”wasmachine” Artikelen=”droogkast” Indien we het size attribuut weglaten of size=”1” ingeven, dan zal er een pull-down lijst aangemaakt worden. Let op: pull-down lijsten laten geen meerdere keuzes tegelijk toe! Logisch gezien is een pull-down lijst gelijk aan een reeks radiobuttons. Kijk maar: Voorbeeld 4 <meta charset="utf-8">

Hans Roeyen

HTML Formulieren

7-16

HTML

<select name="Periode"> Mei Juni Juli

De manier van weergeven is anders maar het resultaat is hetzelfde! Bij voorbeeld 2 zijn het keuzerondjes, bij voorbeeld 4 is het een pull-down lijst maar in beide gevallen kunnen slechts één keuze maken.

1.3.6. De attributen size en maxlength Het ‘size’ attribuut gebruiken we om aan te geven welk type van form element getoond moet worden. In het bovenstaand voorbeeld is het een eenvoudig één-lijnig tekstkader. Met het ‘size’ attribuut geven we aan hoeveel karakters lang het tekstkader moet zijn. Met het ‘maxlength’ attribuut geven we aan hoeveel karakters maximaal ingegeven kunnen worden. Deze attributen worden enkel met type=”text” gebruikt Wanneer we een gebruiker echter een wachtwoord willen laten ingeven, en de tekst mag niet in het tekstkader getoond worden, gebruiken we beter in plaats van . Voor elk karakter dat de gebruiker ingeeft in het tekstkader zal er dan een * geplaatst worden. Dan kan je ook combineren met size en maxlength. Het name attribuut moeten we invullen voor eender welk type van input dat we gebruiken. Wanneer de form toekomt bij het serverscript, zal elk data item geïdentificeerd worden aan de hand van het name attribuut. Stel dat de gebruiker als naam ‘Sarah’ ingaf, dan zal het server script iets ontvangen in de stijl van: Naam=’Sarah’. Indien het script deze ruwe data rechtsreeks mailt naar ons, dan krijgen wij dezelfde lijn te zien in de e-mail die we ontvangen. Het script kan ook zo opgemaakt zijn dat het de input eerst in een ander formaat zet voor het doorgestuurd zal worden. Meer informatie over de attributen en de nieuwe mogelijkheden die geïntroduceerd werden met HTML5 vind je op:

http://www.w3schools.com/html/html_form_attributes.asp

Hans Roeyen

HTML Formulieren

8-16

HTML

Tekstgebieden Wanneer we de gebruiker willen toelaten om meerdere lijnen tekst in te geven dan werken we met de tag. Eender welke tekst die we tussen <textarea> en ingeven zal als standaardtekst verschijnen in het formuliervenster. Voorbeeld 5 <meta charset="utf-8">

Gelieve uw persoonlijke mening te geven....

1.4. Submit en het value attribuut Uiteraard zal voor elk formulier een “submit” (verzend) knop aanwezig moeten zijn. Wanneer de gebruiker op deze knop klikt, wordt de input van de gebruiker verwerkt door het script op de server, dat we eerder hebben ingegeven met het form action attribuut. Voorbeeld 6 <meta charset="utf-8">

Met het value attribuut kunnen we eender welke tekst plaatsen op de knop. Vaak zal men in een formulier eveneens een knop voorzien om de ingebrachte gegevens terug te verwijderen. Zo kan de gebruiker bij een foute input opnieuw beginnen.

Hans Roeyen

HTML Formulieren

9-16

HTML

Voorbeeld: 7 <meta charset="utf-8">

Voorbeeld: 8 <meta charset="utf-8">

Klikken op de image link zal gewoon opnieuw de pagina met het formulier erin oproepen. We zouden eigenlijk evengoed via een tekstlink naar een andere pagina kunnen gaan, maar in het geval dat de gebruiker een foutieve invoer heeft gedaan is dit lastiger.

Hans Roeyen

HTML Formulieren

10-16

HTML

1.5. Het hidden attribuut In het geval dat we bepaalde gegevens willen doorsturen naar het serverscript zonder dat de gebruiker die gegevens kan zien, dan werken we met het hidden attribuut. Voorbeeld: 10 <meta charset="utf-8">

In dit voorbeeld geven we met value aan naar wie de resultaten van een formulier moeten doorgestuurd worden. Uiteraard moet er op de server een script zijn dat met deze gegevens iets zal doen, namelijk de formulier input doorsturen naar een bepaald mailadres.

HTML voegde nog enkele zaken toe aan wat we tot nu toe al gezien hebben in verband met formulieren. De tags

,

en . Met gebruik van deze tags worden de velden in een formulier gegroepeerd in logische classificaties en kan de gebruiker navigeren doorheen deze velden en classificaties door het ingeven van een eerste karakter van de naam van het veld. Verder is het ook mogelijk om error-checking uit te voeren op de cliënt zodat de vereiste velden ingevuld zijn met overeenkomstige data-types die in een bepaald veld verwacht worden, voordat het formulier verzonden wordt. Let op: controleer de werking van deze tags met verschillende browsers!

Hans Roeyen

HTML Formulieren

11-16

HTML

2. Oefeningen Oefening 1: checkboxen <meta charset="utf-8">

Ik heb een fiets:
Ik heb een auto:

Oefening 2: radio buttons <meta charset="utf-8">

Man:
Vrouw:

wanneer een gebruiker op een radiobutton klikt, wordt deze geselecteerd en van alle andere knoppen met dezelfde waarde voor het name attribuut wordt de selectie ongedaan gemaakt

Hans Roeyen

HTML Formulieren

12-16

HTML

Oefening 3: Pull-down box <meta charset="utf-8">

<select name="Wagens"> Volvo Saab Fiat Audi

Oefening 4: Pull-down box met voorkeurselectie <meta charset="utf-8">

<select name="Wagens"> Volvo Saab Fiat Audi

Hans Roeyen

HTML Formulieren

13-16

HTML

Oefening 5: een knop maken <meta charset="utf-8">

Oefening 6: het gebruik van een fieldset <meta charset="utf-8">

Informatie:

Hoogte Gewicht

Indien er geen boord rond het formulier verschijnt is uw browser te oud!

Hans Roeyen

HTML Formulieren

14-16

HTML

Oefening 7: een formulier met input velden en een verzendknop <meta charset="utf-8">

Geef uw voornaam:
Geef uw familienaam:

Oefening 8 <meta charset="utf-8">

Dit formulier verstuurd een email

Naam:

Mail:

Commentaar:

Hans Roeyen

HTML Formulieren

15-16

HTML

3. Samenvatting formulier tags Tag

<fieldset> <legend> <select> <optgroup> <option> <button> <isindex><br /> <br /> Functie Definieert een formulier Definieert een invoerveld Definieert een tekstgebied Definieert een verzameling velden Definieert een titel voor een fieldset Verwerkt invoer van een gebruiker Definieert een optie groep Definieert een optie in de pull-down box Definieert een knop Afgeschaft, gebruik <input><br /> <br /> Deze lijst is niet volledig en moet geactualiseerd worden. Voor de huidige stand van zaken kijk je op volgende websites: http://www.w3schools.com/html/html_forms.asp Of bij de w3C organisatie zelf die een lijst bijhoudt van de toegelaten tags en hun attributen. http://www.w3.org/html/wg/drafts/html/CR/<br /> <br /> Hans Roeyen<br /> <br /> HTML Formulieren<br /> <br /> 16-16<br /> <br /> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://adoc.pub/report/html-formulieren-hans-roeyen-v-30" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "HTML. Formulieren. Hans Roeyen V 3.0"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;">