41Mag - Tutoriel HTML5 : Comment faire un formulaire complet

Tutoriel HTML5 : Comment faire un formulaire complet

Voici un tutoriel pour vous détailler comment réaliser votre formulaire en HTML5. Nous vous expliquerons pas à pas comment utiliser les nouveaux éléments tel que le spider, les champs numériques, les champs réservé au eMails, aux dates (avec apparentions de calendrier) et aux couleurs.

La question de la compatibilité reste un casse-tête malheureusement. Les développeurs doivent faire face au redoutable Internet Explorer, qui, comme vous l’aurez deviné, ne marche pas toujours très bien pour les formulaires - même dans la dernière version bêta disponible de IE9. Alors pour les anciennes versions de IE …

Néanmoins, nous voulons utiliser ces nouvelles fonctionnalités, et nous le ferons ! Dans ce tutoriel, nous allons examiner quelques-uns de ces nouveaux éléments. Nous allons vérifier si le navigateur charge ces fonctionnalités, et si non, fournir des solutions de repli en utilisant le CSS et le JavaScript.

Tutoriel Comment faire un formulaire HTML5

Voici l'image du résultat final

Dans ce tutoriel, nous allons créer un formulaire HTML5 pour les navigateurs modernes, tout en compensant pour les anciens navigateurs en utilisant les plugins jQuery, Webforms2, Modernizr.

Introduction

Nous allons créer un formulaire HTML5 avec les champs suivants :

  • Slider
  • Champ de texte avec l’attribut placeholder
  • Champ pour renseigner une URL
  • Champ pour renseigner une adresse  eMail
  • Champ réclamant un format numérique
  • Champ de date avec ouverture d’un calendrier
  • Champ de couleur en code hexadécimal

Le code HTML5 de base pour notre formulaire

Pour commencer, nous allons ouvrir notre éditeur de texte et lui ajouter les lignes de codes suivantes :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Demo HTML5 de formulaire complet</title>
	<!-- HTML5 Shim -->
	<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<h1>Démo HTML5 de formulaire complet</h1>
 
<form>
 <fieldset>
 
  <label for="range">Slider</label>
  <input type="range" name="range" />
 
  <label for="text">Champ de texte avec placeholder</label>
  <input type="text" name="text" id="text">
 
  <label for="url">Champ d'Url</label>
  <input type="url" id="url" name="url">
 
  <label for="email">Champ Email</label>
  <input type="email" id="email" name="email">
 
  <label for="numeric">Format numerique</label>
  <input type="number" name="numeric" id="numeric">
 
  <label for="date">Format date</label>
  <input type="date" name="date" id="date">
 
  <label for="color-picker">Choix de la couleur</label>
  <input type="color" name="color-picker" id="color-picker">
 
  <button type="submit" class="boutonSubmit" role="button" aria-disabled="false">
    Soumettre le formulaire
  </button></p>
 
 </fieldset>
</form>
 
<footer>
  <p>Copyright - <a href="http://www.41mag.fr">41Mag</a></p>
</footer>
 
</body>
</html>

Le code ci-dessus est suffisamment simple à comprendre. Aux lignes 6 et 7, nous incorporons le script JavaScript entre les balises <head> pour qu’Internet Explorer reconnaisse les balises HTML5 qu’il ne connaitrait pas (suivant sa version). En savoir plus sur HTML5 Shim. Nous avons également définis un type pour chaque élément INPUT.

Inclure les plugins Modernizr et Webforms2 pour la compatibilité et la bibliothèque jQuery

Nous commencerons par relié la bibliothèque jQuery et jQuery UI à notre formulaire HTML5. Veuillez placer les lignes de code ci-dessous entre les balises <head>.

1
2
3
<!-- jQuery  -->
<script src="js/jquery-1.4.3.min.js"></script>
<script src="js/jquery-ui-1.8.5.min.js"></script>

Le plugin Modernizr

Nous allons fournir des solutions alternative seulement pour les navigateurs qui ne prennent pas en charge les nouveaux éléments de formulaire HTML5, ou certaines parties d’entre eux. Nous allons utiliser la célèbre bibliothèque Modernizr.

Modernizr est une petite bibliothèque JavaScript qui permet de tester le navigateur en cours contre une pléthore de fonctionnalités HTML5 et CSS3. Téléchargez le script et reliez-le à votre formulaire HTML5 en insérant les lignes de code ci-dessous entre les balises <head>.

1
2
<!-- Modernizr -->
<script src="modernizr.js"></script>

Le plugin Webforms2

Webforms2 est une bibliothèque JavaScript créer par Weston Ruter, qui assure une compatibilité des formulaires en HTML5 entre les différents navigateurs, même les plus anciens.

Téléchargez le script Webforms2 et reliez-le à votre formulaire HTML5 en insérant les lignes de code ci-dessous entre les balises <head>.

1
2
<!-- Webforms2 -->
<script src="webforms2/webforms2-p.js"></script>

Le slider

L’entrée de type range, ou slider, est un contrôle permettant d’obtenir une valeur.

Les attributs min, max, step et value

Les attributs d’entrée min, max et step spécifient des contraintes pour certains contrôle de formulaires, tels que le sélecteur date, number et slider, ou range. Vous pouvez sûrement deviner le but de min et max à partir de leurs noms. L’attribut step spécifie la plage multiples pour chaque clic, ou «étape». Si la valeur de l’étape est de 2, les valeurs admises pourraient être égal à 0, 2, 4, et ainsi de suite …

L’attribut value définit la valeur par défaut.

1
2
<label for="range">Slider</label>
<input type="range" name="range" id="slider" class="slider" min="0" max="5" step="1" value="0" />

Ces attributs sont uniquement pris en charge par les navigateurs Opera et Webkit en ce moment, et sont mises en œuvre, comme solution de secours pour les autres navigateurs, par Webforms2.

slider

Un slider plus réactif grâce au JavaScript

A l’aide du JavaScript, nous allons connaitre la valeur exact sélectionné. En bougeant le curseur du slider, la nouvelle valeur devra s’afficher immédiatement à coté de celui-ci. Voici le code complet pour l’entré de type range – ou spider :

1
2
3
4
5
6
7
8
9
<label for="range">Slider</label>
<input type="range" name="range" id="slider" class="slider" min="0" max="5" step="1" value="0" style="width:220px;" onchange="showValue(this.value)" />
<span id="range">0</span>
<script type="text/javascript">
function showValue(newValue)
{
   document.getElementById("range").innerHTML=newValue;
}
</script>

Les champs de textes, d’eMails et d’URL avec l’attribut placeholder

Le champ de texte avec l’attribut placeholder

L’attribut placeholder est une fonction commune réaliser auparavant en JavaScript. Il ajoute un élément d’information sur le champ, comme une brève description, qui disparaît lorsque focus arrive sur le champ.

1
2
<label for="text">Champ de texte avec placeholder</label>
<input type="text" name="text" id="text" placeholder="Inserer votre texte ici">

Cet attribut est pris en charge par le dernier Firefox et les navigateurs Webkit version Beta. Pour imiter le comportement dans les anciens navigateurs, vous pouvez utiliser le plugin jQuery Placehold. Téléchargez le script et reliez-le à votre formulaire HTML5 en insérant les lignes de code ci-dessous entre les balises <head>.

1
2
<!-- jQuery Placehold -->
<script src="jquery.placehold-0.2.min.js"></script>

Les champs réservés aux eMails et aux URLs

Les deux types d’entrées, url et email, sont utilisées à des fins de validation. Si l’utilisateur entre une valeur différente du modèle demander, le champ restera vide.

Ils peuvent être particulièrement utiles dans les navigateurs mobiles, où la disposition du clavier à l’écran peut être changé en fonction de la zone ciblée. Cela est déjà mis en œuvre dans Safari sur iOS (iPhone, iPad, iPod), et certaines versions d’Android.

1
2
<label for="email">Champ Email</label>
<input type="email" id="email" name="email" placeholder="votre@dresse.fr" required>

L’attribut required rend le champ obligatoire. Au lieu d’utiliser le JavaScript pour rendre certains champs obligatoires, maintenant on peut facilement utiliser cet attribut. Pour les navigateurs qui ne le prennent pas en charge, nous utilisons l’alternative Webforms2. Puisque nous l’avons inclus dès le début, il n’y a rien à craindre.

Attention : Assurez-vous d’assigner un attribut name à vos éléments de formulaire, ou l’attribut required ne prendra pas effet.

1
2
<label for="url">Champ d'Url</label>
<input type="url" id="url" name="url" placeholder="http://www.41mag.fr">

L’attribut Pattern, comment créer un modèle d’entrée

Bien que nous ne l’utilisions pas dans notre exemple de formulaire, je tenais à vous présenter l’attribut pattern. L’attribut pattern est utilisé pour la validation d’un champ et accepte les valeurs que si elles correspondent à un format spécifique, défini avec les expressions régulières. Si la valeur saisie ne correspond pas au modèle, le formulaire ne se soumettra pas.

Par exemple, pour valider un numéro de téléphone, nous aurions pu utiliser le modèle ci-dessous :

1
<input type="text" name="Tel" pattern="^[0-9]{10}$">

Le champ INPUT au format numérique

Demander une valeur numérique peut s’avérer une opération fastidieuse et nécessitait l’intervention du Javascript par exemple. C’est pourquoi, le HTML5 propose un contrôle de formulaire distinct qui traite spécifiquement les chiffres : numeric spinner, aussi appelé le numeric stepper.

numeric spinner

1
2
<label for="numeric">Format numerique</label>
<input type="number" name="numeric" id="numeric" value="2">

Les lignes de code ci-dessus sont suffisemment clair pour ne pas être expliqués. Par soucis de compatibilité avec les anciens navigateurs, et vue que jQuery ne fournit pas de contrôle numérique, nous utiliserons un plugin jQuery par Brant Burnett, construit comme un widget jQuery UI.

Nous allons construire la fonction pour créer le spinner, et le tester avec Modernizr, et joindre la fonction $(document).ready.

Parce que les entrées numériques prennent également en charge les attribut min, max et step, nous les obtenons et nous les utilisons en tant que paramètres pour initialiser le plugin numeric spinner.

Placé le script suivant entre les balises <script> dans le corps du document (entre les balises <body>).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var initSpinner = function() {
    $('input[type=number]').each(function() {
        var $input = $(this);
        $input.spinner({
            min: $input.attr('min'),
            max: $input.attr('max'),
            step: $input.attr('step')
        });
    });
};
 
if(!Modernizr.inputtypes.number){
    $(document).ready(initSpinner);
};

Le champ Date avec Calendrier

Il existe six types d’entrée pour servir de sélecteurs de date :

  • date
  • mois
  • semaine
  • temps
  • datetime
  • datetime-locale
1
2
3
4
5
6
<input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime">
<input type="datetime-local">

Dans le cas de notre exemple, nous utiliserons le type date.

1
2
<label for="date">Format date</label>
<input type="date" name="date" id="date" value="2012-03-01">

Nous allons créer une solution alternative pour les navigateurs ne prennent pas en charges cette fonction date, à l’aide du script Datepicker jQuery UI. Télécharger le dossier (contenant les scripts et les images) et reliez-le à votre formulaire HTML5.

Comme pour l’exemple précédent concernant les types d’entrées numériques, nous allons construire notre fonction. Placé le script suivant entre les balises <script> dans le corps du document (entre les balises <body>).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var initDatepicker = function() {
    $('input[type=date]').each(function() {
        var $input = $(this);
        $input.datepicker({
            minDate: $input.attr('min'),
            maxDate: $input.attr('max'),
            dateFormat: 'yy-mm-dd'
        });
    });
};
 
if(!Modernizr.inputtypes.date){
    $(document).ready(initDatepicker);
};

Date

L’élément choix de couleur

À l’heure ou j’écris ce tutoriel, aucun navigateur ne fournit un support pour l’entrée couleur. Donc, jusqu’à ce qu’ils se mettent à jour, ils auront tous besoin d’utiliser notre technique alternative.

1
2
<label for="color-picker">Choix de la couleur</label>
<input type="color" name="color-picker" id="color-picker" value="ff0000">

Nous allons utiliser le plugin ColorPicker jQuery. Veuillez télécharger le script et les dossier inclus. Les images seront reliées grâce au CSS que vous allez lui aussi à votre formulaire HTML5.

1
2
3
<!-- jQuery Color Picker -->
<link rel="stylesheet" href="colorpicker.css">
<script src="colorpicker.js"></script>

Comme pour l’exemple précédent, nous allons construire notre fonction. Placé le script suivant entre les balises <script> dans le corps du document (entre les balises <body>).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var initColorpicker = function() {
    $('input[type=color]').each(function() {
        var $input = $(this);
        $input.ColorPicker({
            onSubmit: function(hsb, hex, rgb, el) {
                $(el).val(hex);
                $(el).ColorPickerHide();
            }
        });
    });
};
 
if(!Modernizr.inputtypes.color){
    $(document).ready(initColorpicker);
};

colorPicker

Et pour finir, un peu de style CSS

Il ne vous reste plus qu’à mettre notre en page notre Formulaire HTML5. Pour ce faire nous utiliseront des feuilles de style, dits CSS. Nous laissons libre court à votre imagination pour cette mise en page.

Conclusion

Nous avons appris dans ce tutoriel à créer un formulaire complet en HTML5 et fournir une solution alternative pour les navigateurs ne prennent pas en charges certaines fonctions. Si certains essayent de vous faire peur avec l’utilisation trop tôt du HTML5, ne faites pas attention à eux, commencer à utiliser les nouveaux outils impressionnants que vous avez à votre disposition dès aujourd’hui !

Voici le code complet de notre formulaire :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Demo HTML5 de formulaire complet</title>
	<!-- HTML5 Shim -->
	<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	<!-- Modernizr -->
	<script src="modernizr.js"></script>
	<!-- Webforms2 -->
	<script src="webforms2/webforms2-p.js"></script>
	<!-- jQuery  -->
	<script src="js/jquery-1.4.3.min.js"></script>
	<script src="js/jquery-ui-1.8.5.min.js"></script>
	<!-- Feuille de style -->
	<link rel="stylesheet" href="styleFormulaire.css">
	<!-- jQuery Color Picker -->
	<link rel="stylesheet" href="colorpicker.css">
	<script src="colorpicker.js"></script>
	<!-- jQuery Numeric Spinner -->
	<script src="spinner.js"></script>
 
	<!-- jQuery Placehol -->
	<script src="jquery.placehold-0.2.min.js"></script>
 
	<!-- Demo page layout  -->
	<link rel="stylesheet" href="html5forms.layout.css">
	<script src="html5forms.js"></script>
	<script src="html5forms.fallback.js"></script>
 
 
</head>
<body>
    <!-- Script DATE  -->
	<script>
	var initDatepicker = function() {
    $('input[type=date]').each(function() {
        var $input = $(this);
        $input.datepicker({
            minDate: $input.attr('min'),
            maxDate: $input.attr('max'),
            dateFormat: 'yy-mm-dd'
        });
    });
};
 
if(!Modernizr.inputtypes.date){
    $(document).ready(initDatepicker);
};
  </script>
 
  <!-- Script COLOR  -->
  <script>
  var initColorpicker = function() {
    $('input[type=color]').each(function() {
        var $input = $(this);
        $input.ColorPicker({
            onSubmit: function(hsb, hex, rgb, el) {
                $(el).val(hex);
                $(el).ColorPickerHide();
            }
        });
    });
};
 
if(!Modernizr.inputtypes.color){
    $(document).ready(initColorpicker);
};
  </script>
 
 
 
 
 
	<h1>
     	Démo HTML5 de formulaire complet
	</h1>
 
 
	<form>
	<fieldset>
 
 
 
		<p><label for="range">Slider</label>
		<input type="range" name="range" id="slider" class="slider" min="0" max="5" step="1" value="0" style="width:220px;" onchange="showValue(this.value)" />
<span id="range">0</span>
<script type="text/javascript">
function showValue(newValue)
{
	document.getElementById("range").innerHTML=newValue;
}
</script>
 
		<p><label for="text">Champ de texte avec placeholder</label>
		<input type="text" name="text" id="text" placeholder="Inserer votre texte ici"></p>
 
		<p><label for="url">Champ d'Url</label>
		<input type="url" id="url" name="url" placeholder="http://www.41mag.fr" required></p>
 
		<p><label for="email">Champ Email</label>
		<input type="email" id="email" name="email" placeholder="votre@dresse.fr" required></p>
 
		<p><label for="numeric">Format numerique</label>
		<input type="number" name="numeric" id="numeric" value="2"></p>
 
		<p><label for="date">Format date</label>
		<input type="date" name="date" id="date" value="2012-03-01"></p>
 
		<p><label for="color-picker">Choix de la couleur</label>
		<input type="color" name="color-picker" id="color-picker" value="ff0000"></p>
 
		<p class="centerAlign"><button type="submit" class="boutonSubmit" role="button" aria-disabled="false">
			Soumettre le formulaire
		</button></p>
		<div class="clear"></div>
	</fieldset>
	</form>
 
	<footer>
		<p>
      		Copyright - <a href="http://www.41mag.fr">41Mag</a>
		</p>
	</footer>
 
</body>
</html>

[cadreHTML5]

Article du même thême : ..

  • http://www.facebook.com/people/Céline-Guilbert/1532676738 Céline Guilbert

    Très utile

  • Pingback: Bien référencer son site Internet

  • Amasiaj2d

    Ten mlay be mihitsy ty tuto ty
     

  • http://www.facebook.com/franck.sedillo.3 Franck Sedillo

    Bonjour,
    Tuto très complet. Merci !
    Une petite question : je n’ai pas trouvé comment modifier le libellé de l’erreur… »Veuillez compléter… ». Je souhaiterais le mettre en anglais ?
    Merci
    @plus

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.