">
Hart.GratisHandleiding.eu

Gratis Handleiding (en veel meer). De site met gratis handleidingen, handleidingen om gratis software te downloaden, gratis games te spelen, dvd's te kopieeren, te besparen, vakantie- en reistips, pagina's voor kinderen, senioren, te datenonline te shoppen, online casino spelen, handleiding bridge, handleiding mahjong, solliciteren, keuze van uw mobiele telefoon en veel meer..... Verder vindt u ook de beste surftips.

HOME HANDLEIDINGEN RECEPTEN ZOEKEN CONTACT ZOEKEN

 Rubrieken:

  Website maken

  Aanmelden site bij
  zoekmachines

  Banner en buttons

  CSS cursus beginners

  Eigen startpagina

     Handleiding startpagina

  Favicon maken

  HTML cursus beginners

  HTML cursus gevorderden

  Links naar uw site

  Linkwoorden

  Logo's maken  

  Sitemap maken

  Sitemap verzenden

  Webbadge

  Webhosting

  Website gratis

  Website promotie

  Webmaster
  hulpprogramma

  Zoekwoorden

Formulieren maken

Iedereen die regelmatig op internet surft, kent ze wel: formulieren. Je vult  gegevens in, en dit wordt, nadat je op een knop druk, verzonden naar de mensen achter een site. Zo'n formulier is best handig. Op deze pagina vind je er ook een als voorbeeld. In dit deel  van de cursus leren we je zelf zo'n formulier te maken en te gebruiken.

Er zijn 2 soorten van formulierverwerking:

  • Server-based: het formulier wordt verzonden via een script op de server
  • Client-based: het formulier wordt verzonden via e-mail.

Wij zullen ons gaan bezighouden met de client-based formulierverking.  Dit is een eenvoudige manier om gegevens van je bezoekers te krijgen.  We gaan je in deze les leren hoe je het volgende formulier "Informatie aanvragen" moet maken:

Informatie aanvragen

Naam: 
E-mail:

Stuur mij informatie over:
 Websites
 Cursussen
 Gratis prijsvragen

Ik ben een
 Man Vrouw

Land:

Opmerkingen:

 


En nu jij!

Dit ziet er behoorlijk ingewikkeld uit, maar het valt allemaal best mee. Ten eerste goed nieuws: een formulier bestaat uit html, dus geen andere talen zoals javascript of php. Je leert hier dus gewoon weer iets meer van html. Je kunt zoveel formulieren op een pagina zetten als  je wilt. Ook is het mogelijk om binnen het formulier allerlei andere html-tags op te nemen, zoals tabellen, afbeeldingen en tekst.

We beginnen bij het begin: een formulier staat tussen de tags <form> en  </form>. Deze twee tags geven het begin en het einde van een formulier aan. In deze tags moet je ook aangeven wat je met het formulier wil doen. In ons geval willen we de gegevens per e-mail opgetsuurd krijgen. Dat doen we  zo:

<form method="post" action="mailto:jouwemail@jeprovider.nl">
de rest van het formulier(dat leer je straks)
</form>

Invoerelementen

Het eerste element dat we je leren is een invoerveld voor tekst, zoals  je dat ook hierboven in het formulier als eerste tag ziet. Eerst willen  we natuurlijk aangeven wat er in dit tekstvak moet komen te staan, de  naam in dit geval. Dit gebeurt gewoon met de bekende <p>-tag. Daarna  geven we aan dat er een tekstvak moet komen:

<form method="post" action="mailto:jouwemail@jeprovider.nl">
<p>naam:<input type="text" size="30" maxlength="50"  name="naam">
</form>

Je ziet na het tekstvak een paar belangrijke attributen staan. We bespreken die eerst:

type="text"
Hiermee geef je aan dat het een tekstvak is.

size="30"
Hiermee geef je aan dat de lengte van het tekstvak 30 tekens is.

maxlength="50"
De bezoeker kan maximaal 50 tekens invoeren. Dit aantal hoeft niet gelijk te  zijn aan de waarde van het attribuut "size", 30 in dit geval.

name="naam"
Je geeft het tekstvak een naam, zodat je het bij de verwerking kunt herkennen.

Dat was het tekstvak. Het tweede formulierelement dat we tegenkomen is het  tekstvak e-mail. Dit werkt precies hetzelfde als bij het tekstvak naam. In plaats van name="naam" zou je hier kunnen kiezen voor name="email".

We gaan verder in het formulier en komen zogenaamde checkboxen tegen. Je ziet  een lijstje, en je kunt aanvinken wat je wilt. Er zijn meerdere opties mogelijk.  Die checkboxen maak je zo:

<input type="checkbox" name="websites">
<input type="checkbox" name="cursussen">
<input  type="checkbox" name="overig">

Dan zie je nog twee cirkeltjes. In tegenstelling tot de checkboxen kun  je er hier maar eentje selecteren. Logisch, want je bent man of vrouw,  terwijl je bijvoorbeeld wel over websites, cursussen en gratis prijsvragen informatie aan kunt vragen. Als je er slechts een kunt selecteren heet het geen checkbox maar een radiobutton. Alles werkt hetzelfde  als bij de checkboxen, alleen in plaats van <input type="checkbox">  zeggen we nu natuurlijk <input type=" radio">, de  overige dingen, zoals name, blijven gelden (natuurlijk geef je wel een andere name op)

We zijn er bijna, het laatste invoerelement van ons formulier is een  selectielijst. Dit werkt iets anders dan je gewend bent, en wel zo:

<select>
<option>Nederland</option>
<option>Belgie</option>
<option>Duitsland</option>
<option>Frankrijk</option>
</select>

Verder kun je hier nog in het element <select> de size invoeren.  Voer je die niet in, dan krijg je een selectielijst. Zet je hem bijvoorbeeld  op 3, <select name="land" size="3"> dan is het  geen dropdown menu, maar een schuifmenuutje.

Dan zie je verder nog een groot leeg veld waar de bezoeker teksten kan invoeren.  Dat noemen we een textarea. Je kunt bij een textarea de hoogte  opgeven in rows (rijen) en de breedte in cols (kollomen).. Verder geef je hem een naam met "name",  bijvoorbeeld de naam "opmerkingen". Ons veld ziet er dus zo uit in de html:

<textarea name="opmerkingen"
rows="5" cols="30">
</textarea>

We zijn zover: het kan verzonden worden. Daarvoor hebben we twee  knoppen: Verzenden( submit) en Wissen( reset). De betekenis  hiervan snap je natuurlijk wel. De broncode hiervan ziet er zo uit.

<input type="Submit" name="verzenden" value="Verzenden">
<input type="Reset" name="wissen" value="Wissen">

De Value mag je zelf bedenken. Dit zijn natuurlijk de meest logische,  maar in principe kun je erin zetten wat je wilt. De value is de tekst  die op de knop verschijnt. Dus het zou ook bv kunnen zijn:
Verzenden naar Gratishandleiding.eu

Verder nog een tip: het beste kun je ook het volgende nog in de begintag <form> opnemen:

enctype="text/plain"

Dan wordt het totaal dus:

<form name="form1" method="post" action="mailto:xxxxxxxx@planet.nll" enctype="text/plain">

Het is een kleinigheidje, maar het zorgt er wel voor dat het een beetje fatsoenlijk leesbaar op je mail binnenkomt.

 Vorige pagina

                                             Volgende pagina

   | Over deze site | Disclaimer |
Neem contact op met de Webmaster met opmerkingen en tips

 TV/radio:

 Radio luisteren:webradio

 Wat is er op TV?

 TV gids (alle zenders)

 Uitzending gemist

 Verkeer:

 Files

 Routeplanner

 Nieuws/weer:

 NOS headlines

 Algemeen Dagblad

 Laatste nieuws

 Telegraaf

 Volkskrant

 Teletekst

 Het weer

 Handige hulpjes:

 Lettergrootte aanpassen

 Puzzelwoordenboek

 Online rekenmachine

 Zoeken naar mensen/adressen

 Handige info:

 SOS nummers

 Feestdagen 2011

 Feestdagen 2012

 Loterijen:

 Bank-giroloterij

 Euromillions

 Staatsloterij

 Postcodeloterij

 Link partners

 Webgids voor online winkelen

| More