Étiquette : formulaires

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

10/06/2020 / admin

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 core forms sexy inputs type=radio and type=checkbox
// !!! Will only work with Magento 2 core forms markup (replace "checkbox" with "radio" whenever needed) !!!
// <div class="field choice">
//     <input type="checkbox" id="is_subscribed" class="checkbox" />
//     <label for="is_subscribed" class="label"><span>Abonnez-vous à la lettre d’information</span></label>
// </div>
.field.choice {
    @custom-field_choice---width: 20px;
    position: relative;
    input[type="radio"],
    input[type="checkbox"] {
        position: absolute;
        left: -99999em;
        + .label {
            &:before {
                content: "";
                display: inline-block;
                vertical-align: bottom;
                margin-right: 8px;
                width: @custom-field_choice---width;
                height: @custom-field_choice---width;
                border: 1px solid @color_green;
                cursor: pointer;
                background: #fff;

                // Fine tuning vertical-align if needed
                //position: relative;
                //top: 2px;
            }
        }
        &:checked {
            + .label {
                &:before {
                    background: @color_green;
                }
            }
        }
    }
    input[type="radio"] {
        + .label {
            &:before {
                border-radius: @custom-field_choice---width;
            }
        }
    }
    input[type="checkbox"] {
        + .label {
            &:before {
                border-radius: @custom-field_choice---width/10;
            }
        }
    }
}

// Magento 2 core forms sexy inputs type=radio and type=checkbox

// !!! Will only work with Magento 2 core forms markup (replace "checkbox" with "radio" whenever needed) !!!

// <div class="field choice">

// <input type="checkbox" id="is_subscribed" class="checkbox" />

// <label for="is_subscribed" class="label"><span>Abonnez-vous à la lettre d’information</span></label>

// </div>

.field.choice {

@custom-field_choice---width: 20px;

position: relative;

input[type="radio"],

input[type="checkbox"] {

position: absolute;

left: -99999em;

+ .label {

&:before {

content: "";

display: inline-block;

vertical-align: bottom;

margin-right: 8px;

width: @custom-field_choice---width;

height: @custom-field_choice---width;

border: 1px solid @color_green;

cursor: pointer;

background: #fff;

// Fine tuning vertical-align if needed

//position: relative;

//top: 2px;

}

&:checked {

+ .label {

&:before {

background: @color_green;

}

input[type="radio"] {

+ .label {

&:before {

border-radius: @custom-field_choice---width;

}

input[type="checkbox"] {

+ .label {

&:before {

border-radius: @custom-field_choice---width/10;

}

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

10/06/2020 / admin

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

& when (@media-common = true) {
    .fieldset {
        > .field {
            .lib-form-field(
                @_type: block
            );
        }
    }
}

& when (@media-common = true) {

.fieldset {

> .field {

.lib-form-field(

@_type: block

);

}

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.

& when (@media-common = true) {
    .fieldset {
        > .field {
            .lib-form-field(
                @_type: block,
                @_column: true
            );
        }
    }
}

& when (@media-common = true) {

.fieldset {

> .field {

.lib-form-field(

@_type: block,

@_column: true

);

}

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

& when (@media-common = true) {
    .fieldset {
        > .field {
            .lib-form-field(
                @_type: inline
            );
        }
    }
}

& when (@media-common = true) {

.fieldset {

> .field {

.lib-form-field(

@_type: inline

);

}

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.

& when (@media-common = true) {
    .fieldset {
        > .field {
            .lib-form-field(
                @_type: inline,
                @_column: true
            );
        }
    }
}

& when (@media-common = true) {

.fieldset {

> .field {

.lib-form-field(

@_type: inline,

@_column: true

);

}

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

04/07/2019 / admin

Champs <input type="date" />: datepickers
- Flatpickr
Champs input type="tel": téléphone
- International Telephone Input

`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) :

return void 0 !== i.formatDate ? i.formatDate(e, t, a) : t.split("").map(function (t, n, o) {
    return h[t] && "\\" !== o[n - 1] ? h[t](e, a, i) : "\\" !== t ? t : ""
}).join("")

return void 0 !== i.formatDate ? i.formatDate(e, t, a) : t.split("").map(function (t, n, o) {

return h[t] && "\\" !== o[n - 1] ? h[t](e, a, i) : "\\" !== t ? t : ""

}).join("")

…et les remplacer par:

// Fallback for Flatpickr utilization on pages that load Prototype JS. Indeed, Prototype overide the map
// function and its implementation doesn't manage the thrird parameter.
if (typeof Prototype == "object") {
    return void 0 !== i.formatDate ? i.formatDate(e, t, a) : t.split("").map(function (t, n) {
        return h[t] && "\\" !== this[n - 1] ? h[t](e, a, i) : "\\" !== t ? t : ""
    }, t).join("")
} else {
    return void 0 !== i.formatDate ? i.formatDate(e, t, a) : t.split("").map(function (t, n, o) {
        return h[t] && "\\" !== o[n - 1] ? h[t](e, a, i) : "\\" !== t ? t : ""
    }).join("")
}

// Fallback for Flatpickr utilization on pages that load Prototype JS. Indeed, Prototype overide the map

// function and its implementation doesn't manage the thrird parameter.

if (typeof Prototype == "object") {

return void 0 !== i.formatDate ? i.formatDate(e, t, a) : t.split("").map(function (t, n) {

return h[t] && "\\" !== this[n - 1] ? h[t](e, a, i) : "\\" !== t ? t : ""

}, t).join("")

} else {

return void 0 !== i.formatDate ? i.formatDate(e, t, a) : t.split("").map(function (t, n, o) {

return h[t] && "\\" !== o[n - 1] ? h[t](e, a, i) : "\\" !== t ? t : ""

}).join("")

}

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

12/04/2019 / admin

<script change:javascript="head 'modules.form.lib.js.form'"></script>
<script change:javascript="head 'modules.website.lib.js.form-validation'"></script>
<script type="text/javascript" tal:condition="php: count(jQueryConditionalElement) GT 0">
	jQuery(document).ready(function() {
		<tal:block tal:repeat="jQuery jQueryConditionalElement" tal:content="jQuery" />
		// conditionalForm.handleCheckboxBoolean('groupe7026567', '7026573', "true");
	});
</script>
<script type="text/javascript">
	if (form_Validation instanceof Array) {
		form_Validation.push({id: "form_<form_id>_${configuration/getBlockId}", rules: ${form/getValidationRulesJSON}});
	}
</script>

<form method="post" action="#form_<form_id>_anchor" id="form_<form_id>_${configuration/getBlockId}" class="cmxform" enctype="multipart/form-data" novalidate="novalidate">

		<!--
			 NOTE: 
			 La classe '.isNode' se place sur un '.form-group' dont le champ 
			 (booléen ou <select>) est amené à est amené à diriger l'utilisateur vers différentes directions selon l'option choisie.
			 Elle symbolise le point de départ à partir duquel plusieurs chemins vont être possibles dans le formulaire.
		-->

		<!-- input type="text" -->
		<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">
			<div id="field<field_id>" class="">
				<label for="field_<field_id>" class="control-label required"></label>
				<input type="text" class="form-control" name="formParam[f<field_id>]" id="field_<field_id>" value="" />
				<p class="help-block"></p>
			</div>
		</div> -->

		<!-- input type="radio" -->
		<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">
			<p class="">Votre demande concerne:</p>
			<div id="field<field_id>" class="">
				<label class="" id="field_<field_id>_<incrementing_val>">
					<input name="formParam[f<field_id>]" type="radio" value="<incrementing_val>" />
					_label_text_here_
				</label>
			</div>
			<p class="help-block"></p>
		</div> -->

		<!-- input type="file" -->
		<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">
			<div id="field<field_id>" class="">
				<label for="field_<field_id>" class="control-label required"></label>
				<input type="file" class="form-control" name="formParam[f<field_id>]" id="field_<field_id>" value="" />
				<p class="help-block"></p>
			</div>
		</div> -->

		<!-- select -->
		<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">
			<div id="field<field_id>" class="">
				<label for="field_<field_id>" class="control-label required"></label>
				<select class="form-control" name="formParam[recipientGroups]" id="field_<field_id>">
					<option selected="selected" value="<field_id>_default">Sélectionner...</option>
					<option value="<field_id>_<incrementing_val>"></option>
					<option value="<field_id>_<incrementing_val>"></option>
				</select>
				<p class="help-block"></p>
			</div>
		</div> -->

		<!-- textarea -->
		<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">
			<div id="field<field_id>" class="">
				<label for="field_<field_id>" class="control-label required"></label>
				<textarea class="form-control" name="formParam[message]" id="field_<field_id>" cols="50" rows="10" />
				<p class="help-block"></p>
			</div>
		</div> -->

		<!-- Boutons -->
		<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">
			<input type="reset" class="btn btn-plus btn-poubelle" value="Annuler" />
			<input type="submit" class="btn btn-plus btn-commande" name="formParam[submit_<form_id>_<block_id>]" id="submit_<form_id>_<block_id>" value="Envoyer" />
		</div> -->
</form>

jQuery(document).ready(function() {

<tal:block tal:repeat="jQuery jQueryConditionalElement" tal:content="jQuery" />

// conditionalForm.handleCheckboxBoolean('groupe7026567', '7026573', "true");

});

</script>

if (form_Validation instanceof Array) {

form_Validation.push({id: "form_<form_id>_${configuration/getBlockId}", rules: ${form/getValidationRulesJSON}});

}

</script>

<form method="post" action="#form_<form_id>_anchor" id="form_<form_id>_${configuration/getBlockId}" class="cmxform" enctype="multipart/form-data" novalidate="novalidate">

<!--

NOTE:

La classe '.isNode' se place sur un '.form-group' dont le champ

(booléen ou <select>) est amené à est amené à diriger l'utilisateur vers différentes directions selon l'option choisie.

Elle symbolise le point de départ à partir duquel plusieurs chemins vont être possibles dans le formulaire.

-->

<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">

<div id="field<field_id>" class="">

<label for="field_<field_id>" class="control-label required"></label>

<input type="text" class="form-control" name="formParam[f<field_id>]" id="field_<field_id>" value="" />

</div>

</div> -->

<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">

<p class="">Votre demande concerne:</p>

<div id="field<field_id>" class="">

<input name="formParam[f<field_id>]" type="radio" value="<incrementing_val>" />

_label_text_here_

</label>

</div>

</div> -->

<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">

<div id="field<field_id>" class="">

<label for="field_<field_id>" class="control-label required"></label>

<input type="file" class="form-control" name="formParam[f<field_id>]" id="field_<field_id>" value="" />

</div>

</div> -->

<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">

<div id="field<field_id>" class="">

<label for="field_<field_id>" class="control-label required"></label>

<option selected="selected" value="<field_id>_default">Sélectionner...</option>

</select>

</div>

</div> -->

<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">

<div id="field<field_id>" class="">

<label for="field_<field_id>" class="control-label required"></label>

</div>

</div> -->

<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">

<input type="submit" class="btn btn-plus btn-commande" name="formParam[submit_<form_id>_<block_id>]" id="submit_<form_id>_<block_id>" value="Envoyer" />

</div> -->

</form>

form.js

var conditionalForm =
{
	// hide zone
	clearZone : function(zone, fieldid)
	{
		// remove .inPath class starting from closest .form-group.isNode
		// (aka "clean path")
		jQuery('#groupe'+fieldid+'.form-group.isNode')
			.nextAll()
			.removeClass('inPath')
			.hide();

		// hide selected zone
		jQuery('div#' + zone).each(function()
		{
			// hide sub zone that should be hidden
			jQuery(this).find('li.toHide').each(function()
			{
				jQuery(this).hide('normal');
			});
			jQuery(this).hide('normal');
		});


		// reset text inputs and selects, except radio and checkbox buttons
		jQuery('div#' + zone + ' :input').each(function()
		{
			jQuery(this).not(':radio, :checkbox').val('');
			jQuery(this).removeAttr('checked').removeAttr('selected');
		});
	},
	// manage fields controled by boolean checkbox inputs
	handleCheckboxBoolean : function(zone, fieldid, activationvalue)
	{
		jQuery('div#' + zone).css('display','none');
		jQuery('div#field' + fieldid + ' :checkbox').bind('click change', function()
		{
			if (jQuery(this).is(':checked') && jQuery(this).val() == activationvalue)
			{
				jQuery('div#' + zone).addClass('inPath').show('normal');
			}
			else
			{
				conditionalForm.clearZone(zone, fieldid);
			}
		}).change();
	},
	// manage fields controled by checkbox inputs
	handleCheckbox : function(zone, fieldid, activationvalue)
	{
		jQuery('div#' + zone).css('display','none');
		jQuery('label#' + fieldid + ' :checkbox').bind('click change', function()
		{
			if(jQuery(this).is(':checked'))
			{
				jQuery('div#' + zone).addClass('inPath').show('normal');
			}
			else
			{
				conditionalForm.clearZone(zone, fieldid);
			}
		}).change();
	},
	// manage fields controled by list
	handleList : function(zone, fieldid, activationvalue)
	{
		jQuery('div#' + zone).css('display', 'none');
		jQuery('select#' + fieldid).change(function ()
		{
			jQuery('select#' + fieldid + ' option:selected').each(function()
			{
				if (jQuery(this).val() == activationvalue)
				{
					jQuery('div#' + zone).addClass('inPath').show('normal');
				}
				else
				{
					conditionalForm.clearZone(zone, fieldid);
				}
	        });
		}).change();
	},
	// manage fields controled by radio inputs
	handleRadio : function(zone, fieldid, activationvalue)
	{
		jQuery('div#' + zone).css('display', 'none');
		jQuery('div#field' + fieldid + ' :radio').bind('click change', function()
		{
			if (jQuery(this).is(':checked'))
			{
				if(jQuery(this).val() == activationvalue)
				{
					jQuery('div#' + zone).addClass('inPath').show('normal');
				}
				else
				{
					conditionalForm.clearZone(zone, fieldid);
				}
			}
		}).change();
	}
};

var CAPTCHA =
{
	reload : function(input, url)
	{
		input.setAttribute('src', this.buildCaptchaImageURL(url))
	},
	buildCaptchaImageURL : function(url)
	{
		return url.replace(new RegExp('amp;', 'g'), '') + '&rnd=' + Math.random();
	}
};

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

var conditionalForm =

{

// hide zone

clearZone : function(zone, fieldid)

{

// remove .inPath class starting from closest .form-group.isNode

// (aka "clean path")

jQuery('#groupe'+fieldid+'.form-group.isNode')

.nextAll()

.removeClass('inPath')

.hide();

// hide selected zone

jQuery('div#' + zone).each(function()

{

// hide sub zone that should be hidden

jQuery(this).find('li.toHide').each(function()

{

jQuery(this).hide('normal');

});

jQuery(this).hide('normal');

});

// reset text inputs and selects, except radio and checkbox buttons

jQuery('div#' + zone + ' :input').each(function()

{

jQuery(this).not(':radio, :checkbox').val('');

jQuery(this).removeAttr('checked').removeAttr('selected');

});

// manage fields controled by boolean checkbox inputs

handleCheckboxBoolean : function(zone, fieldid, activationvalue)

{

jQuery('div#' + zone).css('display','none');

jQuery('div#field' + fieldid + ' :checkbox').bind('click change', function()

{

if (jQuery(this).is(':checked') && jQuery(this).val() == activationvalue)

{

jQuery('div#' + zone).addClass('inPath').show('normal');

}

else

{

conditionalForm.clearZone(zone, fieldid);

}

}).change();

// manage fields controled by checkbox inputs

handleCheckbox : function(zone, fieldid, activationvalue)

{

jQuery('div#' + zone).css('display','none');

jQuery('label#' + fieldid + ' :checkbox').bind('click change', function()

{

if(jQuery(this).is(':checked'))

{

jQuery('div#' + zone).addClass('inPath').show('normal');

}

else

{

conditionalForm.clearZone(zone, fieldid);

}

}).change();

// manage fields controled by list

handleList : function(zone, fieldid, activationvalue)

{

jQuery('div#' + zone).css('display', 'none');

jQuery('select#' + fieldid).change(function ()

{

jQuery('select#' + fieldid + ' option:selected').each(function()

{

if (jQuery(this).val() == activationvalue)

{

jQuery('div#' + zone).addClass('inPath').show('normal');

}

else

{

conditionalForm.clearZone(zone, fieldid);

}

});

}).change();

// manage fields controled by radio inputs

handleRadio : function(zone, fieldid, activationvalue)

{

jQuery('div#' + zone).css('display', 'none');

jQuery('div#field' + fieldid + ' :radio').bind('click change', function()

{

if (jQuery(this).is(':checked'))

{

if(jQuery(this).val() == activationvalue)

{

jQuery('div#' + zone).addClass('inPath').show('normal');

}

else

{

conditionalForm.clearZone(zone, fieldid);

}

}).change();

}

};

var CAPTCHA =

{

reload : function(input, url)

{

input.setAttribute('src', this.buildCaptchaImageURL(url))

buildCaptchaImageURL : function(url)

{

return url.replace(new RegExp('amp;', 'g'), '') + '&rnd=' + Math.random();

}

};

[Drupal 7.x] Les formulaires

07/06/2017 / admin

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

10/02/2015 / admin

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

Squelette général
Les différents champs
Les boutons
Les messages d’erreur

Squelette général

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

<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>

</ul>

</div>

</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 :

<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>

</ul>

</fieldset>

</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) :

<form id="" class="scaffold-form" method="" action=""></form>

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 :

<ul class="form-list">
     <li>...</li>
</ul>

</ul>

Champ texte unique

<li>
    <label for=""></label>
    <div class="input-box">
        <input type="" class="" title="" value="" name="" id="" />
    </div>
</li>

<li>

</div>

</li>

<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>

<li>

</div>

</li>

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

<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>

<li>

<label class="required" for="[etiquette_du_champ]"><em>*</em>Password</label>

</div>

</li>

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

Champ de texte unique dont la validation a échoué

<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>

<li>

<label for="[etiquette_du_champ]">Has failed</label>

<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

<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>

<label class="required" for="firstname"><em>*</em>First Name</label>

</div>

</div>

</li>

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

<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>

<label class="required" for="billing:month"><em>*</em>Date de naissance</label>

</div>

</div>

</div>

</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.

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

15/01/2015 / admin

From scratch (pas de markup imposé)

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

.delivery-mode input[type="radio"]{ position: absolute; left: -9999em; }
.delivery-mode input[type="radio"]:checked + label i { color: red; }

1 2	.delivery-mode input[type="radio"]{ position: absolute; left: -9999em; } .delivery-mode input[type="radio"]:checked + label i { color: red; }

<form>
    <ul class="delivery-mode">
        <li>
            <input id="retrait_magasin" type="radio" name="delivery_mode" value="retrait_magasin" />
            <label for="retrait_magasin"><i>[radio]</i> Retrait en magasin</label>
        </li>
        <li>
            <input id="domicile_colissimo" type="radio" name="delivery_mode" value="domicile_colissimo" />
            <label for="domicile_colissimo"><i>[radio]</i> A domicile - Colissimo</label>
        </li>        
    </ul>
</form>

<form>

<li>

<label for="retrait_magasin"><i>[radio]</i> Retrait en magasin</label>

</li>

<li>

<label for="domicile_colissimo"><i>[radio]</i> A domicile - Colissimo</label>

</li>

</ul>

</form>

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

Markup formulaires Drupal 7

Valable également si le module Webform est utilisé.

<div class="form-item webform-component webform-component-radios webform-component--new-1501229867570">
  <label for="edit-submitted-new-1501229867570">Nouveau champ "boutons radio" </label>
 <div id="edit-submitted-new-1501229867570" class="form-radios"><div class="form-item form-type-radio form-item-submitted-new-1501229867570">
 <input type="radio" id="edit-submitted-new-1501229867570-1" name="submitted[new_1501229867570]" value="1" class="form-radio">  <label class="option" for="edit-submitted-new-1501229867570-1">un </label>

</div>
<div class="form-item form-type-radio form-item-submitted-new-1501229867570">
 <input type="radio" id="edit-submitted-new-1501229867570-2" name="submitted[new_1501229867570]" value="2" class="form-radio">  <label class="option" for="edit-submitted-new-1501229867570-2">deux </label>

</div>
<div class="form-item form-type-radio form-item-submitted-new-1501229867570">
 <input type="radio" id="edit-submitted-new-1501229867570-3" name="submitted[new_1501229867570]" value="3" class="form-radio">  <label class="option" for="edit-submitted-new-1501229867570-3">trois </label>

</div>
</div>
</div>

<div class="form-item webform-component webform-component-checkboxes webform-component--new-1501229869002">
  <label for="edit-submitted-new-1501229869002">Nouveau champ "cases à cocher" </label>
 <div id="edit-submitted-new-1501229869002" class="form-checkboxes"><div class="form-item form-type-checkbox form-item-submitted-new-1501229869002-1">
 <input type="checkbox" id="edit-submitted-new-1501229869002-1" name="submitted[new_1501229869002][1]" value="1" class="form-checkbox">  <label class="option" for="edit-submitted-new-1501229869002-1">un </label>

</div>
<div class="form-item form-type-checkbox form-item-submitted-new-1501229869002-2">
 <input type="checkbox" id="edit-submitted-new-1501229869002-2" name="submitted[new_1501229869002][2]" value="2" class="form-checkbox">  <label class="option" for="edit-submitted-new-1501229869002-2">deux </label>

</div>
<div class="form-item form-type-checkbox form-item-submitted-new-1501229869002-3">
 <input type="checkbox" id="edit-submitted-new-1501229869002-3" name="submitted[new_1501229869002][3]" value="3" class="form-checkbox">  <label class="option" for="edit-submitted-new-1501229869002-3">trois </label>

</div>
</div>
</div>

<label for="edit-submitted-new-1501229867570">Nouveau champ "boutons radio" </label>

</div>

</div>

<input type="radio" id="edit-submitted-new-1501229867570-3" name="submitted[new_1501229867570]" value="3" class="form-radio"> <label class="option" for="edit-submitted-new-1501229867570-3">trois </label>

</div>

<label for="edit-submitted-new-1501229869002">Nouveau champ "cases à cocher" </label>

</div>

</div>

<input type="checkbox" id="edit-submitted-new-1501229869002-3" name="submitted[new_1501229869002][3]" value="3" class="form-checkbox"> <label class="option" for="edit-submitted-new-1501229869002-3">trois </label>

</div>

@mixin sexy-form-booleans(){
  [type="radio"],
  [type="checkbox"] {
    position: absolute;
    left: -99999rem;
    + label {
      &:before {
        display: inline-block;
        vertical-align: middle;
        content: "";
        width: 20px;
        height: 20px;
        margin-right: 6px;
        border: 1px solid pink;
      }
    }
    &:checked {
      + label {
        &:before {
          background: pink;
          box-shadow: inset 0px 0px 0px 2px #fff;
        }
      }
    }
  }
  [type="radio"] {
    + label {
      &:before {
        border-radius: 50%;
      }
    }
  }  
}

@include sexy-form-booleans();

@mixin sexy-form-booleans(){

[type="radio"],

[type="checkbox"] {

position: absolute;

left: -99999rem;

+ label {

&:before {

display: inline-block;

vertical-align: middle;

content: "";

width: 20px;

height: 20px;

margin-right: 6px;

border: 1px solid pink;

}

&:checked {

+ label {

&:before {

background: pink;

box-shadow: inset 0px 0px 0px 2px #fff;

}

[type="radio"] {

+ label {

&:before {

border-radius: 50%;

}

@include sexy-form-booleans();

Bonnes pratiques

Libellés au-dessus des champs, une colonne

Libellés au-dessus des champs, deux colonnes

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

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

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

Plugin Flatpickr: astuces d’utilisation

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

Ne pas utiliser d’input type= »date »

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

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

Plugin : astuces d’utilisation

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

Plugin : astuces d’utilisation

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

form.js

Squelette général

Les différents champs

Champ texte unique

Champ texte unique dont la validation a réussi

Champ de texte unique dont la validation a échoué

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

From scratch (pas de markup imposé)

Markup formulaires Drupal 7

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

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