ドキュメントAEM as a Cloud Serviceユーザーガイド

アダプティブ Forms ブロックのフィールドプロパティ

Last update: Thu Sep 18 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 適用対象：
  • Experience Manager as a Cloud Service

このドキュメントでは、フィールドの識別方法とレンダリング方法、共通のパターン、フィールド固有の違いに重点を置いて、JSON スキーマが blocks/form/form.js でレンダリングされたHTMLにどのようにマッピングされるかを要約します。

フィールド（fieldType）の識別方法

JSON スキーマの各フィールドには、レンダリング方法を決定する fieldType プロパティがあります。 fieldType は次になることができます。

  • 特殊タイプ
    例：drop-down、radio-group、checkbox-group、panel、plain-text、image、heading など
  • 有効なHTML入力タイプ
    例：text、number、email、date、password、tel、range、file など
  • -input サフィックスを持つ型
    例：text-input、number-input など （text、number などの基本型に正規化されます）。

fieldType が特殊な型と一致する場合、カスタムレンダラー が使用されます。 それ以外の場合は、デフォルトの入力タイプ として扱われます。

各フィールドタイプの 完全なHTML構造とプロパティについては、以下の節を参照してください。

フィールドで使用される共通プロパティ

ほとんどのフィールドで使用されるプロパティを以下に示します。

  • id：要素 ID を指定し、アクセシビリティをサポートします。
  • name:input、select、または fieldset 要素の name 属性を定義します。
  • label.value、label.richText、label.visible: ラベル/凡例のテキスト、HTMLのコンテンツ、表示/非表示を指定します。
  • value: フィールドの現在の値を表します。
  • required:required 属性または検証データを追加します。
  • readOnly、enabled: フィールドを編集可能と無効のどちらにするかを制御します。
  • description: フィールドの下にヘルプテキストを表示します。
  • tooltip：入力の title 属性を設定します。
  • constraintMessages：カスタムのエラーメッセージをデータ属性として提供します。

共通のHTML構造

ほとんどのフィールドは、ラベルとオプションのヘルプテキストを含むラッパー内でレンダリングされます。 次のスニペットは、構造の例を示しています。

<div class="<fieldType>-wrapper field-wrapper field-<name>" data-id="<id>">
<label for="<id>" class="field-label">Label</label>
<!-- Field-specific input/element here -->
<div class="field-description" id="<id>-description">Description or error
message</div>
</div>

グループ（ラジオ/チェックボックス）およびパネルの場合、<fieldset> の代わりに、<legend> が付いた <div>/<label> が使用されます。 ヘルプテキスト

は、説明が設定されている場合にのみ存在します。

エラーメッセージの表示

エラーメッセージは、ヘルプテキストに使用されているのと同じ .field-description 要素に表示され、動的に更新されます。

フィールドが無効な場合:

フィールドが有効になると:

カスタムエラーメッセージは、JSON の constraintMessages プロパティを使用して定義できます。
これらは、ラッパーの data-<constraint>ErrorMessage 属性として追加されます（例：data-requiredErrorMessage）。

デフォルトの入力タイプ（HTML入力または *-input）

fieldType が特殊な型でない場合は、標準のHTML入力型または <type>-input として扱われます。例えば、text、number、email、date、text-input、number-input などです。

デフォルトの入力タイプの制約

制約は、JSON プロパティに基づいて、入力要素の属性として追加されます。

JSON プロパティ
HTML属性
適用先
maxLength
maxlength
テキスト，メール，パスワード，tel
minLength
minlength
テキスト，メール，パスワード，tel
pattern
pattern
テキスト，メール，パスワード，tel
maximum
最大
数値、範囲、日付
minimum
最小値
数値、範囲、日付
ステップ
ステップ
数値、範囲、日付
同意
同意
ファイル
複数
複数
ファイル
maxOccur
data-max
パネル
minOccur
data-min
パネル
NOTE
multiple はブール値プロパティです。 true の場合、multiple 属性が追加されます。

これらの属性は、フィールドの JSON 定義に基づいて、フォームレンダラーによって自動的に設定されます。

例：制約を含むHTML構造

次の例は、検証制約とエラー処理属性を使用して数値フィールドをレンダリングする方法を示しています。

<div class="number-wrapper field-wrapper field-age" data-id="age"
data-required="true"
data-minimumErrorMessage="Too small" data-maximumErrorMessage="Too large">
<label for="age" class="field-label">Age</label>
<input type="number"
id="age" name="age"
value="30" required min="18"
max="99" step="1"
placeholder="Enter your age" />
<div class="field-description" id="age-description"> Description or error message
</div>
</div>

HTML構造の各部分は、データの連結、検証およびヘルプまたはエラーメッセージの表示に関与します。

フィールド固有のプロパティとそのHTML構造

ドロップダウン

追加のプロパティ：

例：

<div class="drop-down-wrapper field-wrapper field-<name>" data-id="<id>"
data-required="true"
data-requiredErrorMessage="This field is required">
<label for="<id>" class="field-label">Label</label>
<select id="<id>" name="<name>" required title="Tooltip" multiple>
<option disabled selected value="">Placeholder</option>
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
</select>
<div class="field-description" id="<id>-description"> Description or error message
</div>
</div>

プレーンテキスト

追加のプロパティ:

例：

<div class="plain-text-wrapper field-wrapper field-<name>" data-id="<id>">
<label for="<id>" class="field-label">Label</label>
<p>Text or <a href="..." target="_blank">link</a></p>
</div>

チェックボックス

追加のプロパティ:

例：

<div class="checkbox-wrapper field-wrapper field-<name>" data-id="<id>"
data-required="true"
data-requiredErrorMessage="Please check this box">
<label for="<id>" class="field-label">Label</label>
<input type="checkbox"
id="<id>"
name="<name>" value="on"
required
data-unchecked-value="off" />
<div class="field-description" id="<id>-description"> Description or error message
</div>
</div>

ボタン

追加のプロパティ:

例：

<div class="button-wrapper field-wrapper field-<name>" data-id="<id>">
<button id="<id>" name="<name>" type="submit" class="button"> Label
</button>
</div>

マルチライン入力

追加のプロパティ:

例：

<div class="multiline-wrapper field-wrapper field-<name>" data-id="<id>"
data-minLengthErrorMessage="Too short" data-maxLengthErrorMessage="Too long">
<label for="<id>" class="field-label">Label</label>
<textarea id="<id>"
name="<name>" required
minlength="2"
maxlength="100"
pattern="[A-Za-z]+"
placeholder="Type here..."></textarea>
<div class="field-description" id="<id>-description"> Description or error message
</div>
</div>

パネル

追加のプロパティ:

例：

<fieldset class="panel-wrapper field-wrapper field-<name>" data-id="<id>"
name="<name>"
data-repeatable="true" data-index="0">
<legend class="field-label">Label</legend>
<!-- Nested fields here -->
<button type="button" class="add">Add</button>
<button type="button" class="remove">Remove</button>
<div class="field-description" id="<id>-description"> Description or error message
</div>
</fieldset>

ラジオ

追加のプロパティ:

例：

<div class="radio-wrapper field-wrapper field-<name>" data-id="<id>"
data-required="true">
<label for="<id>" class="field-label">Label</label>
<input type="radio" id="<id>" name="<name>" value="opt1" required />
<div class="field-description" id="<id>-description"> Description or error message
</div>
</div>

ラジオグループ

追加のプロパティ:

例：

<fieldset class="radio-group-wrapper field-wrapper field-<name>" data-id="<id>"
data-required="true">
<legend class="field-label">Label</legend>
<div>
<input type="radio" id="<id>-0" name="<name>" value="opt1" required />
<label for="<id>-0">Option 1</label>
</div>
<div>
<input type="radio" id="<id>-1" name="<name>" value="opt2" />
<label for="<id>-1">Option 2</label>
</div>
<div class="field-description" id="<id>-description"> Description or error message
</div>
</fieldset>

チェックボックスグループ

追加のプロパティ:

例：

<fieldset class="checkbox-group-wrapper field-wrapper field-<name>" data-id="<id>"
data-required="true" data-minItems="1"
data-maxItems="3">
<legend class="field-label">Label</legend>
<div>
<input type="checkbox" id="<id>-0" name="<name>" value="opt1" required />
<label for="<id>-0">Option 1</label>
</div>
<div>
<input type="checkbox" id="<id>-1" name="<name>" value="opt2" />
<label for="<id>-1">Option 2</label>
</div>
<div class="field-description" id="<id>-description"> Description or error message
</div>
</fieldset>

画像

追加のプロパティ:

例：

<div class="image-wrapper field-wrapper field-<name>" data-id="<id>">
<picture>
<img src="..." alt="..." />
<!-- Optimized sources -->
</picture>
</div>

見出し

追加のプロパティ:

例：

<div class="heading-wrapper field-wrapper field-<name>" data-id="<id>">
<h2 id="<id>">Heading Text</h2>
</div>

詳しくは、blocks/form/form.js および blocks/form/util.js の実装を参照してください。

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab