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

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

Last update: Sat Apr 04 2026 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：入力、選択、またはフィールドセット要素の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
テキスト、電子メール、パスワード、電話
minLength
minlength
テキスト、電子メール、パスワード、電話
pattern
pattern
テキスト、電子メール、パスワード、電話
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