数値入力

アダプティブフォームの数値入力コンポーネントは、ユーザーが数値を入力できるフォームフィールドのひとつです。このコンポーネントは通常、数値を増やす上向き矢印と数値を減らす下向き矢印と共にテキストフィールドに表示されます。

最小、最大、ステップ、値などの属性と共に使用することもできます。これらの属性を使用すると、フィールドで許可される最小値と最大値、数値の増減間隔、およびフィールドのデフォルト値を設定できます。

このコンポーネントでは、年齢や数量などの数値データを収集できます。また、加算や減算などの数学演算を行う場合にも使用できます。さらに、ユーザーが入力した数値データを検証することもできます。

アクセシビリティについては、数値入力フィールドの目的と入力内容について説明する「ラベル」を指定することが重要です。

例

使用方法

アダプティブフォームに数値入力コンポーネントを含める方がメリットが大きい理由は、次のようにいくつかあります。

• 数学演算：数値フィールドを使用すると、加算、減算、乗算、除算などの数学演算を実行できます。

• データ範囲：数値フィールドを使用すると、最小、最大、ステップの属性によって有効な値の範囲を設定できます。

• 動的コンテンツ：フォームフィールドに基づく動的データを表示できます。

バージョンと互換性

アダプティブフォームのアコーディオンコアコンポーネントは、Cloud Service のコアコンポーネント 2.0.4 および AEM 6.5.16.0 Forms 以降のコアコンポーネント 1.1.12 の一部として 2023年2月にリリースされました。次の表に、サポートされているすべてのバージョン、AEM の互換性、対応するドキュメントへのリンクを示します。

コアコンポーネントのバージョンとリリースについて詳しくは、コアコンポーネントのバージョンドキュメントをご覧ください。

技術的詳細

アダプティブフォームの数値入力コアコンポーネントに関する最新情報については、GitHub のテクニカルドキュメントをご覧ください。コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けのドキュメントをご覧ください。

設定ダイアログ

設定ダイアログでは、訪問者の数値入力操作を簡単にカスタマイズできます。また、数値入力オプションを簡単に定義し、シームレスなユーザーエクスペリエンスを実現することもできます。

「基本」タブ

• 名前 - フォームコンポーネントは、フォーム内とルールエディター内の両方で一意の名前で簡単に識別できますが、名前にスペースや特殊文字を含めることはできません。

• タイトル - タイトルを使用すると、フォーム内のコンポーネントを簡単に識別できます。デフォルトでは、コンポーネントの上にタイトルが表示されます。 タイトルを追加しない場合、コンポーネントの名前がタイトルテキストの代わりに表示されます。

• タイトルを非表示 - コンポーネントのタイトルを非表示にするには、このオプションを選択します。

• プレースホルダーテキスト - フォームコンポーネント内のプレースホルダーテキストとは、入力フィールド内に表示される短いラベルまたはプロンプトのことで、そのフィールドに入力する必要のある情報の種類に関するヒントとしてユーザーに表示されます。ユーザーがフィールドへの入力を開始するとプレースホルダーテキストが消え、フィールドが空のままの場合は再び表示されます。ユーザーに視覚的なキューを提供しますが、フィールドの永続的なラベルや値としては機能しません。

• バインド参照 - バインド参照は、外部データソースに保存され、フォーム内で使用されるデータ要素への参照です。バインド参照を使用すると、データをフォームフィールドに動的にバインドして、フォームにデータソースの最新のデータを表示できます。 例えば、フォームに入力された顧客 ID に基づいて、顧客の名前と住所をフォームに表示できます。 さらに、フォームに入力されたデータでデータソースを更新することもできます。 このように AEM Formsで外部データソースとやり取りするフォームを作成して、データの収集と管理のためのシームレスなユーザーエクスペリエンスを提供できます。

• コンポーネントを非表示 - フォームでコンポーネントを非表示にするには、このオプションを選択します。 このコンポーネントは、他の目的（ルールエディターでの計算に使用するなど）にも利用できます。 これは、ユーザーが表示する必要のない情報や直接変更した情報を保存する必要がある場合に役立ちます。

• コンポーネントの無効化 - コンポーネントを無効にする場合は、このオプションを選択します。 エンドユーザーは、無効になっているコンポーネントをアクティブにしたり、編集したりすることはできません。 ユーザーはフィールドの値を表示できますが、変更することはできません。 このコンポーネントは、他の目的（ルールエディターでの計算に使用するなど）にも利用できます。

• 読み取り専用 - コンポーネントを編集不可にするには、このオプションを選択します。ユーザーはフィールドの値を表示できますが、変更することはできません。 このコンポーネントは、他の目的（ルールエディターでの計算に使用するなど）にも利用できます。

• 数値のタイプ - フォームフィールドで許可される数値のタイプを選択できます。ドロップダウンメニューから、「小数」または「整数」のいずれかを選択できます。

• デフォルト値 - このオプションを使用すると、フォームフィールドにデフォルト値を追加できます。「無効なコンポーネント」または「読み取り専用コンポーネント」が選択されている場合は、デフォルト値が画面に表示されます。ユーザーがフォームフィールドに値を入力しない場合、この値はフォーム送信時に送信されます

「検証」タブ

• 必須 - コンポーネントをアダプティブフォームに表示する場合は、このオプションを選択します。 このオプションが選択されていると、「基本」タブの「コンポーネントを非表示」または「コンポーネントの無効化」は選択できません。

• エラーメッセージ - このオプションを使用すると、「必須」チェックボックスがオンになっており、フィールドが空白の場合に表示されるメッセージを入力できます。

• スクリプト検証メッセージ - このオプションを使用すると、スクリプトの検証が失敗した場合に表示するメッセージを入力できます。

• 最小値 - フォームフィールドに入力できる最小値を選択できます。「最小値」オプションに指定された値を下回る数値をフォームフィールドに入力すると、エラーメッセージが表示されます。

• 最小値のエラーメッセージ - 「最小値」オプションで指定された値を下回る数値を入力した場合に表示されるエラーメッセージを入力できます。

• 最小値を除外 - フォームフィールドに入力する値の範囲を指定するための「最小値」オプションに、最小値を指定しない場合にこのチェックボックスをオンにします。

• 最大値 - フォームフィールドに入力できる最大値を選択できます。「最大値」オプションに指定された値より大きい数値がフォームフィールドに入力されると、エラーメッセージが表示されます。

• 最大値のエラーメッセージ - このオプションでは、「最大値」オプションに指定された値を超える数値を入力した場合に表示されるエラーメッセージを入力できます。

• 最大値を除外 - フォームフィールドに入力する値の範囲を指定するための「最大値」オプションに、最大値を指定しない場合にこのチェックボックスをオンにします。

「ヘルプコンテンツ」タブ

• 短い説明 - 短い説明は、特定のフォームフィールドの目的に関する追加の情報や説明を提供する簡単な説明文です。これにより、ユーザーは、フィールドに入力するデータの種類を理解しやすくなります。また、入力された情報が有効で目的の条件を満たしていることを確認できるように、ガイドラインや例を提供できます。デフォルトでは、短い説明は非表示になっています。 「短い説明を常に表示」オプションを有効にすると、コンポーネントの下に説明が表示されます。

• 短い説明を常に表示 - このオプションを有効にすると、コンポーネントの下に短い説明が表示されます。

• ヘルプテキスト - ヘルプテキストとは、フォームフィールドの正しい入力を支援するためにユーザーに提供される追加の情報やガイダンスを指します。コンポーネントの横に配置されているヘルプアイコン（i）をクリックすると表示されます。 ユーザーがフィールドの要件や制約を理解できるように設計されているヘルプテキストは、フォームフィールドのラベルやプレースホルダーテキストよりも詳細な情報を提供できます。また、フォームへの入力をより簡単かつ正確にするための提案や例を提供することも可能です。

「アクセシビリティ」タブ

スクリーンリーダー用テキスト - スクリーンリーダー用テキストとは、視覚に障がいのあるユーザーが使用する支援テクノロジー（スクリーンリーダー）によって読み上げられる追加のテキストを指します。このテキストでは、フォームフィールドの目的に関するオーディオの説明が提供され、フィールドのタイトル、説明、名前および関連するメッセージ（カスタムテキスト）に関する情報を含めることができます。スクリーンリーダー用のテキストを使用すると、視覚に障害のあるユーザーを含むすべてのユーザーがフォームに確実にアクセスして、フォームフィールドとその要件を完全に理解できるようになります。

「形式」タブ

• 表示形式 - このオプションでは、表示する様々な整数の数値形式を選択できます。ユーザーが「タイプ」ドロップダウンメニューからオプションを選択すると、「形式」オプションがパネルに表示されます。ユーザーに表示する数値の形式を選択できます。

• 小数点より前の桁数（1234.000） - 小数点より前に表示する桁数を指定できます。

• 小数点より後の桁数（1234.000） - 小数点より後に表示する桁数を指定できます。

デザインダイアログ

デザインダイアログでは、数値入力コンポーネントの CSS スタイルを定義および管理できます。

「スタイル」タブ

タブを使用して、コンポーネントの CSS スタイルの定義と管理を行います。アダプティブフォームの数値入力コアコンポーネントは、AEM のスタイルシステムをサポートしています。

デフォルトの CSS クラス：アダプティブフォームの数値入力コアコンポーネントのデフォルト CSS クラスを指定できます。

許可されたスタイル：スタイルを表す名前と CSS クラスを指定してスタイルを定義できます。例えば、「bold text」という名前のスタイルを作成し、CSS クラス「font-weight: bold」を指定できます。アダプティブフォームエディターで、アダプティブフォームにこれらのスタイルを使用または適用できます。スタイルを適用するには、アダプティブフォームエディターで、スタイルを適用するコンポーネントを選択して「プロパティ」ダイアログに移動し、「スタイル」ドロップダウンリストから希望のスタイルを選択します。スタイルを更新または変更する必要がある場合は、デザインダイアログに戻り、「スタイル」タブでスタイルを更新して変更を保存します。

「形式」タブ

「形式」タブでは、デフォルトとカスタムの形式を指定できます。

Business.Adobe.com リソース