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

Webtechnologie Labo 1 Inhoud Forms Waarvoor? Hoe? Structuur Verwerking

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

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?

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

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

Webtechnologie Labo 1 Soorten velden tekstvelden keuzerondjes aankruisvakjes

Webtechnologie Labo 1 Soorten velden knoppen tekstvakken keuzelijsten

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Webtechnologie Labo 1 Value, type, size, … Opgelet: correct gebruiken van attributen! 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"

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

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

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

Webtechnologie Labo 1 A-Oefening 6 Enquete

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

Webtechnologie Labo 1 Verwerking van gegevens Doorsturen naar adres: wordt ondersteund door IE4+, NN2+ werkt alleen goed als de surfer naast de browser ook de bijhorende client gebruikt. Werkt niet goed, beter is gegevens doorsturen naar een CGI-script

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

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

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 !!

Webtechnologie Labo 1 form action="..." MOET altijd worden toegevoegd mailto: subject kan ook toegevoegd worden verwijzing naar cgi-script

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

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

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

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

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)?

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

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

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

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

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

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

Webtechnologie Labo 1 Frameset: basiscode titel

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

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

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

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)

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

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

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

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: Deze links moeten openen in een volledig nieuw venster!

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

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

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, …

Webtechnologie Labo 1 Einde les 6