Show Menu
TOPICS×

フォームテキストコンポーネント

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

使用方法

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

バージョンと互換性

このドキュメントでは、フォームテキストコンポーネントの現在のバージョン(2018 年 1 月にコアコンポーネントのリリース 2.0.0 で導入された v2)について説明します。
コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。
コンポーネントのバージョン
AEM 6.3
AEM 6.4
AEM 6.5
v2
互換性あり
互換性あり
互換性あり
互換性あり
互換性あり
互換性あり
コアコンポーネントのバージョンとリリースについて詳しくは、 コアコンポーネントのバージョン を参照してください。

コンポーネント出力のサンプル

スクリーンショット

HTML

<div class="text aem-GridColumn aem-GridColumn--default--12"> <div class="cmp-form-text"> <label for="form-text-2146967">How many pieces of toast would you like? </label> <input class="cmp-form-text__text" type="number" id="form-text-2146967" name="pieces"> </div> </div>

JSON

"text":{ "columnClassNames":"aem-GridColumn aem-GridColumn--default--12", "id":"form-text-2146967", "title":"How many pieces of toast would you like?", "name":"pieces", "value":"", "helpMessage":"", "type":"number", "readOnly":false, "required":false, "requiredMessage":"", "constraintMessage":"", "rows":2, "defaultValue":"", ":type":"core/wcm/components/form/text/v2/text" }

技術的詳細

フォームテキストコンポーネントに関する最新の技術ドキュメ ントは、GitHubで入手できます
コアコンポーネントの開発について詳しくは、 コアコンポーネント開発者向けドキュメント を参照してください。

設定ダイアログ

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

「メイン」タブ

  • 制約
    - 入力するテキストの種類で、これを基準にテキストが検証されます
    • テキスト
    • テキスト領域
    • 電子メール
    • 電話番号
    • 日付
    • 番号
    • パスワード
  • テキスト行数
    - テキスト領域に表示する行数(「
    制約
    」が​
    テキスト領域
    ​に設定されている場合にのみ表示)
  • ラベル
    - フィールドに表示するラベル
  • ラベルを非表示
    - ラベルがアクセシビリティのためにのみ必要で、フィールドに関するその他の視覚的情報には影響しない場合に必要です
  • 要素名
    - フォームデータと共に送信されるフィールドの名前
  • - フィールドに事前入力されるデフォルト値

「情報」タブ

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

「制約」タブ

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

デザインダイアログ

フォームテキストコンポーネントにはデザインダイアログはありません。