Supporté par ChromeSupporté par FirefoxSupporté par EdgeSupporté par Safari/iOS         <input> : Démo HTML5

Mise à jour : 2017-01-22

Inchangés depuis HTML2 (1996), les formulaires ont fait l'objet de débauches techniques.
L'enjeu des formulaires HTML5 est l'intégration de nouvelles fonctionnalités et l'automatisation de certains comportements, se plaçant comme un intermédiaire entre les formulaires actuels et XForms.

<input>

Une vérification automatique de la validité des champs <input> est réalisée avant validation du formulaire.

Détails du support


Attributs supportés
  Logo Chrome Logo Firefox Logo Edge Logo Safari/iOS
date Item support Item non support Item support Item support
time Item support Item non support Item non support Item support
number Item support Item support Item support Item support
range Item support Item support Item support Item support
color Item support Item support Item non support Item non support
email Item support Item support Item support Item support
url Item support Item support Item support Item support
search Item support Item support Item support Item support
autofocus Item support Item support Item support Item support
placeholder Item support Item support Item support Item support
required Item support Item support Item support Item non support
vérif. auto Item support Item support Item support Item non support

Notes sur le tuto


Exemple de code HTML5

<!--_pseudo-class.css
input:optional {background-color: silver}
input:required {background-color: fuchsia}
input:invalid  {background-color: red}
-->
<!--_range.css
input[type="range"] {position: relative}
input[type="range"]:before,
input[type="range"]:after  {position: absolute; top: 30px}
input[type="range"]:before {left:  0; content: attr(min)}
input[type="range"]:after  {right: 0; content: attr(max)}
-->
<form action="_input.php">
Date :
	<input type="date" name="myDate" title="Date (aaaa-mm-jj)" value="2009-01-15" required><br>
<br>
Time :
	<input type="time" name="myTime" title="Heure (hh:mn)"     value="08:16"      required><br>
<br>
Number :
	<input type="number" name="myNumber" title="Nombre"  value="10" min="8" max="12" step="2"
		required><br>
<br>
Range :
	<input type="range"  name="myRange"  title="Curseur" value="0"  min="0" max="10" step="2"
		onchange="document.getElementById('rangeOutputOnChange').textContent=value"
		oninput="document.getElementById('rangeOutputOnInput').textContent=value"
		list=graduations>
	<datalist id=graduations style="display:none">
		<option>0</option>
		<option>2</option>
		<option>4</option>
		<option>6</option>
		<option>8</option>
		<option>10</option>
	</datalist>
	OnChange = <span id="rangeOutputOnChange">0</span> /
	OnInput = <span id="rangeOutputOnInput">0</span><br>
<br>
Color :
	<input type="color" name="myColor" title="Couleur en anglais" value="#666666"><br>
<br>
Email :
	<input type="email" name="myEmail" title="Courriel" value="html5demo@braincracking.org"
		required><br>
<br>
URL :
	<input type="url"   name="myURL"   title="URL"      value="http://html5demo.braincracking.org"
		required><br>
<br>
PlaceHolder &amp; AutoFocus :
	<input type="text" name="myPhone" title="N° à 10 chiffres avec espace"
		pattern="^0[1-9]( [0-9]{2}){4}$"
		placeholder="06 01 02 03 04"
		autofocus
		required><br>
<br>
Search :
	<input type="search" name="mySearch" title="Recherche" required><br>
<br>
<input type="submit" value="Valider">
</form>

Démonstration du résultat HTML5


Date :

Time :

Number :

Range : OnChange = 0 / OnInput = 0

Color :

Email :

URL :

PlaceHolder & AutoFocus :

Search :


Détection automatique du support HTML5

Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)
<script src="_html5detect.js"></script>
<script>
	isAttributeSpecified("myDate",  "type", "date")
	isAttributeSpecified("myTime",  "type", "time")
	isAttributeSpecified("myNumber","type", "number")
	isAttributeSpecified("myRange", "type", "range")
	isAttributeSpecified("myColor", "type", "color")
	isAttributeSpecified("myEmail", "type", "email")
	isAttributeSpecified("myURL",   "type", "url")
	isAttributeSpecified("mySearch","type", "search")

	isAttributeSupported("input", "autofocus")
	isAttributeSupported("input", "placeholder")
	isAttributeSupported("input", "required")
	isAttributeSupported("input", "min")
	isAttributeSupported("input", "max")
	isAttributeSupported("input", "step")
</script>