Handleiding HTML - Formulieren

HTML		Formulieren

Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Knoppen

De meest gebruikte knoppen zijn die, welke je maakt met het INPUT element. Door het TYPE attribuut met de waarde "submit" aan het INPUT element toe te voegen, maak je een knop die er voor zorgt dat de informatie van het formulier wordt verzonden. Het TYPE attribuut met de waarde "reset" definieert een knop, waarmee je de beginwaarden van het formulier kunt herstellen. Met het VALUE attribuut bepaal je het opschrift van de knoppen.

<FORM METHOD="post" ACTION="bestemming"> <I>Vul hier je naam in:</I> <INPUT TYPE="text" NAME="naam" SIZE="20" MAXLENGTH="30"><BR> <BR> <INPUT TYPE="reset" VALUE="Beginwaarden"> <INPUT TYPE="submit" VALUE="Verzenden"> </FORM>

Dit wordt door de browser als volgt weergegeven:

Druk je op Beginwaarden, dan worden alle selecties ongedaan gemaakt en wordt alle reeds ingevoerde tekst op het formulier verwijderd. Druk je op Verzenden, dan worden de gegevens van het formulier verzonden naar de bestemming gedefinieerd via het ACTION attribuut van het FORM element (in dit voorbeeld werkt dat niet, omdat geen echte URL is opgenomen).

Een knop voor verzenden zal in de meeste formulieren nodig zijn. Of een reset-knop nodig is, zal per situatie bekeken moeten worden. Bij kleine formulieren met een enkel tekstveld is er geen enkele noodzaak voor een reset-knop, terwijl het bij uitgebreide formulieren maar de vraag is, of de gebruiker er behoefte aan heeft alle ingevoerde informatie in één keer te kunnen wissen. In ieder geval zal de gebruiker het niet op prijs stellen als alles gewist wordt, doordat hij/zij per ongeluk op de verkeerde knop drukt.

Knoppen worden ook vaak gebruikt bij scripts. Klikken op de knop heeft dan niet als resultaat dat informatie naar de server gestuurd wordt, maar dat het script een bepaalde gebeurtenis veroorzaakt.

In plaats van een knop kan ook een afbeelding gebruikt worden om de informatie uit het formulier te verzenden. Je voegt daarvoor aan het INPUT element het TYPE attribuut met de waarde "image" toe en bovendien de attributen SRC en ALT. Het SRC attribuut bepaalt welke afbeelding moet worden opgenomen, het ALT attribuut definieert een alternatieve tekst voor als de browser de afbeelding niet kan of mag worden weergegeven. Omdat niet elke browser met het ALT attribuut overweg kan, is het goed ook de attributen VALUE en NAME op te nemen. Voor het VALUE attribuut kun je dezelfde waarde als van het ALT attribuut gebruiken. Als waarde voor het NAME attribuut kun je er het beste een kiezen, die uitsluitend letters, cijfers en verbindingsstreepjes bevat.

<FORM METHOD="post" ACTION="bestemming"> .. <INPUT TYPE="image" SRC="verzenden.gif" ALT="Klik om de informatie te verzenden" VALUE="Klik om de informatie te verzenden" NAME="Verzenden"> </FORM>

In dit voorbeeld geeft de afbeelding de suggestie van een knop. Het mag echter ook een gewone "platte" afbeelding zijn.

Met het BUTTON element heb je meer mogelijkheden om te bepalen hoe een knop er uitziet.

<FORM METHOD="post" ACTION="bestemming"> .. <BUTTON TYPE="reset"><IMG SRC="fout.gif" ..> Beginwaarden</BUTTON> <BUTTON TYPE="submit"><IMG SRC="goed.gif" ..> Verzenden</BUTTON> </FORM>

In een browser die het BUTTON element ondersteunt, zie je zowel de afbeelding als de tekst welke de inhoud van het element vormen:

Houd er rekening mee dat browsers die het BUTTON element niet ondersteunen alleen de inhoud weergeven. De gebruiker heeft dan dus geen knop meer om op te drukken en kan de informatie dus niet verzenden. Waarschijnlijk is het beter voorlopig gewoon de standaard knoppen te blijven gebruiken.

Vervolg: Bestanden verzenden

Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin