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) :
|
1 2 3 4 5 6 7 8 9 10 11 |
<form id="" class="" method="" action=""> <div class="fieldset"> <h2 class="legend"></h2> <p class="form-instructions"></p> <p class="required"></p> <ul class="form-list"> </ul> </div> <div class="buttons-set"> </div> </form> |
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 :
|
1 2 3 4 5 6 7 8 9 10 11 |
<form id="" class="" method="" action=""> <fieldset class="fieldset"> <legend class="legend"></legend> <p class="form-instructions"></p> <p class="required"></p> <ul class="form-list"> </ul> </fieldset> <div class="buttons-set"> </div> </form> |
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) :
|
1 |
<form id="" class="scaffold-form" method="" action=""></form> |
Les différents champs
Les champs sont sémantiquement déclarés sous forme de liste :
|
1 2 3 |
<ul class="form-list"> <li>...</li> </ul> |
Champ texte unique
|
1 2 3 4 5 6 |
<li> <label for=""></label> <div class="input-box"> <input type="" class="" title="" value="" name="" id="" /> </div> </li> |
|
1 2 3 4 5 6 |
<li> <label class="required" for="[etiquette_du_champ]"><em>*</em>Last Name</label> <div class="input-box"> <input type="text" class="input-text validate-[etiquette_du_champ] required-entry" maxlength="255" title="Last Name" value="" name="[etiquette_du_champ]" id="[etiquette_du_champ]" /> </div> </li> |
- Les classes
requiredsur l’élément<label />etrequired-entrysur 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
|
1 2 3 4 5 6 |
<li> <label class="required" for="[etiquette_du_champ]"><em>*</em>Password</label> <div class="input-box"> <input type="password" class="input-text required-entry validate-[etiquette_du_champ] validation-passed" title="Password" id="[etiquette_du_champ]" name="[etiquette_du_champ]" /> </div> </li> |
Une classe .validation-passed est ajoutée à l’élément <input />.
Champ de texte unique dont la validation a échoué
|
1 2 3 4 5 6 7 |
<li> <label for="[etiquette_du_champ]">Has failed</label> <div class="input-box"> <input type="text" class="input-text required-entry validate-[etiquette_du_champ] validation-failed" id="[etiquette_du_champ]" title="[etiquette_du_champ]" name="[etiquette_du_champ]" /> <div id="advice-required-entry-[etiquette_du_champ]" class="validation-advice">This is a required field.</div> </div> </li> |
- Une classe
.validation-failedest 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<li class="fields"> <div class="customer-name"> <div class="field name-firstname"> <label class="required" for="firstname"><em>*</em>First Name</label> <div class="input-box"> <input type="text" class="input-text required-entry" maxlength="255" title="First Name" value="" name="firstname" id="firstname" /> </div> </div> <div class="field name-lastname"> <label class="required" for="lastname"><em>*</em>Last Name</label> <div class="input-box"> <input type="text" class="input-text required-entry" maxlength="255" title="Last Name" value="" name="lastname" id="lastname" /> </div> </div> </div> </li> |
Groupe de champs texte alignés horizontalement (exemple : affichage d’une date)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<li class="fields"> <div class="field"> <label class="required" for="billing:month"><em>*</em>Date de naissance</label> <div class="input-box customer-dob"> <div class="dob-day"> <input type="text" class="input-text validate-custom" title="Jour" value="" name="billing[day]" id="billing:day"> <label for="billing:day">JJ</label> </div> <div class="dob-month"> <input type="text" class="input-text validate-custom" title="Mois" value="" name="billing[month]" id="billing:month"> <label for="billing:month">MM</label> </div> <div class="dob-year"> <input type="text" class="input-text validate-custom" title="Année" value="" name="billing[year]" id="billing:year" autocomplete="off"> <label for="billing:year">AAAA</label> </div> <div style="display:none;" class="dob-full"> <input type="hidden" name="billing[dob]" id="billing:dob"> </div> <div style="display:none;" class="validation-advice"></div> </div> </li> |
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.