Étiquette : formulaires

[Magento 2] Des cases à cocher et des boutons radio sexy dans vos formulaires avec le markup HTML du core

ATTENTION: les input et label doivent respectivement avoir des attributs for et id ayant une valeur identique afin que les styles fonctionnent correctement!

[Magento 2] Gérer l’affichage des formulaires avec les mixins LESS de la Magento UI Library

Documentation officielle: Magento UI Library – Forms mixins.

Bonnes pratiques

Si vous avez simplement l’intention de changer les valeurs des variables existantes (regardez la doc, il y en a beaucoup, vous pouvez probablement vous en tirer sans aller plus loin que ça…) faites le dans le fichier _theme.less de votre thème.

Fields customization variables – The .lib-form-field() mixin variables

Libellés au-dessus des champs, une colonne

Libellés au-dessus des champs, deux colonnes

A savoir: lorsqu’on affiche le champ sur plusieurs colonnes, on peut utiliser la variable (appartenant au mixin) @_column-number (qui répond elle-même à la variable globale @form-field-column__number paramétrée par défaut à 2 pour modifier le nombre de colonnes sur lesquelles le formulaire va s’étaler.

Libellés à côté des champs, une colonne

Libellés à côté des champs, deux colonnes

A savoir: (je me répète…) lorsqu’on affiche le champ sur plusieurs colonnes, on peut utiliser la variable (appartenant au mixin) @_column-number (qui répond elle-même à la variable globale @form-field-column__number paramétrée par défaut à 2 pour modifier le nombre de colonnes sur lesquelles le formulaire va s’étaler.

[UI/UX Design] Retours d’expérience sur des plugins JavaScript améliorant l’ergonomie des formulaires

Champs <strong><code><input type="date" />: datepickers

Flatpickr

  • Utilisé en prod: Oui
  • Version utilisée: v4.6.1 (dernière en date le 04/07/2019)
  • Compatibilité approuvée avec jQuery version: 1.10.2

Plugin Flatpickr: astuces d’utilisation

Plugin Flatpickr: problèmes rencontrés et solutions (troubleshooting)

Ne pas utiliser d’input type= »date »

L'input type="date" fera apparaître le datepicker natif du navigateur en plus de celui du plugin Flatpickr. Il faut utiliser input type="text".

Conflits avec la librairie JS Prototype et l’utilisation par Flatpickr de la méthode .map()

Merci Kévin pour avoir remonté le problème et fourni une solution 🙂

Les sources de Flatpickr utilisent la méthode .map() qui génère des conflits lorsque la librairie JS Prototype est également chargée dans la page. C’est le cas, notamment, de tous les projets Magento 1.9.x.

Il faut modifier le code source de Flatpickr comme suit (ici, la version 4.6.1 minifiée). Repérer les 3 lignes suivantes (269-271 normalement) :

…et les remplacer par:

Champs <input type="tel" />: téléphone

International Telephone Input

  • Utilisé en prod: Oui (https://www.stock-booking.com/ – Formulaire de demande de devis accessible depuis les fiches produit/entrepôt)
  • Version utilisée: v16.0.0 (et plus précisément, le build jQuery)
  • Compatibilité approuvée avec jQuery version: 1.10.2

Plugin : astuces d’utilisation

Plugin : problèmes rencontrés et solutions (troubleshooting)

  • Version utilisée: ()
  • Compatibilité approuvée avec jQuery version: 1.10.2
  • Plugin : astuces d’utilisation

    Plugin : problèmes rencontrés et solutions (troubleshooting)

    [Change 3.6.x] Un modèle pour créer des formulaires spés

    form.js

    [Magento] Formulaires : anatomie de l’ossature HTML et taxonomie des classes CSS standard

    Simulation : http://jsfiddle.net/frontenddeveloper/d205ar7j/10/ (toujours vérifier la dernière update).

    Squelette général

    Obtenir une ossature standard de formulaire (affichage des étiquettes au-dessus des champs qui leur sont associés) :

    Les libellés des classes parlent d’eux-mêmes. .fieldset et .legend reprennent le nom des balises HTML bien connues (la pratique est mauvaise d’un point de vue sémantique, mais c’est défini comme ça…), .form-instructions permet de laisser à l’utilisateur quelques instructions pour bien remplir son formulaire, .required pour le traditionnel message « les champs marqués d’une étoile * doivent être renseignés! », .form-list embarque la liste des champs qui constituent le formulaire et .buttons-set vous servira à englober les boutons d’annulation, validation, etc..

    Pour information, une amélioration sémantique par rapport au standard en introduisant les éléments <fieldset /> et <legend /> semble possible sans casser tout l’affichage à condition de conserver les classes .fieldset et .legend :

    Simulation : http://jsfiddle.net/frontenddeveloper/d205ar7j/11/.

    Obtenir une ossature de formulaire avec des étiquettes alignées sur les champs associés en ajoutant la classe .scaffold-form à l’élément <form /> (voir ici pour plus d’information sur la mise en place et l’utilité de cet affichage) :

    Les différents champs

    Les champs sont sémantiquement déclarés sous forme de liste :

    Champ texte unique

    • Les classes required sur l’élément <label /> et required-entry sur l’élément <input /> sont à mettre en place si le champ est à remplir obligatoirement.
    • La classe validate-[etiquette_du_champ] sur l’élément <input /> est facultative.

    Champ texte unique dont la validation a réussi

    Une classe .validation-passed est ajoutée à l’élément <input />.

    Champ de texte unique dont la validation a échoué

    • Une classe .validation-failed est ajoutée à l’élément <input />.
    • Un élément #advice-required-entry-[etiquette_du_champ] apparaît immédiatement après l’élément <input /> auquel il se rapporte pour donner un complément d’information sur le mode de saisie de celui-ci. Notez que cet élément possède aussi une classe .validation-advice.

    Groupe de champs texte empilés

    Groupe de champs texte alignés horizontalement (exemple : affichage d’une date)

    Les boutons

    Les messages d’erreur

    Scaffold forms

    scaffold n (around building) (Construction) échafaudage nm.

    Documentation officielle : Scaffold Forms – Magento CE 1.9 and EE 1.14 Responsive Web Design Developer’s Guide.

    Le thème responsive (rwd) de Magento est livré avec le fichier skin/frontend/rwd/default/scss/scaffold-forms.scss qui embarque des styles qui modifient le comportement standard des formulaires en affichant les étiquettes à gauche des champs qui leur sont associés sur les viewports les plus larges (en opposition à un affichage au-dessus des champs). Cet affichage à pour vocation de rendre les formulaires longs (par exemple, l’étape du tunnel d’achat où il faut renseigner ses informations de facturation) moins intimidants pour les utilisateurs.

    Cependant, ces styles ne sont pas actifs par défaut parce que le thème responsive a des contraintes de localisation (la longueur des étiquettes peut varier suivant la langue et, ainsi, impacter l’affichage).

    Le choix est laissé au développeur de les utiliser ou non. Pour ce faire, déplacer skin/frontend/rwd/default/scss/scaffold-forms.scss vers core/_scaffold-forms.scss et éditer scss/_core.scss pour l’inclure.

    [CSS] Des boutons radio et des cases à cocher de formulaire sexys et accessibles

    From scratch (pas de markup imposé)

    Simulation : http://jsfiddle.net/frontenddeveloper/3w5gvhyL/.

    Ressource externe (Accessible) : https://github.com/stevenMouret/css-custom-radio-checkbox.

    Markup formulaires Drupal 7

    Valable également si le module Webform est utilisé.