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
Als gebruiker of als professioneel websitebouwer
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 (123.123.123.123) 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 Methode uitwerking GET Informatie aan de URL vastplakken (max 256 karakters): http://www.google.nl/search?q=vraag POST Informatie wordt onderwater meegestuurd. Bijvoorbeeld in een formulier
2
Basis tag voor een formulier Front-end development XHTML CSS
2
User input (tekstvelden) Front-end development XHTML
Gebruik van de label tag helpt aan te geven bij welk input veld de tekst hoort. Als je er op klikt wordt het inputveld met het bijbehordende id geactiveerd De name is de naam van de variabele zoals die verstuurd wordt naar de server
2
User input (wachtwoordveld) Front-end development XHTML
Wat is verschil met type=“text” ?
2
User input (radiobuttons) Front-end development XHTML
Wanneer gebruik je radiobuttons? Label mag ook om het input veld heen staan Beide radiobuttons hebben dezelfde name maar een andere value Wat gebruik je als je wel meerdere mag kiezen?
2
User input (checkboxen) Front-end development XHTML
Mijn hobbies zijn:
Wanneer gebruik je checkboxen? Label mag ook om het input veld heen staan De checkboxen hebben dezelfde name maar een andere value Welke variabele wordt verstuurd als er meerdere zijn aangekruisd? Wat gebeurt er als je op enter drukt?
2
Buttons (submit) Front-end development XHTML
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) Front-end development XHTML CSS
label{ font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; } input.tekstveld{ border: 1px solid #000000; background-color: #dddddd; padding: 2px; }
Als je met CSS vormgeeft verdwijnt de merkwaardige default vormgeving. Opdat alles dezelfde tag heeft moet je wel gebruik maken van classes
2
User input (textarea) Front-end development XHTML
Voor sommige user input gebruik je geen input element !? Soort tekstveld met meerdere regels. Toch aparte tag – geen input (terwijl overeenkomst met type=“text” groter dan tussen type=“text” en bijvoorbeeld type=“radio” of type=“checkbox”). Raar maar waar: rows en cols zijn verplicht (ongeveer aantal letters breed, regels hoog)
2
User input (selectbox) Front-end development XHTML
Voor sommige user input gebruik je geen input element !? Wat is de value die wordt verstuurd?
2
Meer structuur: fieldset & legend Front-end development XHTML
2
Lesopdracht 2 Front-end development Maak dit formulier zo goed mogelijk na (met de voorbeelden uit het boek)
Comments