フォームテキストコンポーネント form-text-component

コアコンポーネントのフォームテキストコンポーネントを使用すれば、送信するフォームテキストを入力できます。

使用方法 usage

フォームテキストコンポーネントを使用すれば、各種テキストを送信できます。このコンポーネントは、フォームコンテナコンポーネントと共に使用するためのものです。テキスト検証のタイプ、ラベル、ヘルプメッセージは、コンテンツ編集者が設定ダイアログで定義できます。

バージョンと互換性 version-and-compatibility

このドキュメントでは、フォームテキストコンポーネントの現在のバージョン(2018年1月にコアコンポーネントのリリース 2.0.0 で導入された v2)について説明します。

コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。

コンポーネントのバージョン
AEM 6.4
AEM 6.5
AEM as a Cloud Service
v2
リリース 2.17.4 以前と互換性あり
互換性あり
互換性あり
v1
互換性あり
互換性あり
互換性あり

コアコンポーネントのバージョンとリリースについて詳しくは、コアコンポーネントのバージョンを参照してください。

コンポーネント出力のサンプル sample-component-output

フォームテキストコンポーネントを体験し、その設定オプションや HTML および JSON 出力の例を確認するには、コンポーネントライブラリを参照してください。

技術的詳細 technical-details

フォームテキストコンポーネントに関する最新の技術ドキュメントについては、GitHub を参照してください。

コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントを参照してください。

設定ダイアログ configure-dialog

設定ダイアログでは、入力するテキストの種類とデフォルト値およびラベルをコンテンツ作成者が定義できます。

「プロパティ」タブ properties-tab

「プロパティ」タブ

  • 制約 - 入力するテキストの種類で、これを基準にテキストが検証されます

    • テキスト
    • テキスト領域
    • メール
    • 電話番号
    • 日付
    • 番号
    • パスワード
  • テキスト行数 - テキスト領域に表示する行数(「制約」が​ テキスト領域 ​に設定されている場合にのみ表示)

  • ラベル - フィールドに表示するラベル

  • ラベルを非表示にします - ラベルがアクセシビリティのためにのみ必要で、フィールドに関するその他の視覚的情報には影響しない場合に必要です

  • 要素名 - フォームデータと共に送信されるフィールドの名前

  • - フィールドに事前入力されるデフォルト値

  • ID - このオプションを使用すると、HTML 内および データレイヤー内のコンポーネントの一意の識別子を制御できます。

    • 空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
    • ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
    • ID を変更すると、CSS、JS、およびデータレイヤーのトラッキングに影響を与える可能性があります。

「情報」タブ about-tab

「情報」タブ

  • ヘルプメッセージ - フィールドに入力できる内容をユーザーに伝えるヒント
  • ヘルプメッセージをプレースホルダーとして表示 - フォーム入力が空でフォーカスされていない場合、フォーム入力内にヘルプメッセージを表示するかどうか

「制約」タブ constraints-tab

「制約」タブ

  • 制約メッセージ

    • 値が適切な型でない場合に、フォーム送信時にツールチップとして表示されるメッセージ
    • 制約タイプが​ テキスト ​および​ テキスト領域 ​の場合は表示されません
  • 必須 - 選択した場合、ユーザーはフォームを送信する前に値に入力する必要があります

    • 必須メッセージ - フィールドを空のままにした場合、ツールヒントチップとして表示されるメッセージ
  • 読み取り専用にする - 選択した場合、ユーザーはフィールドの値を変更できません

デザインダイアログ design-dialog

「スタイル」タブ styles-tab

フォームテキストコンポーネントは、AEM スタイルシステムをサポートしています。

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c