Lomakkeet: HTML5-lomakekentät

Erilaisia kenttätyyppejä

Nimi (vihjeteksti ja pakollinen kenttä)

Hakusana

Puhelinnumero
Kansainvälisessä muodossa, esimerkiksi +358 40 1234567

Paino kilogrammoina

Ikä liukusäätimellä

WWW-sivun osoite

Sähköpostiosoite opiskelijatunnuksella
Osoitteen on päätyttävä muotoon student.jyu.fi

Päivämäärä ja aika

Päivämäärä

Päivämäärä ja kellonaika

Kuukausi

Viikko

Kellonaika

Muita kenttiä

Väri

Postinumero
Ehdotuslista tarjoaa muutamaa numeroa, mutta voit kirjoittaa minkä tahansa viisinumeroisen postinumeron.

Käyttäjätunnus
Vähintään 5 ja enintään 10 merkkiä.

CSS

HTML

<form action="https://appro.mit.jyu.fi/cgi-bin/view.cgi" method="post">
  <fieldset>
    <legend>Erilaisia kenttätyyppejä</legend>

<p>
      <label for="nimi">Nimi (vihjeteksti ja pakollinen kenttä)</label><br />
      <input id="nimi" type="text" name="nimi"
             placeholder="Etu- ja sukunimi" autocomplete="name"
             required="required" />
    </p>

<p>
      <label for="haku">Hakusana</label><br />
      <input id="haku" type="search" name="haku" />
    </p>

<p>
      <label for="puhnro">Puhelinnumero</label><br />
      <span id="puhnro-ohje">Kansainvälisessä muodossa, esimerkiksi +358 40 1234567</span><br />
      <input id="puhnro" type="tel" name="puhnro"
             aria-describedby="puhnro-ohje" autocomplete="tel"
             pattern="[+][0-9 ]{8,20}" required="required" />
    </p>

<p>
      <label for="paino">Paino kilogrammoina</label><br />
      <input id="paino" type="number" name="paino"
             min="1" max="200" step="0.1" value="70" required="required" />
    </p>

<p>
      <label for="ika">Ikä liukusäätimellä</label><br />
      <input id="ika" type="range" name="ika" min="1" max="120" step="1" value="25" />
    </p>

<p>
      <label for="osoite">WWW-sivun osoite</label><br />
      <input id="osoite" type="url" name="osoite"
             placeholder="https://www.example.com/" autocomplete="url" />
    </p>

<p>
      <label for="sposti">Sähköpostiosoite opiskelijatunnuksella</label><br />
      <span id="sposti-ohje">Osoitteen on päätyttävä muotoon student.jyu.fi</span><br />
      <input id="sposti" type="email" name="sposti"
             aria-describedby="sposti-ohje" autocomplete="email"
             pattern=".+@student[.]jyu[.]fi" />
    </p>
  </fieldset>

<fieldset>
    <legend>Päivämäärä ja aika</legend>

<p>
      <label for="pvm">Päivämäärä</label><br />
      <input id="pvm" type="date" name="pvm" />
    </p>

<p>
      <label for="hetki">Päivämäärä ja kellonaika</label><br />
      <input id="hetki" type="datetime-local" name="hetki" />
    </p>

<p>
      <label for="kuukausi">Kuukausi</label><br />
      <input id="kuukausi" type="month" name="kuukausi" />
    </p>

<p>
      <label for="viikko">Viikko</label><br />
      <input id="viikko" type="week" name="viikko" />
    </p>

<p>
      <label for="kello">Kellonaika</label><br />
      <input id="kello" type="time" name="kello" />
    </p>
  </fieldset>

<fieldset>
    <legend>Muita kenttiä</legend>

<p>
      <label for="postinumero">Postinumero</label><br />
      <span id="postinumero-ohje">Ehdotuslista tarjoaa muutamaa numeroa, mutta voit
      kirjoittaa minkä tahansa viisinumeroisen postinumeron.</span><br />
      <input id="postinumero" type="text" name="postinumero" list="postinumerot"
             aria-describedby="postinumero-ohje" autocomplete="postal-code"
             inputmode="numeric" pattern="[0-9]{5}" maxlength="5" />
    </p>

<p>
      <label for="tunnus">Käyttäjätunnus</label><br />
      <span id="tunnus-ohje">Vähintään 5 ja enintään 10 merkkiä.</span><br />
      <input id="tunnus" type="text" name="tunnus"
             aria-describedby="tunnus-ohje"
             minlength="5" maxlength="10" required="required" />
    </p>
  </fieldset>

CSS

HTML

Javascript

Konsoli