Composant de texte de formulaire (v1)

Le composant de texte de formulaire des composants principaux permet l’entrée de texte de formulaire pour envoi.

Utilisation

Le composant de texte de formulaire permet l’envoi de différents types de texte et est conçu pour être utilisé avec le composant de conteneur de formulaires.

Le type de validation de texte, d’étiquettes et de messages d’aide peut être défini par l’éditeur de contenu dans la boîte de dialogue de configuration.

Version et compatibilité

Ce document décrit la version v1 du composant de texte de formulaire, introduite à l’origine avec la version 1.0.0 des composants principaux avec AEM 6.3.

Le tableau ci-après répertorie la compatibilité de la version v1 du composant de texte de formulaire.

Version d’AEM Composant de texte de formulaire v1
6.3 Compatible
6.4 Compatible
ATTENTION

Ce document décrit la version v1 du composant de texte de formulaire.

Pour plus d’informations sur la version actuelle du composant de texte de formulaire, voir le document Composant de texte de formulaire.

Exemple de sortie de composant

Voici un exemple extrait de We.Retail.

Capture d’écran

HTML

<div class="cmp cmp-form 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="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="cmp cmp-form-field aem-GridColumn aem-GridColumn--default--12">
   <div class="form-group">
       <label for="form-text-978484744">How many pieces of toast would you like?</label>
          <input type="number" id="form-text-978484744" name="pieces">
   </div>
  </div>
 </form>
</div>

JSON

"container": {
              "columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
              "columnCount": 12,
              "gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
              ":items": {
                "text": {
                  "columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
                  ":type": "weretail/components/form/text",
                  "name": "piecesOfToast",
                  "jcr:title": "How many pieces of toast would you like?",
                  "type": "number",
                  "rows": "2"
                }
              },
              ":itemsOrder": [
                "text"
              ],
              ":type": "weretail/components/form/container"
            }
REMARQUE

L’exportation JSON à partir des composants principaux nécessite la version 1.1.0 des composants principaux. Pour plus d’informations, voir les informations de compatibilité des composants principaux v1.

Boîte de dialogue de configuration

La boîte de dialogue de configuration permet à l’auteur de contenu de définir le type de texte à saisir, ainsi que les valeurs et étiquettes par défaut.

Principal

  • Contrainte : type de texte à saisir et par rapport auquel il sera validé.

    • Texte
    • Zone de texte
    • Courriel
    • Téléphone
    • Date
    • Nombre
    • Mot de passe
  • Lignes de texte : nombre de lignes à afficher dans la zone de texte (affiché uniquement lorsque la contrainte est définie sur Zone de texte).

  • Étiquette : libellé qui s’affiche pour le champ.

  • Masquer l’étiquette : nécessaire si l’étiquette est requise uniquement à des fins d’accessibilité et ne transmet aucune information visuelle supplémentaire sur le champ.

  • Nom de l’élément : nom du champ qui est envoyé avec les données de formulaire.

  • Valeur : valeur par défaut prérenseignée dans le champ.

À propos

  • Message d’aide : conseil à l’intention de l’utilisateur sur ce qui peut être entré dans le champ.
  • Afficher le message d’aide comme espace réservé : indique s’il convient d’afficher le message d’aide dans l’entrée de formulaire lorsqu’elle est vide et désactivée.

Contraintes

  • Message de contrainte

    • Message affiché sous forme d’info-bulle lors de l’envoi du formulaire si la valeur ne valide pas le type sélectionné
    • Non affiché pour les types de contraintes Texte et Zone de texte.
  • Requis : indique si l’utilisateur doit renseigner une valeur avant d’envoyer le formulaire.

  • Rendre en lecture seule : si cette option est sélectionnée, l’utilisateur ne peut pas modifier la valeur du champ.

Boîte de dialogue de conception

Il n’existe pas de boîte de dialogue de conception pour le composant de texte de formulaire.

Détails techniques

La documentation technique la plus récente sur le composant de texte de formulaire se trouve sur GitHub.

Le projet sur les composants principaux peut être téléchargé depuis GitHub.

Vous trouverez plus d’informations sur le développement des composants principaux dans la documentation destinée aux développeurs de composants principaux.

Sur cette page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free