コアコンポーネントのフォームテキストコンポーネントを使用すれば、送信するフォームテキストを入力できます。
フォームテキストコンポーネントを使用すれば、各種テキストを送信できます。このコンポーネントは、フォームコンテナコンポーネントと共に使用するためのものです。
テキスト検証のタイプ、ラベル、ヘルプメッセージは、コンテンツ編集者が設定ダイアログで定義できます。
このドキュメントでは、AEM 6.3 に付属しているコアコンポーネントのリリース 1.0.0 で最初に導入されたフォームテキストコンポーネント v1 について説明します。
フォームテキストコンポーネント v1 の互換性を次の表に示します。
AEM のバージョン | フォームテキストコンポーネント v1 |
---|---|
6.3 | 互換性あり |
6.4 | 互換性あり |
このドキュメントでは、フォームテキストコンポーネント v1 について説明します。
フォームテキストコンポーネントの現在のバージョンについて詳しくは、フォームテキストコンポーネントのドキュメントを参照してください。
以下は We.Retail から取得したサンプルです。
<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>
"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"
}
コアコンポーネントからの JSON エクスポートには、コアコンポーネントのリリース 1.1.0 が必要です。詳しくは、コアコンポーネント v1 の互換性情報を参照してください。
設定ダイアログでは、入力するテキストの種類とデフォルト値およびラベルをコンテンツ作成者が定義できます。
制約 - 入力するテキストの種類で、これを基準にテキストが検証されます
テキスト行数 - テキスト領域に表示する行数(「制約」がテキスト領域に設定されている場合にのみ表示)
ラベル - フィールドに表示するラベル
ラベルを非表示にします - ラベルがアクセシビリティのためにのみ必要で、フィールドに関するその他の視覚的情報には影響しない場合に必要です
エレメント名 - フォームデータと共に送信されるフィールドの名前
値 - フィールドに事前入力されるデフォルト値
制約メッセージ
必須 - 選択した場合、ユーザーはフォームを送信する前に値に入力する必要があります
読み取り専用にする - 選択した場合、ユーザーはフィールドの値を変更できません
フォームテキストコンポーネントにはデザインダイアログはありません。
フォームテキストコンポーネントに関する最新の技術ドキュメントについては、GitHub を参照してください。
コアコンポーネントプロジェクト全体を GitHub からダウンロードできます。
コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントを参照してください。