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
required
sur l’élément<label />
etrequired-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
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-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
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.