Lomakkeet: HTML5-lomakeuutuudet

CSS

HTML

<form action="kasittelija" method="post">
<h2>Vihjeteksti (placeholder)</h2>
<input name="nimi" type="text" placeholder="Etu- ja sukunimi" required="required" />
<h2>Haku</h2>
<input name="haku" type="search" placeholder="Hakusana">
<h2>Puhelinnumero</h2>
<input name="puhnro" type="tel" required="required" placeholder="Puhelinnumero kansainvälisessä muodossa +358 00 0000000" pattern="\+[0-9 ]{8,20}" />
<h2>Numeron valinta</h2>
<input name="paino" type="number" min="1" max="200" step="0.1" value="70" required="required">
<h2>Valinta liukusäätimellä</h2>
<input name="ika" type="range" min="1" max="120" step="1" value="25" list="iat" />
<datalist id="iat">
  <option value="10" label="10">
  <option value="20" label="20">
  <option value="30" label="30">
  <option value="40" label="40">
  <option value="50" label="50">
  <option value="60" label="60">
  <option value="70" label="70">
  <option value="80" label="80">
  <option value="90" label="90">
  <option value="100" label="100">
  <option value="110" label="110">
  <option value="120" label="120">
</datalist>

<h2>Päivämäärän valinta</h2>
<input name="pvm" type="date">
<h2>Päivämäärän ja ajan valinta</h2>
<input name="aika" type="datetime-local">
<h2>Kuukauden valinta</h2>
<input name="kuukausi" type="month">
<h2>Viikon valinta</h2>
<input name="viikko" type="week">
<h2>Ajan valinta</h2>
<input name="aika" type="time">
<h2>Värin valinta</h2>
<input name="vari" type="color">
<h2>Sähköpostiosoitteen validointi</h2>
<input name="email" type="email" pattern=".+@student.jyu.fi">

<h2>Datalist</h2>
<input size="42" type="text" name="postinumero" list="postinumerot"
 placeholder="Aloita syöttö numeroilla 3 tai 4" pattern="31600|33101|40700|40740|40900">
<datalist id="postinumerot">
  <option value="31600">
  <option value="33101">
  <option value="40700">
  <option value="40740">
  <option value="40900">
</datalist>

<h2>Pakollinen kenttä</h2>
<input name="pakollinen" type="text" required="required">

<h2>minlength ja maxlength</h2>
<input name="nimi" type="text" required="required" minlength="5" maxlength="10">

Vihjeteksti (placeholder)

Haku

Puhelinnumero

Numeron valinta

Valinta liukusäätimellä

URL

Päivämäärän valinta

Päivämäärän ja ajan valinta

Kuukauden valinta

Viikon valinta

Ajan valinta

Värin valinta

Sähköpostiosoitteen validointi

Datalist

Pakollinen kenttä

minlength ja maxlength

CSS

HTML

Javascript

Konsoli