BASISELEMENTEN <form> <input> <textarea> <select> & <option> </form> INPUT element. INPUT attributen: type, id & name

Transcriptie

1 Je kan een basisformulier opzetten voor je website Je kan informatie opvragen op verschillende manieren Je kan een formulier opmaken met CSS 3 Je kan formulieren beheren in Adobe Dreamweaver GERICHT INFORMATIE OPVRAGEN Webtechnologie Syntra West Docent: JP Isebaert LEERDOELEN FORMULIEREN, communicatie op het web 1 2 BASISELEMENTEN <input> <textarea> <select> & <option> begintag eindtag block karakter attributen bepalen functionaliteit!! formulieren coderen : veel keuzes, veel flexibiliteit = complex <form action= actiescript.php" method="post"> ADW: code wordt oranje. 3 4 INPUT element (de <input> tag) INPUT attributen: type, id & name <input> definieert invoerveld inline, leeg element (geen inhoud, geen eindtag) standaard: tekstbox attributen bepalen functionaliteit, type. voorbeeld: <input id="naam" type="text" name="naam"> type : voor soort veld, type invoer. Vb. text, password, checkbox, radio, knop, id : identificeert invoerveld, maakt het uniek name: unieke waarde voor verwerking <input id="naam" type="text" name= naam"> 5 6 1

2 INPUT: knoppen opstartoefening een verzend-knop <input type="submit value="verzend"> een reset-knop (zet alle velden blank) <input type= reset value= reset"> webtech.apprentia.com Oefeningen -> formulieren -> oef 1 Een eenvoudig formulier voor opvragen van: Naam, Voornaam, Straat, postcode, Gemeente Sla op als form-01a.html 7 8 <input id="anaam" type="text" name= anaam" > <input id= "vnaam" type="text" name= vnaam" > <input type= reset" value= wegvegen > <input type="submit" value= "verzenden"> <label> voor VELDOMSCHRIJVING 1. eenvoudige methode <label> Naam: <input > </label > 2. ofwel met for attribuut <label for= anaam > Naam: </label> <input id="anaam" type="text name= Naam"> waarde for (label) moet = waarde id (input) 9 10 Oef form-01b.html Pas de eenvoudige veldomschrijving label toe <label>naam: <input id= naam" type="text" name= anaam"> </label> <input type="submit" value="verzenden"> maak zelf voornaam, straat, postcode en gemeente aan Oefening <label> element Verzeker je ervan de oefening op te slaan als: form-01b.html voor eenvoudige label Open form-01a, sla op als: form-01b2.html en codeer de oefening met het for= label

3 Beschouwing vereenvoudigd Vereenvoudigd formulier. DENK NA over +/-. NOTEER je visie over +/- <label for= >Voornaam:</label> <input id= > <label>voornaam:<input></label> = sneller werken / eenvoudige structuur Vereenvoudigd?? Kern : Opmaak in css: HTML = <label><span>voornaam:</span> structuur & inhoud <input></label> CSS = opmaak 2 individuele, inline & stijlbare elementen HTML5 structuur & opmaak <fieldset> alle input elementen </fieldset> logische groepering in kader (semantiek) fieldsets mag je nesten <legend> de kopnaam voor de groep </legend> fieldset & legend legend (reeds met css) placeholder fieldset <fieldset> <legend>je persoonlijke gegevens</legend> </fieldset> PAS TOE in oefening. sla op als form-1c.html Oefening: form-1c.html <fieldset> <legend>je persoonlijke gegevens</legend> <label for= anaam">naam:</label> <input id= anaam" type="text" name= ANaam"> <label for= vnaam">voornaam:</label> <input id= vnaam" type="text" name= VNaam"> </fieldset> en ook uitvoeren voor adresgegevens <input type="submit" value="verzenden"> placeholder= informatie/hint - attribuut - korte hint in invoerveld - verdwijnt zodra surfer typt <input id= anaam placeholder= "Naam" > <input id= vnaam" placeholder= "Voornaam > Ondersteuning: Browsers: IE 10, Firefox, Opera, Chrome, Safari, versies Velden: text, search, url, tel, en password. Tijd over? Stijl dan je formulier zo Inspecteren (Ctrl+shift+I): Gebruik de tools die je er zo bij krijgt!

4 INPUT attribuut TYPE VASTGELEGDE invoerkeuzes De meest voorkomende vormen: <input type="text"> standaard tekstbox <input type="password"> verdoken invoer <input type="checkbox"> een aanvink-hokje <input type="radio"> een keuzeknopje <input type="submit"> een verzend-knop Attributen voor <input> Keuzerondjes voor een unieke keuze Selectievakjes voor meerdere keuzen Keuzelijst geldig in oudere browsers <input type="radio"> [radio-buttons] <input type="checkbox"> [selectievakje] 1 keuze, (beperkt) aantal mogelijkheden <input type="radio" name="sexe" value="man">man <input type="radio" name="sexe value= vrouw">vrouw name="waarde : zelfde waarde voor elke value! value = waarde die naar server gaat voor verwerking!. 0, 1 of meer keuzes uit een vaste lijst <input type="checkbox" name= vervoer" value="fiets">fiets <input type="checkbox" name="vervoer" value="auto">auto <input type="checkbox" name="vervoer" value="trein">trein opstartoefening PASWOORD [Password] webtech.apprentia.com Oefeningen -> formulieren -> oef 2 Formulier met andere inputvormen: Radio: 5 favoriete groente- & fruitsoorten Checkbox: 5 favoriete schotels & drankjes Sla op als form-02a.html <input type="password" > De ingevoerde karakters worden gemaskeerd als ster of bol. [ ] <input type=" " name=" "> Browservalidatie: alleen als <input> ook het attribuut name= is

5 Recap: basis attributen input text password checkbox radio submit reset button hidden file 1 regel tekst 1 regel tekst, invoer = sterretjes of bolletjes. selectievakje (aan- & uitvinken) keuzerondje (1 keuze uit meerdere) verzendknop herstelknop (wist invoer) een knop verborgen veld (serverinstructies) om een bestand te kiezen voor upload SELECT & OPTION: keuzelijst Vaste, vooraf bepaalde keuzen <select> <option> keuze 1 </option> <option> keuze 2 </option> <option> keuze 3 </option> </select> SELECT & OPTION: keuzelijst select: lijst met keuzes <select id="browsernaam" name="browser"> option: keuzemogelijkheden genest in select Attributen voor option: value = de waarde die naar server verstuurd wordt selected = een (1) voorgeselecteerde waarde <option value="firefox">firefox</option> <option value= Chrome selected>chrome</option> TEXTAREA: > 1 regel tekstinvoer <textarea> vak voor tekstinvoer.</textarea> Opmerkingen, mening, extra info: meerdere regels mogelijk. Attributen textarea: cols, rows en maxlength. cols: aantal tekens breed rows: aantal regels hoog maxlength: beperking aantal tekens placeholder (textarea ook instelbaar met CSS, width en height) Oefening form-02c / D.html Je formulier uitbreiden met volgende vragen: 1. keuzelijst voor 5 browsers selectie uit 5 opties, max. 1 keuze 2. Een tekstblok uw mening 7 regels van 35 tekens placeholder="geef je mening." <fieldset> <legend>browservoorkeur</legend> <label for="browser">kies een browser:</label> <select id="browser" name="browser"> <option value= IExplorer">IExplorer</option> <option value="firefox">firefox</option> <option value="chrome">chrome</option> <option value="opera">opera</option> <option value="safari">safari</option> </select> </fieldset>

6 textarea & placeholder <textarea ></textarea> textarea en attribuut placeholder: het element <textarea></textarea> mag NIETS bevatten (ook geen spatie) Attribuut: required invoer verplicht maken veld is leeg = geen validatie, geen verzending (opmaak : required velden duidelijk aangeven aan surfer bvb rood sterretje of ander opvallend kenmerk aan veld geven) <textarea placeholder= ></textarea> is OK <textarea placeholder= > </textarea> niet OK <input id="naam" type="text" name= voornaam required> In rodage FORMULIER & SCRIPT = data naar server Frequent nieuwe input-attributen in HTML5. werking: browser afhankelijk!! color: Toont een kleurkiezer. number: Invoer van een getal Advies: coderen browser/browser range: Genereert een schuifregelaar met specifieke browser code (kit code) datetime, date, month, best week, bewust time,datetime-local mee omgaan selectie van datum, tijd in kalender- weergave Verzenden en gegevensverwerking Via Op de server (dbase gestuurd) verwerking met een script (CGI,PHP, ASP.NET) en met hulp van een webserver Verwerking: elke hostingproviders heeft standaardscripts (CGI) Geen topic van deze cursus. action <form action="{scriptlocatie}" method="post > (attribuut) Bepaalt de actie die de server onderneemt om de ingevulde gegevens op het formulier te verwerken. Locatie script = URL script dat gegevens verwerkt. bijvoorbeeld voor een formulier bij telenet <form action="/cgi-bin/form.cgi" method="post"> (

7 Attribuut: method GET (bvb google) form action="{script_self}" method="post"> method : post HTTP methode om form data set te zenden. Mogelijk waarden zijn "get" (default) and "post". Deze waarden zijn niet hoofdlettergevoelig. Met GET vraag je data op van een welbepaalde bron (een request) Informatie van het form wordt gekoppeld aan de URL De aangepaste URL gaat naar server voor verwerking. Gebruik : databank gerelateerde zoekopdrachten vb Nadelen : De informatie staat in de URL en is "onbeveiligd De informatie komt in de cache en blijft in browser history Deze informatie kan je bookmarken Een get aanvraag is beperkt in lengte (2048 char). Advies : niet gebruiken voor persoonsgebonden informatie POST Je verstuurt informatie naar een server. informatie is ingebouwd in body van het formulier komt niet in de cache, is veilger dan get niet in browser history kan je niet bookmarken niet beperkt in lengte. Meest frequent gebruikte methode. RECAP formulieren 2 manieren om info te verkrijgen: 1. Zelf invoeren van gegevens 2. Selectie maken uit vooraf bepaalde gegevens <input> <textarea> <select> & <option> INPUT leeg, inline & attributen type= : soort invoer, welk veld id= : identificatie invoerveld, uniek maken name= : waarde voor verwerking value= : vaste waarde verwerking op server hidden : verborgen veld required : verplicht veld <input type= text > placeholder= info <label>thema: <input></label> <label for= AA > Naam: </label> <input id= AA > <input id="naam" type="text" name= naam">

8 <input type= xx > Input: type= radio type= checkbox <legend></legend> <fieldset></fieldset> <input type="radio" name="sexe" value="man">man 0,1 keuze 0,1 of meer keuzes <input type="checkbox" name= tra" value="fiets">fiets name= waarde identiek, zelfde voor ganse groep value= infoterm infoterm is dbase afhankelijk select & option: meerkeuze lijst Specials <input id= pwbox type= password name pwd > <input id= embox type=" " name=" > <textarea></textarea> meer dan 1 lijn invoer <option> value= infoterm infoterm is dbase afhankelijk selected of 1 voorgeselecteerde waarde Nieuwe attributen Check eerst welke browsers ze ondersteunen praktijkopdracht Ofwel: formulier van je eindwerk Ofwel: reservatieformulier voor hotel 1. Welke data heb je nodig? 2. Hoe vorm geven, opmaken? Hotel-reservatieform ontwerpen Bevat Voornaam,Achternaam*, *, Straat & nr, Postcode, Gemeente,Telefoon* Opmerkingen / vragen Aankomst :(Voorziene datum aankomst dd/mm/jj) Nachten : ( Aantal overnachtingen ). Personen : ( Aantal personen ). Keuze uit : Kamer(s) : [A] Kamer(s) 1 Personen aantal Kamer(s) [B] Kamer(s) 2 Personen aantal Kamer(s) [C] Kamer(s) 3 4 Personen aantal Kamer(s) [D] Suite 2 Personen Opties :Babybedje (0-3 jr) Kinderbed (3-12jr) Parking