Varaa risteily¶
Yrityksesi on juuri saanut tilauksen fiktiiviseltä Best Cruises Companyltä™! Nyt sinun tehtäväsi on rakentaa varauslomakkeen HTML-koodi. Parhaat risteilyt - Book A Cruise™ sisältää kaikki parhaat HTML:n tarjoamat elementit: päivämäärävalitsin, pudotusvalikko, numerokenttä, sähköpostikentät ja valintaruutu! 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 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 (vehicle)¶
Lähetä-painike (submit)¶
Note
Huomioitavaa - Valitse oikeat syötetietotyypit. - Esimerkiksi aikuisten lukumäärä ja lähtöpäivä -kenttien ei tulisi hyväksyä kirjaimia. - Tutustu erilaisiin input-tyyppeihin ennen harjoituksen aloittamista: HTML Input Types
Vaikka lomakkeen tyylittäminen ei ole pakollista, voit kokeilla CSS:ää, jos haluat parantaa ulkoasua.
Attention
Tarkista lomakkeesi. Varmista, että lomake: ✔️ Läpäisee W3C-validaattorin ✔️ Sisältää oikeat tunnukset (id:t)
Virheelliset id:t aiheuttavat automaattisten testien epäonnistumisen, jolloin et saa pisteitä harjoituksesta.
Tarvitsetko apua? - Katso seuraavat linkit:
A+ esittää tässä kohdassa tehtävän palautuslomakkeen.