1 Les 08: Formulieren

2 Agenda van vandaag Front-end development  Toets Hoofdstuk 8  Bespreken huiswerk  Presentatie over lesstof  formulieren  de Cascade  accessibility

2 Waarvoor gebruik je een formulier? Front-end development

2 Wat gebeurt er als je op het web een bestand opvraagt? een xhtml-pagina, een css- of javascript-bestand of een plaatje (gif, jpg of png) Front-end development

2 Request – response model : Front-end development Request: Webserver, mag ik van jou het document ‘bladzijde.html’ ? Stuur je antwoord terug naar mij ( ) ev. andere informatie van de gebruiker voor de server Response: Hier heb je het gevraagde document (xHMTL, CSS, JavaScript, plaatje, etc)

2 Request – response model : Front-end development

2 2 manieren om bij het Request informatie van de gebruiker naar de server mee te sturen: Front-end development Methodeuitwerking GETInformatie aan de URL vastplakken (max 256 karakters): POSTInformatie wordt onderwater meegestuurd. Bijvoorbeeld in een formulier

2 Basis tag voor een formulier Front-end development XHTMLCSS

2 User input (tekstvelden)tekstvelden Front-end development XHTML Naam:

2 User input (wachtwoordveld)wachtwoordveld Front-end development XHTML Wachtwoord:

2 User input (radiobuttons)radiobuttons Front-end development XHTML dhr. mevr.

2 User input (checkboxen)checkboxen Front-end development XHTML Mijn hobbies zijn: <input type="checkbox" name="hobbie” value="sporten” id="ck_sport" />sporten <input type="checkbox" name="hobbie" value="gamen” id="ck_game" />gamen <input type="checkbox" name="hobbie" value="uitgaan" id="ck_uit" />uit gaan

2 Buttons (submit) Front-end development XHTML Verstuur

2 Lesopdracht 1: Front-end development Maak dit formulier na

2 Hoe zou je dit vormgeven? Hoe maak je het tekstveld minder lelijk? Front-end development

2 User input vormgeven (tekstvelden)tekstvelden Front-end development XHTMLCSS Naam: <input type="text" name=”name" class=“tekstveld” id="naamveld" /> lab el{ font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; } input.tekstveld{ border: 1px solid #000000; background-color: #dddddd; padding: 2px; }

2 User input (textarea)textarea Front-end development XHTML Schrijf een kort stukje over jezelf: Ik ben heel...

2 User input (selectbox)selectbox Front-end development XHTML Ik woon in: Rotterdam Spijkernisse Capelle aan de IJssel Schiedam

2 Meer structuur: fieldset & legend Front-end development XHTML Adres

2 Lesopdracht 2 Front-end development Maak dit formulier zo goed mogelijk na (met de voorbeelden uit het boek)

2 Cascade = overlappen (Css) Front-end development

2 Cascade (bron: web style guide)web style guide Front-end development

2 Welke stijldefinitie telt? (bron: W3C)W3C Front-end development 1.Vaak zijn er meerdere stijldefinities op het zelfde element van toepassing: 2.Welke stijldefinitie (van wie) is het belangrijkst? 1.Browser default 2.Gebruikersinstellingen (in browser) 3.Style sheet van de web designer 4.!important in style sheet web designer 5.!important in gebruikersinstellingen 3.(Als 2 geen uitkomst biedt) (twee overlappende definities van de webdesigner) telt de specifiekste: 1.Element definitie ( p{…} ) 2.class definitie (.inleiding{…} ) 3.id definitie ( #ditElement{…} ) 4.(Als 3 geen uitkomst biedt) telt de laatst gedefinieerde 1.ge t of CSS-bestand 2. tag in head 3.style= attribuut in body

2 Accessibility Front-end development WAI SEO

2 Volgende week:  Tentamen Front-end development Huiswerk voor week 9:  (ev. achterstallige opdrachten verbeteren (50% cijfer))  oefenen  oefenen (oefententamen)