Formulieren maken

Info 
Door: Admin Moeilijkheidsgraad: 1/3
Views:106.332Reacties: 118(Bekijken)
  Log in om zelf te reageren
 Waardering:9.8/10 (8 stemmen)

HTML: de basis van iedere website» De opbouw van een html bestand | Tekst op je website zetten | Kleuren op je website | Lettertypen | Hyperlinks maken | Tabellen | Frames | Meer informatie over frames | Lijsten maken | Formulieren maken | I-frames | Metatags




Iedereen die regelmatig op internet surft, kent ze: formulieren. Je vult een aantal gegevens in, en dit wordt, nadat je op een knop druk, verzonden naar de mensen achter die site. Zo'n formulier is best handig. Op deze site vind je er ook eentje: klik maar eens op 'add url'. Na het invullen van dit formulier, worden de gegevens naar ons verzonden. In dit deel van de cursus leren we je zelf zo'n formulier te maken en te gebruiken.

Er zijn grofweg twee typen 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 moet maken:


Informatie aanvragen

Naam:
E-mail:

Stuur mij informatie over:
Websites
Cursussen
Overig

Ik ben een
Man Vrouw

Ik kom uit

Verder wil ik dit nog even kwijt:


Daar gaan we...nu jij!

Dit ziet er behoorlijk ingewikkeld uit, maar het valt allemaal best mee. Ten eerste goed nieuws: een formulier bestaat uit puur html, dus nog even geen andere talen zoals javascript of php. Je leert hier dus gewoon weer iets meer van html, er is dus niks 'engs' aan een formulier. Het is geen speciale pagina, maar gewoon een deel van een pagina. 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 willen 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 tekstvlak moet komen te staan, de naam in dit geval. Dit gebeurt gewoon met de bekende <p>-tag. Daarna geven we aan dat er een tekstvlak 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 tekstvlak een paar belangrijke attributen staan. We bespreken die eerst even:

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

size="30"
Hiermee geef je aan dat de lengte van het tekstvlak 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 tekstvlak een naam, zodat je het bij de verwerking kunt herkennen.

Dat was het tekstvlak. Het tweede formulierelement dat we tegenkomen is het tekstvlak e-mail. dit werkt precies hetzelfde als bij het zojuist behandelde tekstvlak 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">

Ook dit is weer behoorlijk simpel, hier hoeven we verder niets aan uit te leggen.

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 én cursussen info aan kunt vragen. Als je er slechts één 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>België</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 vled waar de bezoeker teksten kan invoeren. Dat noemen we een textarea. Je kunt bij een textarea de hoogte opgeven in rows en de breedte in cols. Verder geef je hem een naam met "name", bijvoorbeeld de naam jouwopmerkingen. Ons veld ziet er dus zo uit in de html:

<textarea name="jouwopmerkingen"
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.

Verder nog één 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:r.haasteren@planet.nl" enctype="text/plain">

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

«I-frames Metatags »

118 reacties
serena Geplaatst op 01-08-2012 om 02:39
 

Regular
Heb een website maar wil deze contactformulier plaatsen, heb geen ervaring wie kan me helpen met deze script om hem te laten mailen.
<form id='contactus' method='post'>

<fieldset>

<legend>Contact </legend>

<input type='hidden' name='submitted' id='submitted' value='1'/>

<label for='name' >Naam*</label><br/>

<input type='text' name='name' id='name' maxlength="50" /><br/>

<label for='email' >Email *</label><br/>

<input type='text' name='email' id='email' maxlength="50" /><br/>

<label for='phone' >Telefoon *</label><br/>

<input type='text' name='phone' id='phone' maxlength="15" /><br/>

<label for='message' >Bericht </label><br/>

<textarea rows="10" cols="50" name='message' id='message'> </textarea>

<input type='submit' name='Verzenden' value='Verzenden' />

</fieldset>

</form>
Daan2U Geplaatst op 28-11-2011 om 07:47
 

Regular
kan er ook een server base formulier komen,
ik probeer vanalles maar t lukt me niet,
nu moet alles via de mailbox van de bezoekers
steven72100 Geplaatst op 03-11-2011 om 17:47
 

Regular
ik heb een heel klein probleempje ik heb alles precies ingevuld maar alles staat er checkbox radio en zo maar ik heb geen tekst bij checkbox en radio en die dingen kan iemand mij pliz helpen
StefanoRe Geplaatst op 25-03-2011 om 17:32
 

Regular
Hoe kan ik voor iedereen een eigen profielpagina krijgen enz. Zodat als je inlogt je een eigen profielachtig iets hebt. En tegen elkaar kan strijden zonder dat dat outlouk achtig dingetje komt! Help me please!!
Dave_vc Geplaatst op 16-03-2011 om 00:15
 

Regular

Pagina 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be, uw Hosting Solution Builder