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>		

Can I Use input-datetime? Data on support for the input-datetime feature across the major browsers from caniuse.com.