Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Presentatie over: "Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames."— Transcript van de presentatie:

1 Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames

2 Webtechnologie Labo 1 Inhoud Forms Waarvoor? Hoe? Structuur Verwerking

3 Webtechnologie Labo 1 Waarvoor gebruiken? Bezoekers van de site de mogelijkheid bieden om informatie in te voeren en te versturen. geven van een reactie aanmelden als abonnee invullen van enquête plaatsen van bestelling beantwoorden van vragen

4 Webtechnologie Labo 1 Formulieren: hoe? 2 aspecten: structuur van formulier gebruik van en velden Ook alle andere tags mogen uitz: geen forms nesten! verwerking van gegevens (form handler): Hoe wordt formulier verstuurd? Waar moet formulier naartoe?

5 Webtechnologie Labo 1 Formulieren: hoe? formulieren worden begrensd door Attributen bij form: zie verder

6 Webtechnologie Labo 1 Formulieren: structuurelementen form-element input-element button-element textarea-element select-element option-element optgroup label-element fieldset-element

7 Webtechnologie Labo 1 Soorten velden tekstvelden keuzerondjes aankruisvakjes

8 Webtechnologie Labo 1 Soorten velden knoppen tekstvakken keuzelijsten

9 Webtechnologie Labo 1 type veldgrootte veld tekst die in het veld staat Input type="text" Tekstvelden veldnaam maximaal aantal karakters Enkel bij type="text"

10 Webtechnologie Labo 1 Input type="password" ingetypte tekst wordt gemaskeerd weergegeven

11 Webtechnologie Labo 1 Label Voornaam 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

12 Webtechnologie Labo 1 A-Oefening1 Maak het volgende eenvoudige formulier, zonder tabel en met labels

13 Webtechnologie Labo 1 B-oefening 1 Maak het volgende formulier na: Gebruik geen tabellen Gebruik labels

14 Webtechnologie Labo 1 Input type="radio" Een lijst opgeven waaruit er 1 keuze kan gemaakt worden (radio buttons) Voorbeeld: name="browser" Netscape Navigator name="browser" Explorer name-attribuut groepeert samenhorende radio buttons

15 Webtechnologie Labo 1 A-OEFENING 2 Maak deze kennistest na:

16 Webtechnologie Labo 1 B-OEFENING 2 Maak deze kwisvraag na:

17 Webtechnologie Labo 1 Input type="submit" & "reset" Het value-attribuut bepaalt de tekst die op de knoppen te lezen staat

18 Webtechnologie Labo 1 Andere inputvelden onzichtbaar veld, inhoud wordt wel mee verzonden mogelijkheid om een file mee te sturen. image als submit-knop

19 Webtechnologie Labo 1 Button Ipv input: ook gebruik van button: in container kan je content plaatsen tekst Push button: geen default actie mbv scripting (cf sem2) wordt actie bepaald tekst

20 Webtechnologie Labo 1 A-Oefening 3 Maak dit voorbeeld na Gebruik A-Oefening1.htm Zorg dat de waarde Username standaard is ingesteld De Vraag knop is een submitknop

21 Webtechnologie Labo 1 Input type="checkbox" Checkboxes worden gebruikt wanneer de bezoeker meerdere mogelijkheden tegelijk kan kiezen appels peren

22 Webtechnologie Labo 1 Textarea Onbeperkte hoeveelheid tekst invoeren. hier komt de tekst Attributen: readonly="readonly" disabled="disabled"

23 Webtechnologie Labo 1 A-OEFENING 4 Gebruik externe css Geen tabellen!! giraffe-peek.jpg

24 Webtechnologie Labo 1 Select & Option (dropdownlist) Netscape Explorer Opera Andere

25 Webtechnologie Labo 1 Select & Option (keuzelijst) Extra attributen select: size="4": bepaalt hoeveel keuzes tegelijk zichtbaar zijn multiple="multiple": bepaalt aantal mogelijke keuzes (ctrl-klik voor meerdere keuzes) Extra attributen option: value="waarde": waarde die naar de server zal gestuurd worden selected="selected": keuze die als standaard zal getoond worden

26 Webtechnologie Labo 1 Optgroup Veel keuzes? Maak gebruik van Het attribuut label groepeert Volvo Saab Mercedes Audi

27 Webtechnologie Labo 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"

28 Webtechnologie Labo 1 A-Oefening 5 Maak de volgende keuzelijst op 2 manieren:

29 Webtechnologie Labo 1 Fieldset Kan gebruikt worden om een aantal controls van een formulier te groeperen door er een kader om te plaatsen. Height Weight

30 Webtechnologie Labo 1 Legend Plaatst een bijschrift bij het fieldset- element Health information: Height Weight

31 Webtechnologie Labo 1 A-Oefening 6 Enquete

32 Webtechnologie Labo 1 Verwerking van gegevens Gegevens worden doorgestuurd als 1 lange lijn gegevens met scheidingstekens Gegevens moeten opgesplitst worden tot leesbaar geheel

33 Webtechnologie Labo 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

34 Webtechnologie Labo 1 Verwerking van formgegevens attributen: method get post action (moet altijd worden toegevoegd!)

35 Webtechnologie Labo 1 form method=“get" Gegevens worden aan adres gekleefd en in 1 keer doorgestuurd Alleen ASCII-karakters toegelaten dus geen é of ï

36 Webtechnologie Labo 1 form method=“post" Alle info wordt uit het formulier opgenomen en verzonden naar adres bij action-attribuut Ook non ascii-karakters toegelaten Te gebruiken bij action=mailto:...mailto:... Beste methode !!

37 Webtechnologie Labo 1 form action="..." MOET altijd worden toegevoegd mailto: naam@provider.ext subject kan ook toegevoegd worden naam@provider.ext?subject=onderwerp] http://www.provider.be/cgi-bin/form.cgi verwijzing naar cgi-script

38 Webtechnologie Labo 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

39 Webtechnologie Labo 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

40 Webtechnologie Labo 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

41 Webtechnologie Labo 1 Hoe? Benodigde xHTML-pagina’s: 1 frameset - pagina die de frames opdeelt 1 inhoud-pagina per venster

42 Webtechnologie Labo 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)?

43 Webtechnologie Labo 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

44 Webtechnologie Labo 1 Frameset-pagina Frameset ipv body normale xhtml-paginaframeset-pagina

45 Webtechnologie Labo 1 Frameset eigenschappen Basis attributen: aantal rijen (rows) aantal kolommen (cols) id, class, title, style

46 Webtechnologie Labo 1 Frameset: rijen Aantal waarden = aantal rijen Mogelijke waarden: pixelwaarde percentage wildcard * vb:

47 Webtechnologie Labo 1 Frameset: kolommen Aantal waarden = aantal rijen Mogelijke waarden: pixelwaarde percentage wildcard * vb:

48 Webtechnologie Labo 1 Frameset met frames Binnen een worden de verschillende vensters gedefinieerd met de tag : minstens volgende attribuut: src: bronbestand dat in die frame moet geladen worden AB

49 Webtechnologie Labo 1 Frameset: basiscode titel

50 Webtechnologie Labo 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

51 Webtechnologie Labo 1 A-oefening 8 Maak de opmaak van volgende pagina na, gebruikmakend van frames en van afbeelding goodprice.gif

52 Webtechnologie Labo 1 frame: attributen name="..." id="..." beide samen gebruiken: unieke naam geven aan een frame zodat je die kan addresseren class="..." style="..."

53 Webtechnologie Labo 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)

54 Webtechnologie Labo 1 Hyperlinks en frames: Een hyperlinkdocument wordt geopend in het frame waarin de hyperlink staat. Transitional DTD only Anders: Voeg attribuut target toe aan met als waarde de naam van een frame Definieer de naam van een frame met het attribuut name van of gebruik voorgedefinieerde namen: "_blank” : nieuwe venster "_parent”: frameset vervangen door link "_top” : volledige venster "_self”: in het frame van de hyperlink zelf

55 Webtechnologie Labo 1 Hyperlinks en frames: Voorbeeld frames In frame1.htm zijn de hyperlinks bv als volgt opgenomen: voorbeeld a voorbeeld b

56 Webtechnologie Labo 1 Hyperlinks en frames: Transitional DTD only Bij gebruik van veel hyperlinks: Plaats in de - sectie van het te laden htm document. target bepaalt hier het frame waar alle hyperlinksdocumenten geopend moeten worden. Voor uitzonderingen gebruik je in het target attribuut Voorbeeld frames

57 Webtechnologie Labo 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!

58 Webtechnologie Labo 1 Noframes Niet alle browsers ondersteunen frames! Gebruik in één van de framesets. De door ingesloten inhoud is alleen zichtbaar in browsers die geen frames ondersteunen. Gebruik binnen het noframes- gedeelte om de kleur van achtergrond, de tekst en de hyperlinks van de inhoud van te bepalen

59 Webtechnologie Labo 1 Complexe frames Systematisch te werk gaan! Maak eerst het gehele venster door deze ofwel verticaal in rijen, ofwel horizontaal in kolommen te verdelen

60 Webtechnologie Labo 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, …

61 Webtechnologie Labo 1 Einde les 6