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ä Chrome-selaimessa seuraavalta:

Mallilomake

Lomakkeella oleva sarjalistaus on luotava tietorakenteen perusteella. Jos sisältö muuttuu, esim. sarjoja tulee lisää, niin lomakkeen on myös muututtava. Joukkueen lisäämisen jälkeen lomake on tyhjennettävä. Ilmoita onnistuneesta lisäämisestä.

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.

Lisää sivun loppuun listaus joukkueiden nimistä aakkosjärjestyksessä. Lista on esitettävä järjestämättömänä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ä

Sivulla ei saa käyttää taulukoita

Taso 3

Toteuta taso 1 ja sen jälkeen laajenna seuraavasti:

Lisää sivulle uusi lomake, jolla voi lisätä tietorakenteeseen uusia kilpailuja (kts. tietorakenteesta kisatiedot).

Kysy lomakkeella seuraavat tiedot:

Kilpailun kuuluvia sarjoja ei kysytä lomakkeella.

Muotoile lomakkeen ulkoasu samaan tapaan kuin joukkuelomake

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

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

Lisää joukkuelomakkeeseen alasvetovalikko, josta valitaan mihin kisaan joukkue kuuluu. Huom. valittavissa on oltava myös lomakkeella lisätyt uudet kilpailut. Joukkuelomakkeen sarjavalintojen pitää vastata valittua kisaa.

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.

Tee sivulle kaksisarakkeinen layout. Siirrä joukkuelistaus sivun lopusta sivun alkuun ja oikeaan laitaan. Lomakkeet löytyvät sivun vasemmasta laidasta. 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 viimeisenä. Toteuta layout käyttäen flexboxia.

Taso 5

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

Parantele joukkuelomaketta seuraavasti:

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 ja toisena 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.

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/>
2018-07-27 12:46:50
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta