Utiliser un CMSParmi les nombreuses nouveautés des formulaires avec le HTML 5, on des attributs tels que Delete ou Update permettant d'effacer les valeurs entrées ou de réinitialiser le formulaire. Mais l'une des principales innovations est qu'on peut mettre les éléments d'un formulaire n'importe où sur la page. Autrefois, on devait les mettre obligatoirement dans la balise Form pour que cela soit pris en compte. Dans l'ère HTML 5, vous pouvez utiliser un code tel que le suivant :
Les développeurs en HTML 4 crieront à l'hérésie en voyant ce code, mais il est parfaitement valide en HTML 5. Ainsi, on a l'élement Form, mais l'attribut Textarea est à l'extérieur du formulaire. Mais il sera valide, car l'attribut form permet de l'assigner à un formulaire donné. De ce fait, vous pouvez placer les différents éléments sur l'entête, la navigation, le pied de page, mais ils pourront toujours être validés avec un seul formulaire. En terme de mise en page et de confort d'utilisateur, c'est une véritable révolution. Mais c'est loin d'être la seule nouveauté du formulaire en HTML 5.
Les formulaires en HTML 5 permettent de valider directement les données dans le navigateur. Le premier attribut est indiquant que le champs doit obligatoirement contenir une adresse mail. Notez que le formulaire ne peut pas vérifier si c'est une vraie adresse ou non, mais il s'assure simplement de sa mise en forme. Ainsi, on n'a plus besoin d'utiliser le JavaScript pour inclure le symbole @ dans le champs. Ensuite, on a le champs qui permet de vérifier que l'URL est valide. Le traitement se fait à la volée et le navigateur Opera va plus loin en fournissant des URL à partir de l'historique de l'utilisateur. Notez qu'il n'est pas nécessaire que l'URL pointe vers une page, car on peut aussi ajouter d'autre protocoles.
Le champ Date avec est l'un des plus pratiques. De nombreux sites ont besoin qu'on fournisse des dates, par exemple, pour réserver un billet d'avion ou une table au restaurant. Avec ce champ, le navigateur va afficher un calendrier et on sélectionne simplement la date voulue. Ce champ sera primordial pour créer des pages sur les mobiles. Cela facilitera grandement la vie de l'utilisateur. De même, vous pouvez entrer un champ spécial pour l'heure, la semaine et le mois. Un autre champ pratique est Tel pour un numéro de téléphone. La syntaxe est simplement " tel " pour demander un numéro de téléphone. Il donnera tout son potentiel sur un téléphone, car ce dernier connait automatiquement son numéro. De ce fait, dès que vous arrivez sur une page qui contient ce champ, votre numéro sera fourni automatiquement. Enfin, il arrive qu'on ait besoin que l'utilisateur choisisse une couleur sur votre page. Autrefois, vous deviez passer des heures à créer un sélecteur de couleur en JavaScript, mais c'est de l'histoire ancienne. Vous mettez simplement le champ dans votre formulaire et le sélecteur de couleur apparaitra automatiquement.
Il y a encore des dizaines de nouveaux attributs avec le formulaire en HTML 5. On peut citer le Placeholder qui permet d'afficher un texte par défaut ou encore l'Autofocus pour sélectionner automatiquement le formulaire. Vous pouvez aussi créer un glisseur (Slider) avec le champ . Evidemment, il faudra parfois combiner ces éléments avec le JavaScript pour qu'ils donnent leurs potentiels, mais ce sera minimal, car la plupart des tâches seront possibles avec le HTML 5. Un attribut important est Required que vous pouvez ajouter à n'importe quel champs. Comme son nom l'indique, il stipule que le champs est obligatoire. Par exemple, le code suivant :
Stipule que l'utilisateur doit fournir une adresse de mail pour que le formulaire soit valide. Et si vous combinez tous ces éléments ensemble, alors vous avez tous les ingrédients pour créer de superbes applications en HTML 5... sans écrire la moindre ligne en JavaScript !
Les développeurs en HTML 4 crieront à l'hérésie en voyant ce code, mais il est parfaitement valide en HTML 5. Ainsi, on a l'élement Form, mais l'attribut Textarea est à l'extérieur du formulaire. Mais il sera valide, car l'attribut form permet de l'assigner à un formulaire donné. De ce fait, vous pouvez placer les différents éléments sur l'entête, la navigation, le pied de page, mais ils pourront toujours être validés avec un seul formulaire. En terme de mise en page et de confort d'utilisateur, c'est une véritable révolution. Mais c'est loin d'être la seule nouveauté du formulaire en HTML 5.
Les nouveaux attributs du formulaire en HTML 5
Les formulaires en HTML 5 permettent de valider directement les données dans le navigateur. Le premier attribut est indiquant que le champs doit obligatoirement contenir une adresse mail. Notez que le formulaire ne peut pas vérifier si c'est une vraie adresse ou non, mais il s'assure simplement de sa mise en forme. Ainsi, on n'a plus besoin d'utiliser le JavaScript pour inclure le symbole @ dans le champs. Ensuite, on a le champs qui permet de vérifier que l'URL est valide. Le traitement se fait à la volée et le navigateur Opera va plus loin en fournissant des URL à partir de l'historique de l'utilisateur. Notez qu'il n'est pas nécessaire que l'URL pointe vers une page, car on peut aussi ajouter d'autre protocoles.
Le champ Date avec est l'un des plus pratiques. De nombreux sites ont besoin qu'on fournisse des dates, par exemple, pour réserver un billet d'avion ou une table au restaurant. Avec ce champ, le navigateur va afficher un calendrier et on sélectionne simplement la date voulue. Ce champ sera primordial pour créer des pages sur les mobiles. Cela facilitera grandement la vie de l'utilisateur. De même, vous pouvez entrer un champ spécial pour l'heure, la semaine et le mois. Un autre champ pratique est Tel pour un numéro de téléphone. La syntaxe est simplement " tel " pour demander un numéro de téléphone. Il donnera tout son potentiel sur un téléphone, car ce dernier connait automatiquement son numéro. De ce fait, dès que vous arrivez sur une page qui contient ce champ, votre numéro sera fourni automatiquement. Enfin, il arrive qu'on ait besoin que l'utilisateur choisisse une couleur sur votre page. Autrefois, vous deviez passer des heures à créer un sélecteur de couleur en JavaScript, mais c'est de l'histoire ancienne. Vous mettez simplement le champ dans votre formulaire et le sélecteur de couleur apparaitra automatiquement.
Exploiter les formulaires avec les applications
Il y a encore des dizaines de nouveaux attributs avec le formulaire en HTML 5. On peut citer le Placeholder qui permet d'afficher un texte par défaut ou encore l'Autofocus pour sélectionner automatiquement le formulaire. Vous pouvez aussi créer un glisseur (Slider) avec le champ . Evidemment, il faudra parfois combiner ces éléments avec le JavaScript pour qu'ils donnent leurs potentiels, mais ce sera minimal, car la plupart des tâches seront possibles avec le HTML 5. Un attribut important est Required que vous pouvez ajouter à n'importe quel champs. Comme son nom l'indique, il stipule que le champs est obligatoire. Par exemple, le code suivant :
Stipule que l'utilisateur doit fournir une adresse de mail pour que le formulaire soit valide. Et si vous combinez tous ces éléments ensemble, alors vous avez tous les ingrédients pour créer de superbes applications en HTML 5... sans écrire la moindre ligne en JavaScript !