TESTING AREA for teachers - real service at plus.tuni.fi
Varaa risteily¶
Yrityksesi on juuri saanut tilauksen fiktiiviseltä Best Cruises Companyltä™! Sinun tehtäväsi on implementoida tilattu varauslomake. Parhaat risteilyt - Book A Cruise™ sisältää kaikki oleelliset HTML-elementit, kuten: päivämäärävalitsimen, pudotusvalikon, numerokentän, sähköpostikentän ja valintaruudun! Noudata annettuja ohjeita tarkasti ja asiakkaasi kiittää!
Kuinka rakennat sen¶
Jälleen yksi webin ehdoton ällistyssivu! Joku saattaa sanoa, että pieni muotoilu ja muotoelementtien ryhmittely saattaisi tehdä ihmeitä mutta toiminnallisuushan on ainoa mikä sivulla merkitsee, vai miten se nyt meni?
Otsikko¶
Tekstin sisällöllä ei ole väliä. Lisää h1-elementtiin jokin teksti.
Lähtöpaikka (from-selection)¶
Pudotusvalikkoon tulee lisätä seuraavat vaihtoehdot:
<option value="Helsinki" id="from-helsinki">Helsinki</option>
<option value="Turku" id="from-turku">Turku</option>
<option value="Vaasa" id="from-vaasa">Vaasa</option>
<option value="Tallinna" id="from-tallinna">Tallinna</option>
Määränpää (to-selection)¶
Pudotusvalikkoon tulee lisätä seuraavat vaihtoehdot:
<option value="Helsinki" id="to-helsinki">Helsinki</option>
<option value="Turku" id="to-turku">Turku</option>
<option value="Vaasa" id="to-vaasa">Vaasa</option>
<option value="Tallinna" id="to-tallinna">Tallinna</option>
Nimi (customer-name)¶
Kenttä on pakollinen.
Sähköposti (customer-email)¶
Kenttä on pakollinen.
Aikuisten lukumäärä (number-of-adults)¶
Kenttä on pakollinen.
Vähimmäisarvo: 1
Enimmäisarvo: 99
Lasten lukumäärä (number-of-children)¶
Kenttä on pakollinen.
Vähimmäisarvo: 0
Enimmäisarvo: 99
Lähtöpäivä (departure-date)¶
Kenttä on pakollinen.
Matkustaminen ajoneuvolla (id="vehicle")¶
Lähetä-painike (id="submit")¶
Note
Valitse oikea input-tyyppi kullekin kentälle.
Esimerkiksi aikuisten lukumäärä ja lähtöpäivä -kenttien ei tule hyväksyä kirjaimia.
Tutustu erilaisiin input-tyyppeihin ennen harjoituksen aloittamista: HTML Input Types
Vaikka lomakkeen tyylittely ei ole pakollista, voit jo kokeilla CSS:ää.
Attention
Tarkista lomakkeesi. Varmista, että lomake:
✔️ Läpäisee W3C-validaattorin
✔️ Sisältää oikeat tunnukset (id:t)
Virheelliset id:t aiheuttavat automaattitestien epäonnistumisen.
Tarvitsetko apua? - Katso seuraavat linkit:
A+ esittää tässä kohdassa tehtävän palautuslomakkeen.