Werken met formulieren.
Als je een interactieve webpagina wilt maken, dan moet je een formulier in je webpagina opnemen. Een formulier dient om informatie in te voeren (bijvoorbeeld in een registratieformulier). De ingevoerde informatie moet worden verwerkt. De invoer moet ófwel worden doorgestuurd naar een webserver, ófwel worden verwerkt in een script op de pagina zelf. Dit gebeurt na een klik op de verzendknop dan wel de bevestigingsknop.
Basisprincipes van formulieren.
Het formulier en de formulieronderdelen zijn HTML-elementen die je buiten je JavaScript-programma maakt, maar die je in je scripts als standaardobjecten gebruikt.
Formulier in je webpagina opnemen.
Als je in je webpagina een formulier opneemt, dan moet je de volgende stappen zetten:
* Je maakt het formulier, en je geeft het formulier een naam.
* Je bepaald welke invoerelementen (tekstinvoerregel, aankruisvakje, aanklikrondje) in het formulier moeten komen, en geeft elke invoer-element een naam.
* Je maakt een bevestigknop waaraan je een event handler plus functie toevoegt. Wordt de invoer bevestigd, dan wordt de functie aangeroepen.
* In de functie verwijs je naar de informatie via document, de naam van het formulier, naam van het invoerelement, plus de bijhorende eigenschap.
Formulier en formulier-onderdelen.
Een formulier en alle formulieronderdelen (formuliervelden) maak je in HTML. Een formulier is het HTML element form. Alle formulieronderdelen zijn op zich zelf staande HTML-elementen, maar zijn tevens eigenschappen van het element form.
Formulier in de broncode.
In de broncode bestaat een formulier uit de tags <FORM> en </FORM>. Alles tussen de form-tags behoord tot het formulier. Geef het formulier een naam met name.
<BODY> <FORM name="naam"> ... </FORM> </BODY>
Formulieronderdelen in de broncode.
Alle formulieronderdelen (behalve keuzelijsten en tekstgebieden) bestaan in de broncode uit enkel de eenvoudige tag <INPUT>.
Het type onderdeel wordt opgegeven met het attribuut type. Geef met het attribuut type het gewenste HTML-element op.
<INPUT type="element">
De belangrijkste elementen van een formulier zijn:
button : bevestigingsknop submit : verzendknop reset : herstelknop text : tekstinvoerregel radio : aanklikrondje checkbox : aankruisvakje
Invoer-elementen een naam geven.
Je moet alle invoer-elementen een naam geven met het attribuut name, zodat je in je JavaScript-programma naar de ingevoerde informatie in de elementen kunt verwijzen.
<INPUT type="element" naam="naam">
Werken met invoer-elementen.
Een tekstinvoerregel is een éénregellige invulregel, die je in je formulier opneemt met het attribuut type met de waarde text en waaraan je een naam geeft met name.
<INPUT type="text" naam="tekstinvoerregel">
Aanklikrondjes en aankruisvakjes neem je altijd per groep op. Alle aanklikrondjes en alle aankruisvakjes geef je dezelfde naam. Voorzie ieder rondje en ieder vakje van verschillende informatie met het attribuut value om duidelijk te maken welke keuze ze inhouden. Alle rondjes en vakken staan immers voor iets anders!
Standaardwaarden in formulieren bepalen.
Je kunt invoer-elementen in een formulier voorzien van een standaardwaarde, die bij het laden van de webpagina al staan ingevuld. Wil je dat een aanklikrondje dan wel één of meer aankruisvakjes actief zijn, dan geef je ze het attribuut checked
Wil je dat een standaardtekst in de tekstinvoerregel staat geef dan die tekst met het attribuut value op. Je geeft de breedte van de regel op met het attribuut size.
Bevestigingsknop en herstelknop in formulier opnemen.
Ingevoerde informatie moet worden bevestigd. Je moet dus in het formulier een bevestigingsknop (plus een herstelknop) opnemen. In de broncode bestaat een knop uit een eenvoedige input-tag. Voor een bevestigknop heeft type de waarde button; voor een herstelknop heeft type de waarde reset. Een opschrift op de knop bepaal je met het attribuut value dat je als waarde het gewenste opschift kunt geven.
<INPUT type="button" value="OK">
en voor een herstelknop is dat:
<INPUT type="reset" value="herstel">
Bevestigingsknop voorzien van event handler met JS-functie.
Aangezien het formulier buiten je JavaScript-programma is gemaakt, is het zaak vanuit het formulier je JavaScript programme te activeren door een event handler aan de bevestiginsknop toe te voegen waarmee je de functie activeert.
Informatie uit formulier in JavaScript-programma verwerken.
Een formulier is in JavaScript het standaardobject Form dat een eigenschap is van het allombekende document. Alle formulier-onderdelen zijn eigenschappen van Form.
Informatie uit formulier verwerken.
De informatie die de bezoeker van je webpagina in het formulier invoert, is een variabele met een bepaalde waarde. De variabele is een string als de bezoeker tekst in een tekstinvoerregel heeft ingetikt, een logische waarde als de bezoeker een aankruisvakje of aanklikrondje heeft geactiveerd. In je JavaScript-programma gebruik je de waarde door ernaar te verwijzen.
Verwijzen naar ingevoerde informatie.
Je verwijst naar de invoer in een formulier via document (het object Form is immers een eigenschap van document), via de formuliernaam, via de elementnaam (al dan niet met index) en via de bijbehorende eigenschap. Naar een string in de tekstinvoerregel verwijs je met gebruikmaking van value.
document.formuliernaam.tekstinvoerregel.value
Elke groep (gelijknamige) aanklikrondjes en elke groep (gelijknamige) aankruisvakjes vormt een tabel (array). Dus elk aanklikrondje en aankruisvakje krijgt een unieke index. Naar logische waarde (van aankruisvakjes of aanklikrondjes) verwijs je met gebruikmaking van de index en de eigenschap checked.
Informatie uit tekstinvoerregel verwerken.
Om de invoer van een tekstinvoerregel in een formulier te verwerken in je javascript-programma moet je als volgt werken:
*Maak een formulier en geef het formulier een naam
*Maak een bevestigingsknop met de event handler onClick. Geef onClick als waarde de gewenste functienaam. Na een klik op de bevestigingsknop wordt de desbetreffende functie aangeroepen.
*Maak een invoerregel en kies een naam (en kies desgewenst ook de lengte van de regel)
*Gebruik in de functie de inhoud van de tekstinvoerregel: verwijs naar de invoer met document.formuliernaam.tekstinvoerregelnaam.value. Je kunt bijvoorbeeld een code als deze maken die de ingevoerde informatie in een alert toont:
Maar dit heeft natuurlijk nog als nadeel dat wanneer degene die de tekst invoert, er niet zet. Je een leeg venster krijgt, en dat willen we natuurlijk niet. Hiervoor kun je een if, else constructie maken. Zoals dit:
Informatie uit aanklikrondjes en aankruisvakjes verwerken.
Bij een aanklikrondje of aankruisvakje is de invoer altijd een logische waarde; true als het element wel is geactiveerd en false als het element niet is geactiveerd. Je verwijst naar de invoer van de rondjes en vakjes via de index en de eigenschap checked.Wil je als tekst tonen welke keuze is gemaakt, dan moet je naar value (van het geactiveerde element) verwijzen (geef dus aan value een duidelijke string als waarde).
*Zet in het formulier een bevestigingsknop met de event handler onClick en een funtie:
*Je verwijst naar de ingevoerde informatie met document, de formuliernaam, de elementnaam plus index en de eigenschap checked. Bijvoorbeeld:
document.mijn_formulier.bezorgen[0].checked
*Verwerk de ingevoerde informatie. Maak de functie die moet worden uitgevoerd als de invoer wordt bevestigd en gebruik daarin de variabelen.
Informatie uit aanklikrondjes en aankruisvakjes verwerken: een voorbeeld.
Als je een formulier maakt om gegevens te verwerken, let dan op de verwijzingen naar de diverse onderdelen van het formulier, en op de functie die je met de bevestigingsknop in werking zet. Hier een voorbeeld van een formulier waarbij twee zakene spelen:
*Er is invoer van informatie via aankruisvakjes. Je verwijst naar deze invoer met document.form1.sitemasters[teller].checked.
*Als op de bevestigingsknop wordt geklikt, wordt de functie sitemasters() geactiveerd. Met deze functie benader je de aankruisvakjes met een for-lus (teller=0; teller<=2; teller++): de inhoud van document.form1.sitemasters[teller].checked wordt gelezen. Als checked waar is, voeg je tekst toe aan de string bestelling.
*Van de twee aanklikrondjes wordt alleen het eerste rondje gecontroleerd, Als voor deze checked onwaar is, waat je al dat checked wel waar is voor de tweede.
Informatie verwerken uit een tekstgebied.
Een tekstgebied in een formulier bestaat in de broncode uit het tag-paar <TEXTAREA name="naam"> en </TEXTAREA>. Geef het tekstgebied een naam met name. Je verwijst naar de waarde in het tekstgebied met: document, de formuliernaam, de tekstgebiednaam en de eigenschap value.
document.formuliernaam.tekstgebiednaam.value
Informatie uit een keuzelijst verwerken.
Een keuzelijst in een formulier (het element Select) bestaat in de broncode uit de tags <SELECT name="naam">.Geef de keuzelijst een naam met name.
Een optie in een keuzelijst bestaat enkel uit de enkelvoudige tag <OPTION>. Alle opties in een keuzelijst vormen in JavaScript samen een tabel (array) options.
De inhoud van de keuzelijst is gekoppeld aan de eigenschap text. Je verwijst naar de ingevoerde waarde met document, formuliernaam, keuzelijstnaam, options[] en text.
Einde
Zo dan zijn we nu aan het einde gekomen van deze tutorial, enige vragen kun je aan mij stellen door mij een private message te sturen en als het echt belangrijk is vraag je maar voor mijn msn adres.
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
