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 layoutin on näytettävä seuraavalta:

Mallilomake

Sarjat on listattava lomakkeella aakkosjärjestyksessä. Huom. sarjojen nimet eivät ole välttämättä samat kuin mallikuvassa. Lomakkeen on toimittava oikein riippumatta tietorakenteessa olevien sarjojen lukumäärästä ja nimistä.

Joukkueen lisäämisen jälkeen lomake on tyhjennettävä ja palautettava alkutilanteeseen.

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

Lomakkeen on osattava seuraavat tarkistukset ja rajoitukset:

Lisätylle joukkueelle on tallennettava automaattisesti myös seuraavat tiedot:

Muista tallentaa valittu sarja samalla tavalla kuin jo tietorakenteessa olevissa joukkueissa.

Label-elementtejä on osattava käyttää järkevästi. Kentän otsikkoa (label) klikattaessa on kyseisen kentän aktivoiduttava tai tultava valituksi. Tämä on toteutettava ilman javascript-koodia.

Lomakkeen ulkoasun on vastattava mallikuvaa.

Lisää sivun loppuun listaus joukkueiden nimistä ja sarjoista aakkosjärjestyksessä ja joukkueiden jäsenten nimistä myös aakkosjärjestyksessä. Lista on esitettävä kahtena sisäkkäisenä järjestämättömänä listana (ul- ja li-elementit). Listaus täytyy päivittää aina, kun uusia joukkueita lisätään. Joukkuelistauksen on oltava näkyvissä heti. Esimerkki listauksesta:

Sivulla ei saa käyttää taulukoita

Toteutetun sivun pitää olla responsiivinen eli mukautua erilaisiin näyttökokoihin. Sivusuuntaista skrollbaria ei saa tulla yli 640 pikselin näytöillä. Sivun ulkoasun on vastattava mallikuvia.

Taso 3

Toteuta taso 1 ja sen jälkeen laajenna seuraavanlaiseksi:

Mallilomake 2

Leimaustavat on listattava lomakkeella aakkosjärjestyksessä

Kysy lomakkeella myös seuraavat tiedot:

Taso 5

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

Parantele joukkuelomaketta seuraavasti:

Käyttäjien kommentit

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