HTML5Formulaire
Eléments HTML5 de Formulaire
La plupart des nouveaux éléments de formulaire HTML5 permettent de tester un format spécifique et propose donc, de vérifier la syntaxe saisie ou une aide à la saisie. Découvrez, ci-dessous, les champs email, url, date, month, week datalist et number qui proposent une aide au remplissage soit lors de l'envoi (email et url), soit lors de la saisie (date, month, week, datalist et number).
Exemple à tester avec FireFox, Chrome ou Opéra :
Attributs HTML5: Vous noterez que la saisie obligatoire est gérée dans les deux premiers champs par l'attribut HTML5 'required' et que l'aide à la saisie est activée par l'attribut HTML5 'autocomplete'. L'autofocus sur le champ Date est activé par l'attribut 'autofocus'.
Le code HTML5 correspondant:
Note: ces nouveaux éléments HTML5 fonctionne parfaitement (dans les bon navigateurs :-) même si votre document est toujours déclaré en XHTML
Exemple à tester avec FireFox, Chrome ou Opéra :
Test lors de l'envoi
Aide à la saisie
Type Date :
Type Month :
Type Week :
Type Datalist :
(saisissez ci-contre un nom de navigateur)
Type number : (choisissez ci-contre un chiffre entre 1 et 5)
Attributs HTML5: Vous noterez que la saisie obligatoire est gérée dans les deux premiers champs par l'attribut HTML5 'required' et que l'aide à la saisie est activée par l'attribut HTML5 'autocomplete'. L'autofocus sur le champ Date est activé par l'attribut 'autofocus'.
Le code HTML5 correspondant:
<!DOCTYPE html>
<html lang="fr">
<head><meta charset="utf-8"></head>
<body>
<form action="" method="post" autocomplete="on">
Type Email : <input type="email" name="adresse" autocomplete="off" required autofocus><br>
<input type="submit" value="Let's Go">
Type URL : <input type="url" name="siteweb" required><br>
<input type="submit" value="Let's Go"><br><br>
Type Date : <input type="date" name="date" max="2012-06-25" min="2011-08-13" ><br>
Type Month : <input type="month" name="vacances"><br>
Type Week : <input type="week" name="semaine"><br>
Type Datalist : <input list="navigateurs" name="navigateurs">
<datalist id="navigateurs">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist><br>
Type number : <input type="number" name="quantite" min="1" max="5">
</form> </body></html>
<html lang="fr">
<head><meta charset="utf-8"></head>
<body>
<form action="" method="post" autocomplete="on">
Type Email : <input type="email" name="adresse" autocomplete="off" required autofocus><br>
<input type="submit" value="Let's Go">
Type URL : <input type="url" name="siteweb" required><br>
<input type="submit" value="Let's Go"><br><br>
Type Date : <input type="date" name="date" max="2012-06-25" min="2011-08-13" ><br>
Type Month : <input type="month" name="vacances"><br>
Type Week : <input type="week" name="semaine"><br>
Type Datalist : <input list="navigateurs" name="navigateurs">
<datalist id="navigateurs">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist><br>
Type number : <input type="number" name="quantite" min="1" max="5">
</form> </body></html>
Note: ces nouveaux éléments HTML5 fonctionne parfaitement (dans les bon navigateurs :-) même si votre document est toujours déclaré en XHTML
Pour aller plus loin...