Formulaire

Attribut placeholder HTML 5

Affiche le contenu de l'attribut dans le champ. Disparaît au focus et réapparaît à la perte de focus si le champ n'a pas été rempli.

The placeholder attribute reprensents a short hint (a word or short phrase) intended to aid the user with data entry. A hint could be a sample value or a brief description of the expected format.
For a longer hint or other advisory text, the title attribute is more appropriate.
The placeholder attribute should not be used as an alternative to a label

HTML

	
<form method="post" action="page.php">
	<p>
	   <label for="couleur">Couleur : </label>
	   <input type="text" id="couleur" name="couleur" value="" placeholder="Rouge" />
	</p>
	<p>
	   <input type="submit" value="Valider la couleur" />
	</p>
</form>
	

Compatibilité

IE8 : non

Attribut required HTML 5

Bloque le submit et met en valeur le champ requis non rempli.
Accessibilité : ARIA.

HTML

	
<form method="post" action="page.php">
	<p>
	   <label for="couleur">Couleur : </label>
	   <input type="text" id="couleur" name="couleur" value="" />
	</p>
	<p>
	   <label for="forme">Forme : </label>
	   <input type="text" id="forme" name="forme" value="" required aria-required="true" />
	</p>
	<p>
	   <input type="submit" value="Valider" />
	</p>
</form>
	

Compatibilité

IE8, Safari 5, Epiphany 2 : non

input type="email" HTML 5

Bloque le submit et met en valeur le champ si les données entrées ne correspondent pas à la syntaxe d'un e-mail.

HTML

	
<form method="post" action="page.php">
	<p>
	   <label for="mail">E-mail : </label>
	   <input type="email" id="mail" name="mail" value="" />
	</p>
	<p>
	   <input type="submit" value="Valider" />
	</p>
</form>
	

Compatibilité

IE8, Safari 5, Epiphany 2 : non

input type="url" HTML 5

Bloque le submit et met en valeur le champ si les données entrées ne correspondent pas à la syntaxe d'une adresse.

HTML

	
<form method="post" action="page.php">
	<p>
	   <label for="url">Site : </label>
	   <input type="url" id="url" name="url" value="" />
	</p>
	<p>
	   <input type="submit" value="Valider" />
	</p>
</form>
	

Compatibilité

IE8, Safari 5, Opera 11, Epiphany 2 : non

Page de tests