Webbutveckling med HTML och 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:

        <label>
            <input ...> text
        </label>
    

• 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.nu/
• CSS-validator: https://jigsaw.w3.org/css-validator/#validate_by_upload

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.

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

• Skapa en repository på GitHub.
• Gå till Source Control i VSC och klicka på knappen Initialize Repository, koppla till GitHub med kommandot add remote, gör en commit och push to. Kontrollera sedan att du fått upp filerna i din repository på GitHub.
• Gå till Netlify och skapa "new site" från GitHub och gör en "Deploy".
• Klicka på länken du får på Netlify för din publicerade sida, så ska du få fram formuläret.

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.