Show Menu
SUJETS×

Composant de bouton de formulaire

Le composant de bouton de formulaire des composants principaux permet l’inclusion d’un bouton pour déclencher une action sur une page.

Utilisation

Le composant de bouton de formulaire des composants principaux permet la création de champs de bouton, souvent pour déclencher l’envoi du formulaire et est destiné à être utilisé avec le composant de conteneur de formulaires .
Les propriétés de bouton peuvent être définies par l’éditeur de contenu dans la boîte de dialogue de configuration .

Version et compatibilité

La version actuelle du composant de bouton de formulaire est v2, qui a été introduite avec la version 2.0.0 des composants principaux en janvier 2018. Elle est décrite dans ce document.
Le tableau ci-après présente en détail toutes les versions prises en charge du composant, les versions AEM avec lesquelles les versions du composant sont compatibles et les liens vers la documentation pour les versions précédentes.
Version du composant
AEM 6.3
AEM 6.4
AEM 6.5
v2
Compatible
Compatible
Compatible
Compatible
Compatible
Compatible
Pour plus d’informations sur les versions et les publications des composants principaux, voir le document sur les versions des composants principaux .

Exemple de sortie de composant

The following is sample taken from We.Retail. we-retail.html

Capture d’écran

HTML

<div class="container responsivegrid aem-GridColumn aem-GridColumn--default--12"> <form method="POST" action="/content/we-retail/us/en/experience.html" id="new_form" name="new_form" enctype="multipart/form-data" class="cmp-form aem-Grid aem-Grid--12 aem-Grid--default--12"> <input type="hidden" name=":formstart" value="/content/we-retail/us/en/experience/jcr:content/root/responsivegrid/container"> <div class="button aem-GridColumn aem-GridColumn--default--12"> <button type="BUTTON" class="cmp-form-button" name="loveToast" value="ILoveToast">Click here if you love toast!</button> </div> </form> </div>

JSON

"button":{ "columnClassNames":"aem-GridColumn aem-GridColumn--default--12", ":type":"core/wcm/sandbox/components/form/button/v2/button", "name":"loveToast", "jcr:title":"Click here if you love toast!", "type":"button", "value":"ILoveToast" }

Détails techniques

The latest technical documentation about the Form Button Component can be found on GitHub .
Vous trouverez plus d’informations sur le développement des composants principaux dans la documentation destinée aux développeurs de composants principaux .

Boîte de dialogue de configuration

La boîte de dialogue de configuration permet à l’auteur de contenu de définir les paramètres du bouton.

Onglet Propriétés

  • Type
    • Bouton
    • Envoyer
  • Titre
     : texte affiché sur le bouton.
    • Si aucun titre n’est défini, le type de bouton est utilisé par défaut.
  • Nom
     : nom du bouton qui est envoyé avec les données de formulaire.
  • Valeur
     : valeur du bouton qui est envoyée avec les données de formulaire.

Boîte de dialogue de conception

Onglet Styles

Le composant de bouton de formulaire prend en charge le système de style AEM.