Les formulaires sont désormais disponibles en AMP HTML !

Mathieu Chartier Développement 3 commentaires

Le blog officiel du projet AMP (Accelerated Mobile Pages) a officialisé la prise en compte des formulaires le 31 octobre 2016. Il s'agissait d'un des plus gros manques de cette réécriture d'HTML qui devrait ravir plus d'un webmaster. Le fonctionnement est un peu différent des autres balises AMP HTML et se limite aux balises <form>, <textarea>, <label>, <select>, <option> et quelques <input />...

L'objectif d'AMP étant d'accélérer considérablement les processus tout en allégeant les sites web, les concepteurs du projet ont pensé à tout comme nous le verrons par la suite. Il convient d'ajouter un script "amp-form" pour activer la prise en compte des formulaires, donc rien de très compliqué jusque-là (c'est ce que l'on fait pour toutes les bases AMP spécifiques) :

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

Dans un deuxième, temps, il suffit de mettre en forme un formulaire comme habituellement en HTML, avec les balises <form>...</form> pour encadrer les champs, et des balises <label> et <input /> pour formaliser nos champs de texte, etc. Sachez que les champs de zone de texte (<textarea>) ou de liste (<select>) sont également valides à ce jour. Il ne faut changer que quelques paramètres pour s'assurer de la compatibilité du formulaire avec AMP. Tout est décrit dans la documentation, ici et !

Ce qui est très intéressant, c'est que les formulaires AMP possèdent déjà un système de "popup" de succès ou d'erreur lors de la validation des formulaires (voir capture ci-dessous). Il est également possible de valider les champs directement en POST ou en GET (méthodes les plus courantes en HTML) mais aussi via un objet XHR (Ajax). Seules quelques contraintes s'ajoutent dans ce second cas, mais rien de bien méchant.

Gestion des erreurs avec les formulaires AMP HTML (amp-form)

Ce qu'il faut souligner, c'est l'importance des attributs à mettre en place pour que le code AMP HTML soit valide et fonctionnel. Moi qui critiquait dernièrement la complexité de mise en place des codes, j'ai l'impression d'avoir été entendu. Ici, pour une fois, point de balise <amp-form> comme nous aurions pu l'imaginer, ce sont quelques attributs spécifiques ainsi que le script général qui suffisent à faire fonctionner les formulaires. Quel plaisir d'avoir assez peu de choses à apprendre et à mettre en oeuvre, notamment dans le cas des migrations HTML vers AMP HTML...

Dans la balise <form>, voici ce qu'il faut respecter :

  • Attribut "target" obligatoire avec les valeurs "_blank" ou "_top".
  • Attribut "action" autorisé si la méthode GET est utilisée, sinon non (donc pas pour la méthode POST !).
  • Attribut "action-xhr" requis en cas de méthode POST en Ajax, autorisé si c'est GET.
  • Les attributs "form-action", "formtarget", "formmethod" sont interdits.

Je vous épargne l'attribut "custom-validation-reporting" en cours d'élaboration qui permettra d'élaborer des types de validation à l'avenir. C'est très intéressant notamment pour créer des messages d'erreur spécifique pour des champs en particulier.

Concernant les champs, presque l'ensemble des types de la balise <input /> sont autorisés et valides, hormis "image", "button", "file" et "password". Si cela peut sembler dommageable (on pense notamment à "password" pour les espaces membres, etc.), cela peut s'expliquer dans un premier temps par la prise en compte essentiellement des champs de texte "classiques" ("file" impose un traitement côté serveur en amont en général, etc.). Toutefois, avec des champs de texte ainsi que les autres balises HTML, nous avons de quoi faire dans un premier temps !

AMP a également ajouté trois attributs d'événements pour afficher ou non des messages de validation. Pour ce faire, il convient d'ajouter l'attribut "on" dans la balise <form> :

  • submit : lors de la soumission du formulaire ;
  • submit-success : lorsque le formulaire est soumis et validé ;
  • submit-error : lorsque le formulaire est soumis mais invalide.

Enfin, sachez que les concepteurs d'AMP ont vraiment pensé à tout puisque des classes CSS sont déjà prévues pour styliser les messages de succès ou d'erreur (".amp-form-submitting", ".amp-form-submit-success" et ".amp-form-submit-error") mais également des pseudos-classes de la future spécification CSS 4.

3 commentaires

  • Karadocteur dit :

    Ah cool ! C'était une des seules choses qui me rebutais pour coder une version AMP de mes articles sur mon site pronosphere.fr ! Je trouve important d'associer mes articles à un formulaire d'inscription pour ma newsletter...
    Merci de l'information en tout cas ! :D

  • Scam34 dit :

    Super article et surement le plus précis du Net (bravo).
    Même s'il reste encore un peu difficile pour des novices... il n'y a d’ailleurs aucun vrais tuto explicite sur le net.

    Pour ceux qui n'utilisaient que HTML et PHP (sans java script) il y a des notion un peu compliquer à appréhender au niveau du processus.

    Un formulaire PHP basique c'était simple -> je valide -> je récupère mon formulaire.

    Je ne comprend pas l'étape submit-success / submit-error

    1*/ pouvez-vous l'expliquer (de façon schématique, basique) ?
    2*/ action-xhr peut-il pointer vers la même page que le formulaire ou c'est forcement un fichier externe...
    3*/ Il y a aussi des notions qui ne sont pas abordées:
    header("Access-Control-Allow-Origin: ....
    header("Access-Control-Allow-Credentials: ....
    header("Access-Control-Expose-Headers: ....
    header("AMP-Access-Control-Allow-Source-Origin: ....
    et de transmission des données du formulaire en JSON...

    • Bonjour,
      Je ne mets pas en place de formulaires AMP de mon côté, mais je vais tenter d'expliquer ce que je comprends avec la documentation ou la logique d'AMP. Voici donc mes réponses (les plus précises possible) à vos questions :
      1/ La documentation donne des exemples d'usage de submit-success et submit-error. Il faut en fait ajouter des balises ‹div› contenant une balise ‹template type="amp-mustache"› afin d'afficher des messages d'erreur ou de succès propres à AMP. C'est la réponse Ajax du traitement du formulaire qui va permettre d'afficher la réponse dans l'un ou l'autre des blocs créés.
      2/ "action-xhr" fonctionne comme le classique "action", sauf qu'il vise une requête Ajax à terme. Donc en théorie, vous devriez envoyer vers une page externe plutôt pour le traitement Ajax, cela me semble plus opportun. Toutefois, si vous précisez target="_top", c'est censé ouvrir dans la même fenêtre donc cela montre bien qu'il est possible de faire le traitement dans la même page. ;-)
      3/ Ces points ne sont pas des spécificités des formulaires AMP HTML, c'est pourquoi ce n'est pas présenté dans cette brève SEO. Si vous lisez la documentation sur les formulaires, ces en-têtes ne sont même pas évoqués.

  • Déposer un commentaire

    L'adresse de messagerie ne sera pas publiée.* Champs obligatoires