Formulärtextkomponent (v1)

Med komponenten Core Component Form Text kan du skriva in formulärtext.

Användning

Komponenten Form Text tillåter olika typer av text och är avsedd att användas tillsammans med formulärbehållarkomponent.

Typen av textvalidering, etiketter och hjälpmeddelanden kan definieras av innehållsredigeraren i konfigurera dialogruta.

Version och kompatibilitet

I det här dokumentet beskrivs v1 av Form Text Component, som ursprungligen introducerades i version 1.0.0 av Core Components med AEM 6.3.

I följande tabell visas kompatibiliteten för v1 för Form Text Component.

Exempel på komponentutdata

Följande prov tas från Vi.butik.

Skärmbild

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

Konfigurera dialogruta

I dialogrutan Konfigurera kan innehållsförfattaren definiera vilken typ av text som ska anges samt standardvärden och etiketter.

Huvud

• Begränsning - Den typ av text som ska anges och valideras mot

  • Text
  • Textområde
  • E-post
  • Tel
  • Datum
  • Siffra
  • Lösenord

• Textrader - Antal rader som ska visas i textområdet (visas endast när Begränsning är inställd på Textområde)

• Etikett - Etiketten som ska visas för fältet

• Dölj etiketten som visas - Behövs om etiketten endast krävs för hjälpmedelsändamål och inte ger någon ytterligare visuell information om fältet

• Elementnamn - Namnet på fältet som skickas med formulärdata

• Värde - Standardvärde som är förifyllt i fältet

Om

• Hjälpmeddelande - Ett tips till användaren om vad som kan anges i fältet
• Visa hjälpmeddelande som platshållare - Visa hjälpmeddelandet i formulärindata när det är tomt och inte i fokus

Begränsningar

• Begränsningsmeddelande

  • Meddelande som visas som verktygstips när formuläret skickas om värdet inte validerar vald typ
  • Visas inte för Text och Textområde begränsningstyper

• Obligatoriskt - Om det här alternativet är markerat måste användaren fylla i ett värde innan formuläret skickas

• Gör skrivskyddad - Om du väljer det här alternativet kan användaren inte ändra fältets värde

Designdialogruta

Det finns ingen designdialogruta för komponenten Formulärtext.

Teknisk information

Den senaste tekniska dokumentationen om Form Text Component finns på GitHub.

Hela kärnkomponentprojektet kan laddas ned från GitHub.

Mer information om hur du utvecklar kärnkomponenter finns i Dokumentation för grundkomponentutvecklare.

Resurser för Business.Adobe.com