Lomakkeet ja validointi - Viikkotehtävä 3

Tässä tehtävässä opitaan HTML5-lomakkeiden rakentamista ja syötteiden validointia.

Käy ensin läpi nämä materiaalit:

Yhteiset vaatimukset

Kaikille tasoille yhteiset vaatimukset ovat:

Taso 1

Tallenna itsellesi valmis pohja: pohja.zip

Luo valmiiseen pohjaan lomake, jolla voi lisätä tietorakenteeseen uusia joukkueita. Voit kirjoittaa valmista html-koodia niin paljon kuin haluat. Myös CSS:ää voi käyttää mutta kaikki css on oltava tyylit.css-tiedostossa. Lomakkeen on näytettävä seuraavalta:

Mallilomake

Joukkueelle on lomakkeella syötettävä seuraavat tiedot:

Lomakkeen on osattava seuraavat tarkistukset ja rajoitukset:

Lomake on järkevästi ryhmiteltävä fieldset-elementeillä. Esim. jäsenten syöttäminen pitää olla omassa fieldsetissä. Label-elementtejä on osattava käyttää järkevästi. Lomake on muutenkin muotoiltava siististi ja ulkoasun on vastattava mallikuvaa.

Lomake on luotava data-tietorakenteen sisällön perusteella. Jos sisältö muuttuu esim. sarjoja tulee lisää niin lomakkeen on myös muututtava.

Lisää sivun loppuun listaus joukkueiden nimistä aakkosjärjestyksessä. Lista on esitettävä järjestämättömä listana (ul- ja li-elementit). Listaus täytyy päivittää aina kun uusia joukkueita lisätään.

Lomakkeen on oltava responsiivinen. Varmista, että lomake toimii 360x768-resoluutioisella näytöllä ilman turhaa vaakasuuntaista skrollausta. Vaakasuuntainen skrollbar saa ilmestyä vasta alle 300 pikselin näytöllä. Lomakkeen on pienillä resoluutioilla näytettävä samalta kuin seuraavassa kuvassa ja yli 600 pikseliä leveillä näytöillä näytettävä samalta kuin ensimmäisessä mallikuvassa.

Sivu pienellä näytöllä

Taso 3

Toteuta taso 1 ja sen jälkeen laajenna seuraavasti:

Luo sivulle uusi lomake jolla voi lisätä kilpailuun uusia sarjoja (kts. tietorakenne). Sarjalle kysytään seuraavat tiedot:

Muotoile lomakkeen ulkoasu samaan tapaan kuin joukkuelomake

Kaikista virheellisistä syötteistä on annettava suomenkieliset selkeät virheilmoitukset.

Sarjalle on itse keksittävä uniikki id. id:tä ei pidä näyttää käyttäjälle

Sarjan lisäämisen jälkeen on myös joukkuelomake päivitettävä.

Parantele joukkuelomaketta seuraavasti:

Tee sivulle kaksisarakkeinen layout. Siirrä joukkuelistaus sivun lopusta sivun alkuun ja vasempaan laitaan. Molemmat lomakkeet löytyvät sivun oikeasta laidasta allekkain aseteltuina. Ensimmäisenä on sarjalomake ja toisena joukkuelomake. Kapeissa alle 600 px leveissä näytöissä poista sarakkeet ja esitä sivun sisältö peräkkäin kuten tasolla 1 eli ensin lomakkeet ja viimeisenä joukkuelistaus. Sivun HTML-koodissa joukkuelistauksen on oltava ensimmäisenä ja lomakkeiden viimeisinä. Toteuta layout käyttäen flexboxia.

Taso 3 layout

Taso 5

Toteuta ensin taso 3 ja sen jälkeen laajenna seuraavasti:

Lisää sivulle vielä kolmas lomake, jolla voi lisätä tietorakenteeseen uusia kilpailuja (kts. tietorakenteesta kisatiedot). Joudut muokkaamaan tietorakennetta. Nykyiseen versioon ei voi lisätä kuin yhden kisan tiedot. Voit muokata tietorakenteen mieleiseesi muotoon kunhan alkuperäiset tiedot säilyvät rakenteessa. Muokkaaminen pitää tehdä ohjelmallisesti.

Kysy lomakkeella seuraavat tiedot:

Käytä samoja rajotteita ja tarkistuksia kuin taso 3:n sarjan lisäämisessä.

Muotoile lomakkeen ulkoasu samaan tapaan kuin joukkuelomake

Muuta rastileimauksessa oleva rastin valinta käyttämään text-tyyppistä input-elementtiä eli tavallista syöttökenttää. Ehdota oikeita rastikoodeja syöttämisen yhteydessä (datalist). Ehdota vain sellaisia koodeja joita joukkue ei ole jo leimannut. Kelpuuta kenttään vain oikeat rastikoodit.

Muuta joukkuelomakkeesta sarjan valinta sen mukaan kuinka paljon sarjoja on tarjolla. Jos sarjoja on enintään neljä niin sarja valitaan radiobuttoneilla kuten edellisillä tasoilla. Jos sarjoja on enemmän kuin neljä niin valinta tehdäänkin alasvetovalikosta.

Klikattaessa joukkueen nimeä listauksessa haetaan kyseisen joukkueen tiedot lomakkeelle muokattavaksi. Muokkauksen ja lomakkeen tallentamisen jälkeen korvataan uusilla tiedoilla muokattavaksi haetun joukkueen tiedot. Myös joukkuelistaus pitää päivittää. Joukkueen tietoja ei saa tallentaa jos jokin lomakkeen kenttä rikkoo rajoitteita.

Muuta sivun layout vaakatasoon jos sivun leveys on vähintään 1200 pikseliä. Joukkuelistaus tulee sivun yläosaan mutta listaus esitetään niin monessa sarakkeessa kuin sivulle rinnakkain mahtuu. Yhdessä sarakkeessa on enintään viisi joukkuetta. Sijoita lomakkeet vierekkäin sivun loppuun siten, että ensimmäisenä on kilpailulomake, sitten sarjalomake ja viimeisenä joukkuelomake. Lomakkeet on mahdutettava sivulle ilman sivusuuntaista skrollbaria. Kapeammilla näytöillä sivu esitetään kuten aiemmilla tasoilla on toteutettu. Toteuta käyttäen flexboxia.

Sivun ulkoasu leveällä näytöllä

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/tiea2120/vt/vt3/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2017-10-15 23:55:12
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta