Begin een formulier met de tag < form> en eindig met de sluittag < /form> . In de begintag ziet u twee attributen, action en method :

	<form action="send.php" method="post"> </form>
	

Het attribuut action=' ' wordt de url (absolute of relatieve pad) vermeld van het serverscript. Dit wordt vaak naar een verwerkingsscript (apart document) gestuurd, voorbeelden zijn 'send.php' en .pl, wat aangeeft dat het in de taal Perl is geschreven en werkt met het CGI-script. Dit werd in het verleden standaard gebruik gemaakt. Het heeft als nadeel, dat je e-mailadres (weliswaar niet direct zichtbaar) in het formulier zelf is opgenomen. Mijn voorkeur is een php script dit wordt nooit zichtbaar voor de gebruiker.

Met het attribuut method=' ' wordt verwezen naar de methode waarop de gegevens verstuurd worden naar de server. Dit is ofwel post ofwel get. De meest gebruikte manier is post, waarbij de gegevens van het formulier apart verstuurd worden. Bij de get-methode worden de gegevens aan het eind van de url geplakt en dat kan alleen als het aantal tekens onder de honderd blijft.

Vooral bij grote formulieren is het gebruikelijk de onderdelen die bij elkaar horen te groeperen. Html gebruikt voor het indelen het element fieldset . Fieldsets zijn niet verplicht, ze maken de indeling van het formulier duidelijker met een zwarte rand voor de gebruiker. Binnen een fieldset mogen we een element legend opnemen dat een naam geeft aan die fieldset.

Zoals bijna elk html-element mogen we ook een fieldset voorzien van een unieke identificatie met een id-attribuut. Voor de weergave nu maakt dit geen verschil, maar daarmee kunnen we later elke fieldset apart benaderen in een stijlblad.

<form action="send.php" method="post">
<fieldset id="persoon">
<legend> mijn gegevens </legend>
</fieldset>
<fieldset id="soort"v
<legend> soort reactie </legend>
</fieldset>
<fieldset id="reactie">
<legend> mijn reactie </legend>
</fieldset>
<fieldset id="klaar">
</fieldset>
</form>

Een input-element van het type text geeft een tekst vak waar één regel tekst in past. Hier is een voorbeeld van twee tekstregels gebruikt, elke voorafgegaan door een label-element. Het br-element zorgt ervoor dat de twee velden onder elkaar komen te staan.

<label for="naam">Voor- en achternaam</label>
<input id="naam" maxlength="90" name="naam" size="30" type="text" />
<br />
<label for="mail">e-mailadres</label>
<input id="mail" name="mail" type="text" />

In dit voorbeeld komen de volgende attributen extra voor:

  • maxlength: het aantal tekens dat maximaal ingetypt kan worden, wanneer dit attribuut wordt weggelaten dan is er geen limiet aan het aantal tekens;
  • name: de naam van het element, dit attribuut is verplicht omdat de browser de naam van het tekstvak en de ingetypte tekst doorgeeft;
  • size: de breedte van het tekst vak in aantal tekens, bij een size van 30 passen er 30 tekens van normale breedte in (zoals cijfers). Als deze eigenschap wordt weggelaten kiest de browser zelf een breedte, bijvoorbeeld 20;

Overzicht verschillende typen:

  • number: vereist een getal het geeft aan dat een invoerveld, als het ingevuld is, een getal moet bevatten op het moment dat het formulier wordt verwerkt. Er zijn vier attributen mogelijk: min, max, step (gerekend vanaf de minimale waarde), value (de waarde die bij het laden van het formulier in het veld komt te staan).
    	<input name="aantal" type="number" min="3" value="3" />
    	
  • email: vereist een correct e-mailadres. Let op: correct wil zeggen dat de notatie correct is - dus met een @ en een . (punt) erin. Dit wil niet zeggen dat het e-mailadres ook echt bestaat. Wordt in zo'n specifiek veld iets verkeerds ingevuld, dan verschijnt daarvan een melding na het klikken op de submit-knop.
    	<input name="mail" type="email" />
    	
  • tel: een tekst vak van het type tel is bedoeld voor een telefoonnummer, hierop vindt geen controle plaats, alle tekens zijn mogelijk. Bijvoorbeeld +32(0)577400869.
    	  <input type="tel" id="phone" name="phone" placeholder="0xxx-xxx-xxx" pattern="[0-9]{3}-[0-9]{3}-[0-9]{3}">
    			
  • date: kijkt of het over een geldige datum gaat.
    	  < input type="date" id="birthday" name="birthday">
    			
  • hidden: je kan extra informatie meesturen met het formulier zonder je dit ziet.
    	  < input type="hidden" name="onderwerp" value="Voorbeeldformulier" />
    		

Voor een volledig overzicht surf naar w3schools.com > html > html forms > input types: http://www.w3schools.com/html/html_form_input_types.asp.

Overzicht verschillende attributen:

  • placeholder: Je kan als webbouwer zo'n veld voorzien van een voorlopige tekst als het veld leeg is, bijvoorbeeld met een suggestie van de gewenste invoer.
    	  <input name="link" type="url" placeholder="http://" />
    			
  • required: Deze velden zijn verplicht! Na het klikken op de submit-knop zal je eerst het verplichte veld moeten invullen voor het formulier verzendt kan worden.
    	  <input name="mail" type="email" required />
    			
  • pattern: Dit is een zogenaamde regular expression waar nogal wat programma's meer talen gebruik van maken. De opbouw in dit voorbeeld is eenvoudig, maar de mogelijkheden zijn eindeloos en complex. Eerst is er ruimte voor kleine en grote letters, waarvan er 2 verwacht worden. Dan wordt er ruimte gemaakt voor de letters tussen 0 en 9 (cijfers dus), waarvan er vier achter elkaar moeten staan. Bijvoorbeeld voor een internationale postcode BE9280. Surf naar http://html5pattern.com voor een grondig overzicht van eindeloze mogelijkheden
    	  <input name="naam" type="text" pattern="[a-z,A-Z] {2} [0-9] {4}" />
    			
  • max en min: bevatten de maximale en de minimale waarde wanneer we de invoer in een veld willen beperken. Ze kunnen samen of afzonderlijk worden gebruikt. We gaan voor het type datum bij een invulveld het jaar beperken tot 2013.
    	  <input max="2013-12-31" min="2013-01-01" type="date" />
    			
  • autocomplete: dit kan de waarde on of off hebben. De standaardwaarde is on, dan is het toegestaan dat browsers de ingevoerde waarde opslaan van bijvoorbeeld in inlog-systeem. Zo worden de velden automatisch gevuld als de bezoeker opnieuw de pagina bezoekt. De off-stand kan nuttig zijn bij gevoelige informatie zoals bankgegevens.

Voor een volledig overzicht surf naar w3schools.com > html > html forms > input attributes: http://www.w3schools.com/html/html_form_attributes.asp.

Keuzerondjes heten radio buttons romdat ze werken als een ouderwetse radio waarbij je vooraf ingestelde zenders kon kiezen door een knop in te drukken. Er was altijd één knop ingeduwd en als je een andere zender koos, dan sprong de vorige zender terug. Het keuzerondje wordt aangeduid met het element input en het attribuut type heeft de waarde radio. Radio buttons vormen altijd een groep van minstens twee gelijknamige input-elementen.

<legend> mijn gegevens </legend>
<input id="heer" name="aanspreking" type="radio"
value="mijnheer" />
<input id="mevrouw" name="aanspreking"
type="radio" value="mevrouw"
checked="checked"/>

Het attribuut name is de naam van de groep, binnen een groep moet dit dezelfde waarde krijgen. De value geeft de waarde die naar de server wordt gestuurd bij het verzenden van het formulier. Als laatste attribuut zie je bij het onderste element input het attribuut checked staan, dit geeft aan dat dit keuzerondje standaard gekozen staat, er hoort bij radio buttons altijd één geselecteerd te zijn.

Label

Misschien is het u nooit opgevallen als u op een keuzerondje of selectievakje klikt. Het is niet nodig om precies op het rondje of vierkantje te klikken, u kunt ook klikken op de tekst die erbij staat. Het hulpmiddel dat daarvoor beschikbaar is, is het element label. Elke keuzerondje wordt gevolgd door een label.

<input id="heer" name="aanspreking" type="radio"
value="mijnheer" />
<label for="heer"> de heer </label>
<input id="mevrouw" name="aanspreking" type="radio"
value="mevrouw" checked="checked" />
<label for="mevrouw"> mevrouw</label>

Een input-element met het type checkbox levert een aankruisvakje. Het is de bedoeling dat de tekst achter het vakje komt te staan vandaar dat het labelelement na het input-element komt te staan en niet ervoor. Door het label-element kan je klikken op de tekst die erbij staat.

<input id="akkoord" name="akkoord" type="checkbox" />
<label for="akkoord"> Ik ga akkoord</label>

Het element select maakt een keuzemenu in een formulier. Binnen een selectelement moet minstens één option-element voorkomen. Het volgende voorbeeld maakt een menu met drie regels:

<select id="soort" name="soort" >
<option disabled="disabled"> kies </option>
<option> ik heb een klacht </option>
<option> ik heb een suggestie </option>
</select>

De eerste regel van het menu is in beeld als het formulier voor de eerste keer wordt geladen. Door het attribuut disabled is deze regel grijs als de gebruiker het menu openklapt om aan te geven dat deze menu optie niet gekozen kan worden.

Het element textarea maakt een tekst vak waarin de gebruikers verschillende regels kan in typen.

<textarea id="invul" name="invul" cols="50" rows="4" >inhoud </textarea>

De grootte van het tekst vak wordt aangegeven met rows voor het aantal regels en cols voor het aantal tekens per regel. Eventuele tekst die is opgenomen tussen de begin- en eindtag komt in het veld te staan als begintekst. De gebruiker kan de tekst wijzigen.

Als de gebruiker het formulier heeft ingevuld, moet het worden verwerkt door het programma dat in de begintag van het form-element is aangegeven. Elk formulier moet beschikken over een knop die de actie in gang zet. Als de gebruiker op de knop klikt, verzamelt de browser de gegevens van het formulier en draagt ze over volgens de methode die in het attribuut method is vermeld aan het begin van het formulier. De verzendknop heeft als type het woord submit.

<input id="zend" value="verstuur" type="submit" />

Maak deze oefeningen na:

Klassikaal
Individueel

Klassikaal

<form action="mailto:eigen@email.be" mehtod="post">
<fieldset id="persoon">
<legend> mijn gegevens </legend>
<input id="heer" name="aanspreking" type="radio" value="mijnheer" />
<label for="heer"> de heer </label>
< id="mevrouw" name="aanspreking" type="radio" value="mevrouw" checked="checked"/>
<label for="mevrouw"> mevrouw </label>
<br />

<label for="naam"> Voor- en achternaam </label>
<input id="naam" maxlength="90" name="naam" size="30"
type="text" />
<br />

<label for="mail">e-mailadres </label>
<input id="mail" name="mail" type="text" />
</fieldset>


<fieldset id="soort">
<legend> soort reactie </legend>
< select  id="soort" name="soort" >
<option disabled="disabled"> kies </option>
<option>  ik heb een klacht </option>
<option>  ik heb een suggestie </option>
</select>
<fieldset>

<fieldset id="reactie">
<legend> mijn reactie </legend>
<textarea id="invul" name="invul" cols="50" rows="4">
Graag uw mening over deze cursus </textarea>
</fieldset>

<fieldset id="klaar">
<input id="zelfmail" name="zelfmail" type="checkbox" />
<label for="zelfmail"v stuur een kopie naar mijn mailadres </label>
<br />
	
<input id="zend" value="verstuur" type="submit" />
</fieldset>
</form>