Easy-Micro


LANGAGE HTML5
Formulaire

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 :

Test lors de l'envoi

Type Email :

Type URL :


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"/><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.

HTML5 Pour aller plus loin...



Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Vendredi 18 janvier 2019 - Semaine 03 - Sainte Prisca (Demain: Saint Marius)
Aujourd'hui, c'est l'anniversaire de Philippe Starck (1949-70 ans), créateur et décorateur d'intérieur français. Autre 18 janvier: 2016 - Décès de Glenn Frey le chanteur fondateur du groupe californien Eagles.
Haut de page Easy-Micro