Post on 14-Jun-2015
Webtechnologie 1 laboWebtechnologie 1 labo
Dieter RoobrouckDieter Roobrouck
Kristel BalcaenKristel Balcaen
Claudia EeckhoutClaudia Eeckhout
Koen De WeggheleireKoen De Weggheleire
Frederik DuchiFrederik Duchi
An DeraedtAn Deraedt
Les 6: Forms en FramesLes 6: Forms en Frames
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Inhoud Forms
Waarvoor?Hoe?
StructuurVerwerking
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Waarvoor gebruiken?
Bezoekers van de site de mogelijkheid bieden om informatie in te voeren en te versturen.geven van een reactieaanmelden als abonnee invullen van enquêteplaatsen van bestellingbeantwoorden van vragen
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Formulieren: hoe?
2 aspecten: structuur van formulier
gebruik van <form></form> en veldenOok alle andere tags mogenuitz: geen forms nesten!
verwerking van gegevens (form handler):
Hoe wordt formulier verstuurd?Waar moet formulier naartoe?
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Formulieren: hoe?
formulieren worden begrensd door <form>
<form method="post"_action="bestemming">
<!-- inhoud van het formulier -->
<!– tags --><!– velden -->
</form>
Attributen bij form: zie verder
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Formulieren: structuurelementen
form-element input-element button-element textarea-element select-element
option-element optgrouplabel-element fieldset-element
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Soorten velden
tekstvelden
keuzerondjesaankruisvakjes
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Soorten velden
knoppentekstvakken
keuzelijsten
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
type veld
grootte veld
tekst die in het veld staat
Input type="text"
Tekstvelden<input type="text" name="veldnaam" size="20" maxlength="30“ value="inhoud veld“ />
veldnaam
maximaal aantal
karakters
Enkel bij type="text"
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Input type="password"
<input type="password" name="paswoord" size="8" />
ingetypte tekst wordt gemaskeerd weergegeven
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Label
<label for="vrnm"> Voornaam</label><input type="text" name="voornaam" id="vrnm" />
label-element (<> label-attribuut van optgroup-element!) = tekst (gebruikelijk enkele woorden) die met een tekstveld, checkbox of radioknop kan worden geassocieerd.
Zoals label in prog1
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
A-Oefening1
Maak het volgende eenvoudige formulier, zonder tabel en met labels
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
B-oefening 1
Maak het volgende formulier na:Gebruik geen tabellenGebruik labels
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Input type="radio" Een lijst opgeven waaruit er 1 keuze kan
gemaakt worden (radio buttons) Voorbeeld:
<input type="radio" name="browser"name="browser" value="NN"/>Netscape Navigator<br /><input type="radio" name="browser"name="browser" value="MSIE” checked=“checked” />Explorer
name-attribuut groepeert samenhorende radio buttons
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
A-OEFENING 2
Maak deze kennistest na:
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
B-OEFENING 2
Maak deze kwisvraag na:
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Input type="submit" & "reset"
<input type="submit" value="Verzend bericht" name="verzend" />
<input type="reset" value="Wis bericht" name="wis" />
Het value-attribuut bepaalt de tekst die op de knoppen te lezen staat
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Andere inputvelden
<input type="hidden" name="paswoord" />onzichtbaar veld, inhoud wordt wel mee
verzonden <input type="file" name="bestand"
accept=""/>mogelijkheid om een file mee te sturen. <form enctype="multipart/form-data”>
<input type="image" src="knop.gif" name="knop" alt="submit" /> image als submit-knop
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Button
Ipv input: ook gebruik van button: in container kan je content plaatsen
<button type="submit" value="Verzend bericht">tekst</button>
<button type="reset" value=“Wis bericht">tekst</button>
Push button: geen default actiembv scripting (cf sem2) wordt actie bepaald
<button type="button" value=“actie“ name=“knop”>tekst</button>
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
A-Oefening 3
Maak dit voorbeeld naGebruik A-Oefening1.htmZorg dat de waarde Username
standaard is ingesteldDe Vraag knop is een submitknop
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Input type="checkbox"
Checkboxes worden gebruikt wanneer de bezoeker meerdere mogelijkheden tegelijk kan kiezen<input type="checkbox" name="fruit" value="appel" />appels<input type="checkbox" name="fruit" value="peer" />peren
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Textarea
Onbeperkte hoeveelheid tekst invoeren.<textarea name="commentaar" rows="4" cols="50"> hier komt de tekst </textarea>
Attributen: readonly="readonly"disabled="disabled"
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
A-OEFENING 4
Gebruik externe cssGeen tabellen!!giraffe-peek.jpg
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Select & Option (dropdownlist)
<select name="browser"><option value="nn">Netscape</option><option value="ie">Explorer</option><option value="op">Opera</option><option value="an">Andere</option>
</select>
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Select & Option (keuzelijst)
Extra attributen select:size="4": bepaalt hoeveel keuzes
tegelijk zichtbaar zijnmultiple="multiple": bepaalt aantal
mogelijke keuzes (ctrl-klik voor meerdere keuzes)
Extra attributen option:value="waarde": waarde die naar de
server zal gestuurd wordenselected="selected": keuze die
als standaard zal getoond worden
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Optgroup Veel keuzes? Maak gebruik van
<optgroup></optgroup> Het attribuut label groepeert<select>
<optgroup label="Swedish Cars"><option value ="volvo">Volvo</option><option value ="saab">Saab</option>
</optgroup><optgroup label="German Cars">
<option value ="mercedes">Mercedes</option><option value ="audi">Audi</option>
</optgroup></select>
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Value, type, size, …
Opgelet: correct gebruiken van attributen! http://www.w3schools.com/tags/tag_input.asp
Input type=“button”: value=tekst op de button.
Checkboxes and radio buttons: wat wordt doorgestuurd naar action URL.Verplicht gebruik bij type="checkbox" and type="radio
Hidden, password, text fields: = default value van het element.
Kan niet worden gebruikt bij type="file"
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
A-Oefening 5
Maak de volgende keuzelijst op 2 manieren:
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Fieldset
Kan gebruikt worden om een aantal controls van een formulier te groeperen door er een kader om te plaatsen.
<fieldset>Height <input type="text" size="3" />Weight <input type="text" size="3 " />
</fieldset>
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Legend
Plaatst een bijschrift bij het fieldset-element
<fieldset><legend>Health information:</legend> Height <input type="text" size="3“ />Weight <input type="text" size="3“ />
</fieldset>
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
A-Oefening 6
Enquete
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Verwerking van gegevens
Gegevens worden doorgestuurd als 1 lange lijn gegevens met scheidingstekens
Gegevens moeten opgesplitst worden tot leesbaar geheel
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Verwerking van gegevens
Doorsturen naar e-mailadres: wordt ondersteund door IE4+, NN2+werkt alleen goed als de surfer naast
de browser ook de bijhorende emailclient gebruikt.
Werkt niet goed, beter is gegevens doorsturen naar een CGI-script
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Verwerking van formgegevens
<form> attributen:
methodget post
action (moet altijd worden toegevoegd!)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
form method=“get"
Gegevens worden aan adres gekleefd en in 1 keer doorgestuurd
Alleen ASCII-karakters toegelaten dus geen é of ï
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
form method=“post"
Alle info wordt uit het formulier opgenomen en verzonden naar adres bij action-attribuut
Ook non ascii-karakters toegelatenTe gebruiken bij action=mailto:...
Beste methode !!
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
form action="..."
MOET altijd worden toegevoegd
mailto: naam@provider.extsubject kan ook toegevoegd wordennaam@provider.ext?
subject=onderwerp]
http://www.provider.be/cgi-bin/form.cgiverwijzing naar cgi-script
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Frames
Inleiding Wat zijn frames? Document type definitions (DTD)
Hoe maak ik frames? Eenvoudige Frames Eigenschappen van frameset Eigenschappen van frames
Extra Hyperlinks en frames Noframes Complexe frames
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Wat?
Documentvenster opdelen in meerdere vensters
In elk venster wordt een aparte xhtml-pagina opgeladen
xHTML-pagina’s kunnen onafhankelijk van elkaar vervangen worden
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
xHTML frameset (herhaling)
xHTML1.0 Frameset DTD Bevat alle elementen uit transitional +
frames elementen Gebruik deze DTD als je je browser
window wil opdelen in meerdere deelvensters
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Hoe?
Benodigde xHTML-pagina’s:1 frameset - pagina die de frames
opdeelt1 inhoud-pagina per venster
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Klassikale oefening
Hoeveel xhtml-pagina’s zijn er nodig voor de volgende frame-structuren?
Hoeveel van deze pagina's zijn er normale xhtml-pagina's (= inhoud van een frame) en hoeveel hebben een afwijkende structuur (= frameset-pagina's)?
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Frame-inhoud
De pagina's met de frame-inhoud zijn normale xhtml-pagina's
Browser: rechts klikken in een frame / view source (bron weergeven) voor de xhtml-code van de pagina in de frame
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Frameset-pagina
Frameset ipv body
<html> <head> </head>
<body> </body>
</html>
<html> <head> </head>
<frameset> </frameset>
</html>
normale xhtml-pagina frameset-pagina
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Frameset eigenschappen
<frameset> </frameset>
Basis attributen:aantal rijen (rows)aantal kolommen (cols) id, class, title, style
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Frameset: rijen
<frameset rows="... , ... , ...">Aantal waarden = aantal rijenMogelijke waarden:
pixelwaardepercentagewildcard *
vb:<frameset rows="15%, * ,15%"><frameset rows="200, * ">
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Frameset: kolommen
<frameset cols="... , ... , ...">Aantal waarden = aantal rijenMogelijke waarden:
pixelwaardepercentagewildcard *
vb:<frameset cols="15%, * ,15%"><frameset cols ="200, * ">
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Frameset met frames
Binnen een <frameset> worden de verschillende vensters gedefinieerd met de <frame> tag
<frame>: minstens volgende attribuut:src: bronbestand dat in die frame moet
geladen worden
<frame src="inhouda.htm" /><frame src="inhoudb.htm" />
A B
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Frameset: basiscode
<html><head>
<title>titel</title></head><frameset cols="20%,80%">
<frame src="links.htm" /><frame src="rechts.htm" />
</frameset></html>
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
A-oefening 7
Experimenteer met A-oefening7.htm Verander de broncode in het tekstveld Experimenteer met afmetingen van
frames, aantal frames vermeerderen en verminderen, onlogische opdrachten (vb: cols="15%, 20%, 25%"), enz.
Gebruik om de frames op te vullen de bestanden frame_a.htm t/m frame_e.htm
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
A-oefening 8
Maak de opmaak van volgende pagina na, gebruikmakend van frames en van afbeelding goodprice.gif
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
frame: attributen
name="..." id="..." beide samen gebruiken: unieke naam geven aan een frame zodat je die kan addresseren
class="..."style="..."
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
frame: attributen
noresize="noresize" balk tussen frames is vast
scrolling="..." schuifbalken "yes" = schuifbalken altijd weergegeven"no"= geen schuifbalken"auto" = browser kiest
longdesc="..." URL waar een samenvatting staat van de inhoud van de frames (voor browsers die geen frames ondersteunen)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Hyperlinks en frames: Een hyperlinkdocument wordt geopend in het
frame waarin de hyperlink staat. Transitional DTD only
Anders: Voeg attribuut target toe aan <a> met als
waarde de naam van een frame Definieer de naam van een frame met het
attribuut name van <frame> of gebruik voorgedefinieerde namen:
"_blank” : nieuwe venster "_parent”: frameset vervangen door link "_top” : volledige venster"_self”: in het frame van de hyperlink zelf
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Hyperlinks en frames:<html><head>
<title>Voorbeeld frames</title></head><frameset rows="120,*">
<frame src="frame1.htm” name="inhoudframe“ /><frame src ="frame2.htm" name ="hoofdframe“ />
</frameset ></html>
In frame1.htm zijn de hyperlinks bv als volgt opgenomen:<a href="frame3.htm” target="hoofdframe">voorbeeld
a</a><a href="frame4.htm” target="hoofdframe">voorbeeld
b</a>
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Hyperlinks en frames:
Transitional DTD onlyBij gebruik van veel hyperlinks:
Plaats <base target=“waarde” /> in de <head>- sectie van het te laden htm document.
target bepaalt hier het frame waar alle hyperlinksdocumenten geopend moeten worden.
Voor uitzonderingen gebruik je in <a> het target attribuut
<html><head> <title>Voorbeeld frames</title> <base target="onder“ /></head><body>
<body>
</html>
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
A-oefening 9 Valid enkel in TRANSITIONAL DTD (voor subpagina’s)
Vul de webpagina van A-oefening 2 aan met de volgende hyperlinks: http://www.delta.com http://www.virginexpress.com http://www.iberia.com
Deze links moeten openen in een volledig nieuw venster!
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Noframes
Niet alle browsers ondersteunen frames!Gebruik <noframes> in één van de
framesets. De door <noframes> ingesloten inhoud
is alleen zichtbaar in browsers die geen frames ondersteunen.
Gebruik <body> binnen het noframes-gedeelte om de kleur van achtergrond, de tekst en de hyperlinks van de inhoud van <noframes> te bepalen
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Complexe frames
Systematisch te werk gaan! Maak eerst het gehele venster door
deze ofwel verticaal in rijen, ofwel horizontaal in kolommen te verdelen
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Framesets maken
Gebruik slechts 1 FrameDefinitionFile
Laadt in 1 pagina ALLE frames in ipv 1 pagina met 2 frames met in elk frame een pagina met 2 frames, …
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
Einde les 6