Webbteknik 1

Laboration 7C-1 - Skapa ett formulär

I denna del av laborationen ska du i HTML skapa ett formulär med några olika typer av objekt. Du ska också stilsätta det med CSS.

Förberedelser

• Öppna mappen L7c i Visual Studio Code (VSC).
• Öppna filerna index.html och style.css i VSC och öppna sidan i Live Server.
• Studera den kod som finns i HTML- och CSS-filerna, så att du blir insatt i den.

Grunden för formuläret

HTML

• Skriv in start- och sluttagg för ett form-element med attributet id="booking".
• Skapa struktur genom att lägga in fyra fieldset-element med varsitt legend-element. I legend skriver du Val av rum, Datum och antal nätter, Tillägg samt Kund.
• I starttaggen för fieldset-elementen lägger du in id-attribut, så att vi sedan kan referera till dem i CSS-koden. Använd namnen "room", "date", "facilities" och "customer" i id-attributen.
• Efter sista fieldset lägger du in en input-tagg med attributen type="submit", value="Skicka förfrågan" och id="send".

CSS

• Skriv en regel för #booking (dvs hela formuläret) med padding 20px;
• Lägg till en regel för #booking fieldset med background-color: #FED; och margin-bottom: 20px;
• Skriv en regel för #booking legend med stil för fetstil och kursiv stil.
• Skriv även en regel för #send med display: block; och margin-left: auto;
  • Detta högerjusterar knappen.

Val av rum

HTML

Följande ska läggas in i det första fieldset-elementet.

• Lägg in tre input-taggar med type="radio". Efter input-taggarna skriver du texterna Enkelrum, Dubbelrum och Familjerum.

• Lägg in attributet checked i den andra input-taggen, så att den är vald från början.

  • Attributet checked har inget värde, så du skriver endast namnet utan likhetstecken och värde.
  • Med checked väljer man vilket alternativ som ska vara förvalt, så man bör lägga det i den knapp som man tror är det vanligaste alternativet.

• Lägg också in value-attribut med värdena "enkel", "dubbel" respektive "familj" i input-taggarna.

  • Det är dessa värden som sedan används, då formuläret skickas.

• Prova att klicka på knapparna i webbläsaren.

  • Du bör se att du måste klicka på ringen samt att du kan markera flera alternativ.

• Lägg in attributet name="roomType" i alla tre input-taggarna.

  • Med samma namn, kan endast en av dem vara vald.

• Lägg in ett label-element som omger varje input-tagg och dess text.

  • Det ska alltså vara på formen: <input ...> text

• Prova igen att klicka på knapparna i webbläsaren.

  • Du bör nu kunna välja knapp genom att klicka på dess text och du kan endast välja en.

Datum och antal nätter

HTML

Följande ska läggas in i det andra fieldset-elementet.

• Lägg in ett label-element med texten Ankomstdag följt av en input-tagg med type="date" och name="arrival".
• Lägg också in ett label-element med texten Antal nätter och ett select-elemet med åtta option-element. Texten i option-elementen ska vara 1, 2, 3, 4, 5, 6, 1 vecka och 2 veckor.
• Lägg in value-attribut i option-taggarna med värdena "1", "2", "3", "4", "5", "6", "7" respektive "14".
  • Detta är antal dagar för de olika alternativen och de värden som används, då formuläret skickas.
• Lägg även in attributet selected i den första option-taggen.
  • Med selected anger man vilket alternativ som är förvalt. Det motsvarar checked för radioknapparna.
• I select-taggen lägger du in attributet name="nrOfNights".

Val av tillägg

HTML

Följande ska läggas in i det tredje fieldset-elementet.

• Lägg till tre label-element med input-taggar med type="checkbox" och name="facility". Efter input-taggarna skriver du Internet, Parkering respektive Sjöutsikt.
• Lägg även in value-attribut i input-taggarna med "internet", "parkering" respektive "sjöutsikt".

Data om kunden

HTML

Följande ska läggas in i det fjärde fieldset-elementet.

• Lägg in fem objekt på formen
  <label for="x">Rubrik</label>
<input type="text" name="x" id="x">

• Rubrik i de olika objekten ska vara Namn, Gatuadress, Postnummer, Ort och E-post. Det som markeras med "x" ska vara "name", "street", "zipcode", "city" och "email".

  • Attributen for och id kopplar samman label och input. Attributet name används då formuläret skickas.
  • I detta fall använd label på ett annat sätt än för rumstyp och tillägg. Det beror på att vi här vill separera texterna och input-taggarna i varsina element, för att sedan i CSS kunna lägga dem i varsina kolumner.

Stilsättning av formuläret

CSS

• I regeln för #booking fieldset lägger du till display: grid; gap: 0.6em; och white-space: nowrap;

  • Den sista egenskapen tas med, för att inte rubriker med mer än ett ord ska radbrytas.

• Lägg till en regel för #date med grid-template-columns: 1fr 1fr;

  • Detta skapar två lika breda kolumner, så att ankomstdatum och antal nätter hamnar intill varandra.

• Skriv en regel för #customer med grid-template-columns: min-content auto;

  • Detta skapar också två kolumner, fast i detta fall ska den första kolumnen inte vara bredare än vad som krävs för innehållet i elmenten. Den andra kolumnen sätts automatiskt till det utrymme som finns kvar.
  • I HTML-koden varvas label- och input-element. Vartannat hamnar i den första kolumnen och vartannat i den andra kolumnen, dvs alla label hamnar i den första kolumnen och alla input i den andra.

• Skriv en regel för #customer input med max-width: 40ch;

  • Detta sätter bredden på input-taggarna till 40 tecken (characters).
  • Eftersom max-width används, blir det flexibelt och fälten blir smalare om fönstret är smalare än 40 tecken.

• Skriv även en regel för #customer #zipcode med max-width: 6ch;

  • Det räcker inte med endast #zipcode, eftersom regeln #customer input då är mer specificerad och får företräde. Alternativt skulle man kunna skriva selektorn som input#zipcode, vilket betyder en input-tagg med id som är "zipcode".

• Lägg till font-size: 1.5em; border-radius: 0.6em; och background-color: #7BE; i regeln för #send, dvs knappen.

• Lägg även till en regel för #send:hover med background-color: #7E8;

Flexibel layout

• Ta fram Följsamt designläge och gör fönstret smalare, för att kontrollera hur pass flexibel layouten är.
• Skriv en media query för gränsen max-width: 560px. Lägg in en regel för #booking fieldset med grid-template-columns: auto; och gap: 0.2em;
  • Då läggs innehållet i varje fieldset i en kolumn och avståndet mellan objekten blir lite mindre, jämfört med den kod som lagts in tidigare.

Validera koden

• Validera både HTML- och CSS-filen och rätta eventuella fel.
• HTML-validator: https://validator.w3.org/nu/
• CSS-validator: https://jigsaw.w3.org/css-validator/#validate_by_upload

Laboration 7C-2 - Skicka ett formulär

I denna laboration ska du använda Netlifys tjänst för hantering av formulär. Det innebär att du måste publicera mappen den på Netlify, för att kunna testa detta. Detta kan du göra via GitHub eller manuellt (som i Lab 1b).

Netlifys tjänst för hantering av formulär är gratis upp till 100 inskickade formulär per månad. Du kan läsa mer om tjänsten på https://docs.netlify.com/forms/setup/

Förberedelser

• Öppna mappen L7c i Visual Studio Code (VSC), om du inte redan har den öppen.
• Du ska nu jobba vidare med samma filer som i föregående del av laborationen.
• Du behöver göra en inställning i netlify för att det skall gå att skicka in formulär. För att göra det så behöver du börja med att publicera sidan på netlify så att den finns där.
  • Publicera på samma sätt som du gjort i Lab 1b samt Uppgift 1 och 2.
  • När publiceringen är klar och du är inne i kontrollpanelen för den nya sajten i netlify klickar du på fliken Forms. Där väljer du Enable form detection. Nu kommer netlify automatiskt att hitta och aktivera formulär på sidan nästa gång du gör en deploy.

Tillägg i form-taggen

• Lägg till method="POST" och data-netlify="true" i form-taggen.
  • Det ska inte finnas något action-attribut för denna tjänst.

Obligatoriska fält

HTML

• Fälten för Ankomstdag, Namn och E-post ska vara obligatoriska. Markera dessa med en stjärna i början av rubriken för dem och lägg in attributet required i input-taggarna.
  • Attributet har inget värde, så skriv bara required i taggrna.
• Även Antal nätter är obligatoriskt, så markera även det med en stjärna, men här kan inte required användas. Istället finns redan ett "default"-värde med hjälp av selected.
• Prova att lämna ett obligatoriskt fält tomt och klicka på skicka-knappen.

Publicera webbsidan

• Uppdatera sajten på netlify genom att publicera igen.

Testa formuläret

• Fyll i något i formuläret och klicka på knappen för att skicka in det.
• Gå till Netlify och ta fram sidan för din "site", om du inte redan har den framme. Klicka på fliken Forms.
• Under rubriken Active forms klickar du på booking och kan sedan gå vidare med att ta fram det som skickats in via formuläret.

Klar