Labora&on 8 Formulär övningar/uppgi6er

Transkript

1 Labora&on 8 Formulär övningar/uppgi6er 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se

2 1a. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det en par dokument som du kan ladda ner i en zip- fil. Länk &ll zip- filen finns på labora&onens webbsida. Då du packat upp zip- filen, får du en mapp med en HTML- fil och en CSS- fil. Du arbetar sedan vidare med dessa filer i övningarna.

3 1b. Vad ska skapas? I övningarna kommer du skapa en formulär för en rumsförfrågan på en presum&vt pensionat. Slutresultatet kommer se ut på följande sän.

4 2. Skapa strukturen för en formulär Du ska nu stegvis bygga upp en formulär i filen booking.htm och med s&l i style.css. Lägg in e( form- element Börja med an skapa en formulär genom an lägga in en start- och slunagg för form under h3- rubriken i main. I form- taggen lägger du in en id- anribut med namnet "booking". Några andra anribut behövs inte just nu. Strukturera formuläret i olika avdelningar I formuläret lägger du in fyra fieldset- element. I start- taggen för varje fieldset lägger du också in en id- anribut, så an det sedan går an referera &ll var och en av dem i CSS- koden. Använd namnen "room", "date", "extra" och "customer" i id- anributet. I varje fieldset lägger du också in en legend- element med lämplig rubrik, enligt bilden &ll höger. Submit- knapp Under den sista fieldset lägger du in en p- element och i det en input- tagg med typen "submit". I p- element lägger du också in en id- anribut med namnet "submitbtn". Grunds:l för formuläret I CSS- filen lägger du in en s&l för #booking, dvs en referens &ll formuläret. I s&len ger du formuläret en padding på 20px. Lägg sedan &ll en s&l för #booking fieldset, där du lägger in en ljusgrå bakgrundsfärg (t.ex. #EEE eller annan valfri färg). SäN också margin- bo@om &ll 20px, för an få en litet avstånd mellan de olika fieldset. Lägg också &ll en s&l för #booking legend, där du gör texten kursiv och fets&l. Lägg in en s&l för #submitbtn, där du högerjusterar texten (dvs det blir knappen som hamnar &ll höger).

5 3a. Objekt för val av rum Nu ska du lägga &ll de objekt som ska finnas i det första fältet för val av rum. Radioknappar för val av rum I den första fieldset lägger du in tre input- taggar för radioknappar (radio). Använd samma namn (t.ex. "room") i name- anributen, för an koppla ihop knapparna. I den första input- taggen lägger du in en checked- anribut, så an den knappen är vald. Lägg också in value- anribut med lämpligt innehåll (t.ex. "enkelrum", etc.). Då formuläret skickas är det namnet i name- anributet och innehållet i value- anributet som skickas. Lägg en br- tagg e6er texten för varje knapp, så an knapparna hamnar under varandra. Testa i webbläsaren Klicka på knapparna, för an kontrollera an de hör ihop, så an endast en av dem kan vara vald. Observera an du måste klicka på den runda cirkeln. Gör så a( man även kan klicka på texten, för a( välja knappen Omge varje input- tagg och dess text med en label- element. Testa i webbläsaren Kontrollera an man nu även kan klicka på texten för an välja en knapp. S:l för raderna I CSS- filen lägger du &ll en s&l för #room label, där du säner line- height &ll 2em, så det blir lite större avstånd mellan raderna.

6 3b. Fler objekt för val av rum I den första fieldset ska du även ha en meny, där man anger antal personer för familjerum. Meny för antal personer Lägg in en select- element med fyra opbon- element. Texten ska vara 3, 4, 5 och 6. Lägg även in en name- anribut med namnet "persons" i select- elementet samt en value- anribut med siffrorna i var och en av op&on- elementen. Det är namnet från select och värdet från vald opbon som skickas, då man skickar iväg formuläret. Lägg in en text före och e6er select- elementet, enligt bilden nedan. Omge hela menyn (dvs både select- elementet och &llhörande text) med en label- element. Om du har en br- tagg e6er den sista radioknappen, tar du bort br där, så menyn hamnar på samma rad som den sista radioknappen.

7 4a. Objekt för datum och antal näner Nu ska du lägga in en fält för ankomstdatum och en meny för antal näner. DeNa ska ligga i det andra fieldset- elementet. Fält för ankomstdatum Lägg &ll en text och en input- tagg av typen "date". I taggen lägger du också in en name- anribut med texten "arrivaldate". Omge texten och input- taggen med en label- element. Testa i webbläsaren. Firefox I den nuvarande versionen (41, då dena skrivs) fungerar input- taggen som en texgält. Det går då skriva vad som helst i fältet. Chrome I denna webbläsare finns det stöd för "date"- typen och man kan få fram en kalender där man väljer datum.

8 4b. Fler objekt för datum och antal näner Det ska också finnas en meny för an välja hur länge man vill stanna. Meny för antal nä(er Lägg in en select- element och åna opbon- element. Texten i opbon- elementen ska vara 1, 2, 3, 4, 5, 6, 1 vecka och 2 veckor. I value- anributen lägger du in värdena 1, 2, 3, 4, 5, 6, 7 och 14, så det blir antal dagar. Omge menyn och &llhörande text med en label- element. CSS- s:l Du har nu ingen br- tagg mellan de båda objekten i denna fieldset, så de hamnar på samma rad. I CSS- koden lägger du &ll en s&l för #date label och ger margin- right en värde på 30px, så an det blir en litet avstånd mellan de båda objekten.

9 5. Objekt för &llägg I fieldset för &llägg ska det finnas några kryssrutor för an välja vilka &llägg man önskar. Kryssrutor för :llägg Lägg in tre input- taggar för kryssrutor (checkbox) för val av Internet, parkering och sjöutsikt. Använd samma namn ("addibon") i name- anributet i alla tre input- taggarna. Lägg in lämpliga texter i value- anributet, t.ex. de texter som angavs ovan. Omge varje input- tagg och &llhörande text med en label- element. Lägg in en br- tagg e6er varje label- element, så an kryssrutorna hamnar på varsin rad. Lägg också in en p- element med texten enligt figur nedan, under kryssrutorna. CSS- s:l I CSS- s&len ska vi ha en större radhöjd, så det blir lite mellanrum mellan kryssrutornas rader. DeNa är exakt samma s&l som används i avdelningen för val av rum. I s&len för #room label, lägger du &ll #extra label, så an samma s&l gäller för båda.

10 6a. Texgält för data om kunden Nu ska du lägga &ll texgält i den sista fieldset, för kunden. TexHälten Lägg in sex input- taggar av typen "text" för namn, gatuadress, postnummer, ort, telefon och e- post. Lägg in både name- och id- anribut med samma namn i input- taggarna, men olika namn för var och en av dem. Använd förslagsvis "name", "street", "zipcode", "city", "telephone" och " ". Name- anributet är det som skickas &llsammans med det som skrivs i texgältet, då formuläret skickas. Id- anributet ska användas för an koppla ihop label- elementen med input- elementen. I alla input- taggar, utom den för postnummer, lägger du in en size- anribut med värdet 40. DeNa gör texgälten lite större, så an även långa namn får plats. I input- taggen för postnummer lägger du in en size- anribut med värdet 5. Lägg där också in en maxlength- anribut med värdet 5. Med maxlength begränsas det hur många tecken som kan skrivas i texgältet. E:ke(er I dena fall ska label- elementen läggas in på en annat sän än i de andra övningarna, för an vi sedan med CSS ska kunna skapa en kolumn med label- texterna och en kolumn med input- taggarna. Före varje input- tagg lägger du in en label- element med texten som ska vara &tel för texgältet. I label- elementet lägger du in en for- anribut med samma namn som du har i id- anributet i motsvarande input- tagg. På så sän kopplas label och input samman.

11 6b. S&l för texgälten för data om kunden Nu ska du med CSS- koden se &ll an alla e&kener och texgält hamnar i varsin kolumn. CSS- s&l Lägg in en s&l för #customer label och skriv följande CSS- kod i s&len: float:leo; width:100px; text- align:leo; margin- top:8px; Label hamnar då &ll vänster, bredden blir 100px, texten vänsterjusteras och det blir en avstånd på 8px mellan raderna. Lägg också in en s&l för #customer input med följande CSS- kod: display:block; margin- top:8px; Varje input- tagg blir en eget block och mellanrummet mellan raderna säns &ll detsamma som för label- elementen.

12 7. Obligatoriska fält I formulär är o6ast några fält obligatoriska an fylla i, innan formuläret kan skickas. O6a brukar det vara en kontroll av an fälten inte lämnas tomma och an de har innehåll på rän form. DeNa för an man ska slippa få data, som är ofullständig och därför inte kan behandlas. Denna kontroll sköts o6a av JavaScript- kod på klientsidan och annat program (t.ex. i PHP) på serversidan. I HTML5 har det &llkommit en del kontroll som sköts av webbläsaren, dels beroende på vilken type som angens i input- taggarna och dels genom required- anributet. Det som nu är implementerat i webbläsarna är ingen perfekt kontroll, så det behövs forgarande program som som gör kontrollen, men du ska nu testa det som finns i HTML5 och se vilka möjligheter och brister som finns. Obligatoriska fält Lägg &ll anributet required i de input- taggar som är obligatoriska. Det är följande: Ankomstdatum, Namn, Gatuadress, Postnummer, Ort och E- post. Det behövs inget värde för anributet, utan skriv endast in required. Markera även dessa med en stjärna framför fältens e&ken, för an markera för användaren an de är obligatoriska. Markera även e&kenen för menyn Antal nä@er, även om du inte har required- anributet i den. Ändring av typ i e( par element I input- taggen för telefonnummer ändrar du värdet i type &ll "tel". I input- taggen för e- post ändrar du värdet i type &ll " ". Testa i webbläsaren Testa både i Firefox och Chrome och se vilken feedback som ges då du klickar på skicka- knappen, om du lämnar en obligatoriskt fält tomt eller fyller i data på fel form. Obs! Det sker ingen kontroll av an telefonnummer är på rän form, varken i Firefox eller Chrome.

13 8. Skicka formuläret För an skicka en formulär anger man i form- elementet två anribut. Det ena är method som an&ngen är "get" eller "post", som anger hur data ska skickas. Med "get" skickas det som parametrar i url:en och med "post" som en datablock i hnp- protokollet. Det andra anributet är acbon som anger vart formulärets data ska skickas. Det måste finnas något program på serversidan som tar emot formulärets data. Är det en webbplats för en stort företag eller annan stor organisa&on, har man säkert egna resurser på sin egen server för det. Men mindre webbplatser för små företag, föreningar eller privatpersoner, kan utnynja någon gra&stjänst på webben. Det finns sådana, som hanterar formulärets data och skickar det &ll en angiven epost- adress. I Sverige finns det en sådan tjänst på hnp:// I boken Basics of Web Design (tredje upplagan) ger Felke- Morris på sidan 327 &ps om en del andra liknande tjänster. Här beskrivs hur tjänsten på olzzon.com används. A(ribut i form- elementet Lägg &ll följande anribut i starnaggen för form: method="post" acbon="h@p:// bin/p.cgi?epost=epostadress&id=1" Istället för EPOSTADRESS skriver du egen epost- adress. Du kan skriva - CCC- istället t.ex. santa.claus- CCC- northpole.com Obs! skriv ingen annans adress, utan använd din egen. Du ska ju inte skicka spam &ll någon annan! Testa i webbläsaren Fyll i formuläret och skicka iväg det. Du ska då komma &ll en sida som säger an det är skickat. Kolla sedan din mail och se vilket innehåll du fån. Det kan ibland dröja en tag innan mailet kommer fram. room = dubbelrum persons = 3 arrivaldate = nights = 3 addi&on = Internet addi&on = parkering name = Enur Srofenrök street = Gatan 12 zipcode = city = Staden telephone = = enur001@fc.lnu.se