login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials

Tutorials > HTML


Gegevens:
Geschreven door:
BigTeddy
Moeilijkheidsgraad:
Normaal
Hits:
67935
Punten:
Aantal punten:
 (4.14)
Aantal stemmen:
22
Stem:
Niet ingelogd
Nota's:
 Lees de nota's (27)
 

Tutorial:

Formulieren

1. Inleiding
2. Form & Attributen
  2.1 Name
  2.2 Method
  2.3 Action
3. Velden & Aanverwanten
  3.1 Input
  3.2 Textarea
  3.3 Select
4. Buttons
5. Extra's
  5.1 Fieldset
  5.2 Tabindex
  5.3 Disabled
  5.4 Readonly
  5.5 Optgroup
  5.6 Label
  5.7 Accesskey
  5.8 For



1. Inleiding

Een van de belangrijkste dingen in HTML is de mogelijkheid om formulieren te maken.
Om een formulier samen te stellen kan je gebruik maken van verschillende soorten veld en deze combineren.
In deze tutorial zal het acpect velden en buttons van naderbij bekeken worden.

 top

2. Form & Attributen

Het belangrijkste bij een formulier is het form, deze zal de werking van de velden en buttons mogelijkmaken.

Een form wordt gemaakt met de tags <form> & </form>
Deze moet je nog aanvullen met een aantal attributen, hieronder zie je een overzichtje hiervan.

name Dit attribuut is om een naam aan het form mee te geven name="mail_form"
method Dit attribuut is om de manier van data vergaring aan te duiden. methode="post"
action Dit attribuut is om de actie van het form aan te duiden. action="pagina.html"
enctype Dit attribuut is om het type van het form aan te duiden. enctype="multipart/form-data"

Wat je hierboven ziet aan voorbeelden is natuurlijk maar een mogelijkheid.
Nu zullen we daar even verder op in gaan.

NAME
Dit attribuut gebruik je om een naam mee tegeven aan je form.
Dit is normaal niet nodig om te doen, tenzij je gaat werken met JavaScript.
Dan is het noodzakelijk om je form een naam te geven zodat je JavaScript het kan herkennen en er iets mee kan doen.

 top

METHOD
Dit attribuut gebruik je om aan je form te vertellen op welke wijze er informatie binnen komt of buiten gaat.
Je hebt de keuzen uit 2 mogelijkheden, GET en POST.

Met GET zal de ingevulde data in de url worden gestopt en zo worden doorgegeven.
<form method="get">

Met POST zal de ingevulde data worden doorgegeven via superglobals
<form method="post">

 top

ACTION
Dit attribuut gebruik je om aan je form te vertellen wat dez emoet doen met de inhoud van de velden.
Dit kunnnen verschillende dingen zijn.

- Je kan de inhoud opnieuw op de pagina gebruiken.
<form method="post" action="">

- Je kan de inhoud doorsturen naar een andere pagina om daar te gebruiken.
<form method="post" action="pagina_naam.html">
<form method="post" action="pagina_naam.html?titel=formulier is verzonden">
<form method="post" action="?p=pagina_naam&t=formulier is verzonden">
...

- Je kan de inhoud onmiddellijk versturen met een mail.
<form method="post" action="mailto:naam@domein.tld">
<form method="post" action="mailto:naam@domein.tld?subject=Mail voor webmaster">
<form method="post" action="mailto:naam@domein.tld?subject=Mail voor webmaster&body=Dit is een mail voor jouw webmaster!">
...

 top

3. Velden & Aanverwanten
De velden zijn de sleutels voor een forumier, zonder velden heb je namelijk geen formulier.
In een overzicht dat je hieronder vindt staan de verschillende soorten die je kan gebruiken.
Dit zijn enkel de tags en dien je nog te voorzien van attributen zoals name, value, type, ...

<input/> Deze tag gebruik je om letterlijk een input te doen, zoals bv een gebruikersnaam invullen om in te loggen
<textarea>
</textarea>
Deze tag gebruik je om een veld (area) te maken, waar je dan een tekst in kunt typen
<select>
</select>
Deze tag gebruik je om een keuze (select) menu te maken, zoals bv om een land te kiezen


INPUT
Deze tag gebruik je om letterlijk een input te doen, zoals bv een gebruikersnaam invullen om in te loggen.
Je moet deze tag aanvullen met een type een een name, de naam is zeer belangrijk want deze heb je nodig om nadien de waarde eruit te kunnen halen.

Voor typen heb je de keuze uit. (text, password, checkbox, radio, file, button, submit, reset en image)
In dit del van de tutorial zullen we enkel text, password, checkbox, radio en file behandelen.

De overige zijn bedoelt om het maken van buttons en komen aanbod in het volgende deel.

- Text
Dit attribuut gaat een tekst veld creëren.
Je kan deze nog aanvullen met een value, size en maxlength.
Deze kun je onderling met elkaar combineren indien je dit wilt.
Hieronder vind je enkel voorbeelden met hun code.

<input type="text" name="veld_naam" />

<input type="text" name="veld_naam" size="40" />

<input type="text" name="veld_naam" value="test veld" />

<input type="text" name="veld_naam" maxlength="5" />

<input type="text" name="veld_naam" size="40"value="test veld" />

- Password
Dit attribuut gaat een tekst veld creëren maar je zult niet kunnen zien wat erinstaat.
Je kan deze nog aanvullen met een value, size en maxlength.
Deze kun je onderling met elkaar combineren indien je dit wilt.
Hieronder vind je enkel voorbeelden met hun code.

<input type="password" name="veld_naam" />

<input type="password" name="veld_naam" size="40" />

<input type="password" name="veld_naam" value="test" />

<input type="password" name="veld_naam" maxlength="5" />

<input type="password" name="veld_naam" size="40" value="test" />

- Checkbox
Dit attribuut gaat een vakje creëren dat je kunt aanvinken en uitvinken.

<input type="checkbox" name="veld_naam" />

Je kan deze nog aanvullen met een value en checked.
De value is bij een checkbox standaard on, je hoeft dus geen value mee tegeven maar het mag.

<input type="checkbox" name="veld_naam" checked />

- Radio
Dit attribuut gaat een rondje creëren dat je kunt selecteren en de-selecteren.

<input type="radio" name="veld_naam" value="optie_1" />

Je kunt deze nog aanvullen met een value en/of checked.

<input type="radio" name="veld_naam" value="optie_1" checked />

Indien je een lijstje aantal mogelijkheden wilt, dien je deze allemaal de zelfde name te geven. Indien je dat niet doet, zul je eindigen met alle rondjes geselecteerd en dat is niet de bedoeling. Als dat de bedoeling is, gebruik je de checkbox beter.

<input type="radio" name="veld_naam" value="optie_1" checked />
<input type="radio" name="veld_naam" value="optie_2" />
<input type="radio" name="veld_naam" value="optie_3" />

- File
Dit attribuut gaat een tekst veld creëren om een bestand te kunnen uploaden.
Je kan deze nog aanvullen met een value, size en maxlength; maar dat is ongebruikelijk en misschien ook onnodig.
Als je dit attribuut gebruikt dien je ook de enctype mee te geven in het form. Deze is multipart/form-data voor het uploaden van bestanden.
Hieronder vind je enkel voorbeelden met hun code.

<input type="file" name="veld_naam" />

<input type="file" name="veld_naam" size="30" />

 top

TEXTAREA
Deze tag gebruik je om een tekst veld te creëren.
Je kan deze tag nog aanvullen met cols, rows & value; maar dat is niet noodzakkelijk.
De waarde van name is natuurlijk hier ook weer belangrijk omdat je deze naam zult moeten gebruiken op de action pagina (zoals gedefineerd bij action).

Indien je geen rows en/of cols meegeeft, krijg je het onderstaande resultaat.

<textarea name="tekst_veld"></textarea>

Als je een waarde voor rows en/of cols meegeeft, krijg je vb het onderstaande resultaat.

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

Wel zit er een verschil, op de wijze waarop je een value meegeeft.
Bij de vorige moest je dat doen doormiddel van het attribuut value, bij een textarea moet je dit niet zo doen.
Hierbij moet je de waarde plaatsen tussen de 2 tags <textarea>hier zo dus</textarea>.
<textarea name="tekst_veld" rows="5" cols="30">Dit is de waarde voor het veld.</textarea>

 top

SELECT
Deze tag gebruik je om een dorp-down lijstje te maken van verschillende mogelijkheden.
Je begint een dorp-down met de tags <select></select> zoals hieronder weer gegeven, maar dan heb je nog niets.

<select name="optie_lijst"></select>


Bij een dorp-down is het de bedoeling dat je mogelijkheden opgeeft waaruit gekozen kan worden.
Dit doe je doormiddel van de tags <option> & </option>, hierbij moet je natuurlijk weer een value opgeven om deze nadien nog te kunnen achterhalen.

<select name="optie_lijst"><option value="optie1">Optie 1</option><option value="optie2">Optie 2</option></select>

Indien je dit niet goed vindt z'n lijstje maar een volledige overzicht wilt, kan je het attribuut size toevoegen.

<select name="optie_lijst" size="2"><option value="optie1">Optie 1</option><option value="optie2">Optie 2</option></select>

 top

4. Buttons

De buttons in een formulier zijn dat gene die een formulier inwerking laat treden.
Er zijn verschillende soorten buttons die je kunt gebruiken in een formulier.
Al de buttons beginnen met de input tage maar hebben een verschillend type (button, submit, reset of  image).
Hieronder zie je een overzichtje van de typ, hun code en wat uitleg.

- Button
Met het type button maak je een standaard button, waaraan je een naam kunt geven en een actie.
Dit zul je dan moeten doen met de tag onclick.
Indien je XHTML-valid wilt zijn, moet je <button>ga naar pagina</button> gebruiken. Hieronder vind je een voorbeeld met zijn code.

<input type="button" value="ga naar pagina" onclick="window.location='index.php'" />

<button onclick="window.location='index.php'">ga naar pagina</button>

- Submit
Met het type submit, maak je van een button die het form gaat uitvoeren (zoals gedefineerd bij method) naar een ergens (zoals gedefineerd bij action)
De name die je opgeeft is ook weer belangrijk omdat je dit zult nodig hebben op de pagina naarwaar je het form naartoe zend (zoals gededineerd bij action).

<input type="submit" value="Verzenden" name="zend_form" />

- Reset
Met het type reset, maak je van een button die alle velden in het form gaat leeg maken.

<input type="reset" value="Leeg maken" NAME="leeg_maken" />

- Image
Met het type image, maak je van een button die het zelfde doet als submit maar dan met een plaatje.

<input type="image" src="pasop.jpg">

 top

5. Extra's

Er zijn nog enkel extra's die je kan toevoegen aan je form.
Deze hebben niet nodig, maar zorgen voor een beter gebruik of uitzicht.

FIELDSET
Je kent misschien wel site die z'n mooie rand rond hun tabel of tekst hebben.
Maar dan niet dmv een tabel of zo, neen want deze hebben dan mooie rondingen.
Je ziet dit ook bijna altijd bij een intalatie wizard als je een programma of game installeerd op je pc.
Maar waar gaat het nu over, vragen jullie zich waarschijnlijk af, wel over het volgende.
Indien je de volgende <fieldset> & </fieldset> tags gebruikt, krijg je dat effect.

<fieldset></fieldset> 


Indien je rond tekst of form tussen plaatst krijg je dat effect.

<fieldset>Deze tekst staat hier mooi.<br />Vindt jij ook niet?</fieldset> 
Deze tekst staat hier mooi.
Vindt jij ook niet?


Indien je nu een titeltje op de "tabel" wilt zetten kan je dat doen dmv de tags <legend> & </legend>.
Deze plaats je na de <fieldset> tag, ook kun je in de legend tag atributen gebruiken zoals align om het mooi in het midden te zetten.

<fieldset><legend align='center'>De Uitleg over de tags fieldset!</legend >Deze tekst staat hier mooi.<br />Vindt jij ook niet?</fieldset> 
De Uitleg over de tags fieldset!Deze tekst staat hier mooi.
Vindt jij ook niet?


TABINDEX
Met de tag tabindex, kan je je velden een volgorde geven om te berijken via de TAB toets.
Hieronder zie je een voorbeeld met en zonder tabindex en met kun code's.
De 1ste is zonder de tag en de 2de is met de tag.

- Gewone vorm
<TABLE BORDER="2"> 
<TR>
  <TD>Naam: <INPUT NAME="naam"></TD>
  <
TD rowspan=3>Bericht<br /><TEXTAREA NAME="bericht" COLS=25 ROWS=2></TEXTAREA></TD>
</
TR>
<
TR>
  <
TD>E-Mail: <INPUT NAME="email"></TD>
</
TR>
<
TR>
  <TD>Vindt jij Sitemasters goed?:
   
<SELECT NAME="keuze">
      <OPTION VALUE="pff">Pfff....geen mening</OPTION>
      <OPTION VALUE="ja">Ja</OPTION>
      <OPTION VALUE="neen">Neen</OPTION>
    </SELECT>
  </TD>
</
TR>
</
TABLE>
Naam: Bericht
E-Mail:
Vindt jij Sitemasters goed?:


- Tabindex vorm
<TABLE BORDER="2"> 
<TR>
  <TD>Naam: <INPUT NAME="naam" TABINDEX=1></TD>
  <
TD rowspan=3>Bericht<br /><TEXTAREA NAME="bericht" COLS=25 ROWS=2 TABINDEX=4></TEXTAREA></TD>
</
TR>
<
TR><TD>E-Mail: <INPUT NAME="email" TABINDEX=2></TD></TR>
<
TR>
  <TD>Vindt jij Sitemasters goed?:
   
<SELECT TABINDEX=3 NAME="keuze">
      <OPTION VALUE="pff">Pfff....geen mening</OPTION>
      <OPTION VALUE="ja">Ja</OPTION>
      <OPTION VALUE="neen">Neen</OPTION>
    </SELECT>
  </TD>
</
TR>
</
TABLE>
Naam: Bericht
E-Mail:
Vindt jij Sitemasters goed?:

 top


« Vorige tutorial : Tabellen Volgende tutorial : Afbeeldingen »

© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.013s