2. projekti

Täytä alla olevat käyttäjän tarinat. Anna sille oma henkilökohtainen tyylisi. Voit käyttää HTML: ää, JavaScriptiä ja CSS: ää tämän projektin loppuun saattamiseen. Hyvää koodausta!

Käyttäjätarina # 1: Näen otsikon id = "otsikko" H1-kokoisessa tekstissä.

Käyttäjätarina # 2: Näen lyhyen selityksen id = "kuvaus" P-kokoisena tekstinä.

Käyttäjätarina # 3: Näen lomakkeen id = "kyselylomake".

Käyttäjätarina # 4: Lomakeelementin sisällä minun on kirjoitettava nimeni kenttään id = "nimi".

Käyttäjätarina # 4b: Jos annan liian lyhyen nimen, näen HTML5-vahvistusvirheen.


Käyttäjätarina # 5: Lomakeelementin sisällä minun on kirjoitettava sähköposti kenttään id = "email".

Käyttäjätarina # 6: Jos annan sähköpostiviestin, jota ei ole muotoiltu oikein, näen HTML5-vahvistusvirheen.

Käyttäjän tarina # 7: Lomakkeen sisällä voin kirjoittaa numeron kenttään, jonka id = "ika".

Käyttäjän tarina # 8: Jos annan muita kuin numeroita edelliseen kenttään, näen HTML5-vahvistusvirheen.

Käyttäjän tarina # 9: Jos annan numeroita numeron syöttöalueen ulkopuolella, jotka on määrittelty min- ja max-määritteillä, näen HTML5-vahvistusvirheen.

Käyttäjän tarina # 10: Nimen, sähköpostiosoitteen ja numeron syöttökentissä lomakkeen sisällä näen vastaavat otsikot, jotka kuvaavat kunkin kentän tarkoitusta seuraavilla tunnuksilla: id = "nimisyotto", id = "emailsyotto" , ja id = "ikasyotot".

Käyttäjätarina # 11: Nimen-, sähköposti- ja numerokenttien kohdalla näen tekstin, joka antaa minulle kuvauksen tai ohjeet jokaiselle kentälle.

Käyttäjän tarina # 12: Lomake-elementin sisällä voin valita vaihtoehdon pudotusvalikosta, jolla on vastaava id = "pudotus".

Käyttäjätarina # 13: Lomake-elementin sisällä voin valita kentän yhdestä tai useammasta ryhmästä radionäppäimiä. Jokainen ryhmä on ryhmitelty nimiominaisuuden avulla.

Käyttäjätarina # 14: Lomakeelementin sisällä voin valita useita kenttiä valintaruutujen sarjasta, joista jokaisella on oltava arvoattribuutti.

Käyttäjätarina # 15: Lomakeelementin sisällä minulle esitetään lopussa tekstiä lisäkommentteja varten.

Käyttäjätarina # 16: Lomakeelementin sisällä on minulle painike id = "laheta", jotta voin lähettää kaikki syötteeni.

Kun olet valmis, lähetä URL työskentelyprojekti tänne

HUOM! sähköpostitarkastus onnistuu tällä funktiolla, joka pitää sijoittaa teidän oman funktion jälkeen:

function emailIsValid (email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
}

Ja käyttö:

if(emailIsValid(sahkoposti))
  {
    //
  }
  else{
    alert("Anna oikea sähköpostiosoitteesi");
    lomake.email.focus();
    return (false);
  }