Formuliertekstcomponent (v1)

Met de component Tekst van formulier voor kerncomponenttekst kan formuliertekst worden verzonden.

Gebruik

De component van de Tekst van de Vorm staat voor de voorlegging van verschillende types van tekst toe en is bedoeld om samen met de component van de vormcontainer worden gebruikt.

Het type van tekstbevestiging, etiketten, en hulpberichten kunnen door de inhoudsredacteur in vorm dialoog worden bepaald.

Versie en compatibiliteit

In dit document wordt versie 1 van de Form Text Component beschreven, die oorspronkelijk werd geïntroduceerd met versie 1.0.0 van de Core Components met AEM 6.3.

In de volgende tabel wordt de compatibiliteit van versie 1 van de component Formuliertekst weergegeven.

Uitvoer van voorbeeldcomponent

Het volgende voorbeeld wordt genomen uit We.Retail.

Schermafbeelding

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

Dialoogvenster configureren

In het dialoogvenster Configureren kan de auteur van de inhoud het type tekst definiëren dat moet worden ingevoerd, evenals standaardwaarden en -labels.

Hoofd

• Restrictie - Het type tekst dat moet worden ingevoerd en waartegen moet worden gevalideerd

  • Tekst
  • Tekstgebied
  • E-mail
  • Tel
  • Date
  • Getal
  • Wachtwoord

• Tekstregels - Aantal regels dat in het tekstgebied moet worden weergegeven (alleen wordt weergegeven wanneer ​​Restricties zijn ingesteld op Tekstgebied)

• Label - Het label dat voor het veld wordt weergegeven

• Het label verbergen zodat het niet kan worden weergegeven . Dit is nodig als het label alleen nodig is voor toegankelijkheidsdoeleinden en geen aanvullende visuele informatie over het veld bevat

• Elementnaam - De naam van het veld dat met de formuliergegevens wordt verzonden

• Waarde - Standaardwaarde die vooraf in het veld is ingevuld

Info

• Help-bericht - Een tip voor de gebruiker wat in het veld kan worden ingevoerd
• Help-bericht weergeven als tijdelijke aanduiding - Het Help-bericht weergeven in de formulierinvoer als het leeg en niet gefocust is

Restricties

• Restrictiebericht

  • Bericht weergegeven als knopinfo bij het verzenden van het formulier als de waarde het gekozen type niet valideert
  • Niet weergegeven voor restrictietypen Tekst en Tekstgebied

• Vereist - Als deze optie is geselecteerd, moet de gebruiker een waarde invullen voordat het formulier wordt verzonden

• Alleen -lezen maken - Als deze optie is geselecteerd, kan de gebruiker de waarde van het veld niet wijzigen

Ontwerpdialoogvenster

Er is geen ontwerpdialoogvenster voor de component Formuliertekst.

Technische details

De recentste technische documentatie over de Component van de Tekst van de Vorm kan op GitHub worden gevonden.

Het volledige kerncomponentenproject kan van GitHub worden gedownload.

Meer details over het ontwikkelen van de Componenten van de Kern kunnen in de ontwikkelaarsdocumentatie van de Componenten van de Kern worden gevonden.

Business.Adobe.com-bronnen