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.