HTML5 フォームのための CSS スタイルの作成

XFA ベースのフォームテンプレートの HTML5 レンダリングは、さまざまな HTML 要素で構成されています。これらの要素は一定の順序で整列されます。すべての要素には、適切に定義された CSS クラスがあります。これらの CSS クラスを使用して、要素の外観を選択し変更することができます。

メモ

CSS クラスで、幅、高さ、境界線厚さ、上、左、右、下、パディング、マージン、およびその他の位置とサイズの属性は変更しないでください。位置とサイズの属性を変更すると、フォームのレイアウトが変わります。

要素の CSS クラス

すべての要素には、適切に定義された CSS クラスがあります。これらのクラスを変更して、要素の外観を変更することができます。フィールド要素と描画要素を除くすべての要素は、2 つの CSS クラス（Type クラスと Name クラス）を持ちます。

Type クラスは XFA フィールドのタイプを表します。type クラスをオーバーライドして、特定タイプのすべての要素のスタイルを変更できます。
Name クラスは XFA フィールドの名前に対応します。name クラスをオーバーライドして、スタイルを変更しカスタムスタイルを要素に適用できます。

メモ

一部の XFA 要素には名前がありません。そのようなコンポーネントのスタイルを変更するには、その特定タイプのすべてのコンポーネントを変更してください。

AEM Forms Designer で名付けられていないページでは、HTML5 フォームのページはページ番号順に名付けられます。例えば、2 ページからなる HTML5 フォームの場合、ページは Page1 および Page2 と名付けられます。

Field 要素

Field 要素にはネストされた要素が 2 つ（widget と caption）あります。

Widget 要素

Widget 要素にはユーザーとやりとりするためのユーザーインターフェイス要素が含まれています。これには3つのCSSクラスがあります。

ウィジェット:すべてのウィジェットにこのクラスがあります。
name:AEMと共に出荷されるすべてのウィジェットにはウィジェット名のクラスが含まれています。カスタムウィジェットの場合、ウィジェット開発者はウィジェット名のクラスを提供します。
type:すべてのウィジェットにはユーザーインターフェイス要素があります。このクラスは、ユーザーインターフェイス要素のタイプを定義します。

<!--field with caption-->
<div class="field numericfield NumericField3 ">
     <div class="caption">
        caption content
     </div>
     <div class="widget numericfieldwidget numericInput">
       widget content
     </div>
</div>
 
<!--field without caption-->
<div class="widget numericfieldwidget numericInput">
   widget content
</div>

type と name クラスの他に、フィールドコンポーネントにも subtype という名前の追加の CSS クラスがあります。subtype はそれがどのフィールドのタイプであるかを識別します。例：NumericField、DateField、TextField。subtype クラスはオーバーライドして、subtype のタイプであるすべてのフィールドのスタイル設定を変更できます。

異なるコンポーネントに対する CSS クラス

コンポーネント	タイプ	名前
ページ	page	ユーザー定義の名前または Page<pageNumber>（デフォルト）
コンテンツ領域	contentarea	ユーザー定義の名前
サブフォーム	サブフォーム	ユーザー定義の名前
排他グループ	exclgroup	ユーザー定義の名前
図面	draw	ユーザー定義の名前
フィールド	field	ユーザー定義の名前
キャプション	caption	該当なし
ウィジェット	widget	ウィジェット開発者が定義します（ユーザー定義のウィジェットに関しては、以下のセクションの表を参照してください）

異なるフィールドに対する CSS クラス

AEM Forms Designer はフォームで NumericField、DecimalField、および Date Field などの異なるタイプのフィールドをサポートしています。HTML ですべてのこれらのフィールドには上記の CSS クラスがあります。また、それらにはフィールドのタイプによっては、いくつかの追加のクラスがあります。

すべてのフィールドには UI 要素を示す、関連するウィジェットがあります。各フィールドのクラス、および各フィールドに関連するウィジェットを以下に示します。

フィールドタイプ	サブタイプ	ウィジェット名	ウィジェットタイプ	HTML UI タグ
ボタン	該当なし	xfaButton	buttonfieldwidget	input type=button
チェックボタン	checkboxfield	XfaCheckBox	checkboxfieldwidget	input type=checkbox
日付フィールド	datefield	dateField	datefieldwidget	input type=text
日時フィールド	textfield	textField	textfieldwidget	input type=text
10 進数フィールド	numericfield	numericInput	numericfieldwidget	input type=text
ドロップダウンリスト	choicelist	dropDownListWidget	choicelistwidget	select
リストボックス	choicelist	listBoxWidget	choicelistwidget	ol
数値フィールド	numericfield	numericInput	numericfieldwidget	input type=text
パスワードフィールド	passwordfield	defaultWidget	passwordfieldwidget	input type=password
ラジオボタン	radiofield	XfaCheckBox	radiofieldwidget	input type=radio
テキストフィールド	textfield	textField	textfieldwidget	input type=text
時間フィールド	textfield	textField	textfieldwidget	input type=text

異なる Draw 要素に対する CSS クラス

AEM Forms Designer を使用して、テキスト、画像など、スタティックの描画要素を挿入できます。それぞれの描画要素に対し、別の CSS クラスがそれらの要素に関連しています。描画要素の CSS クラスのリストを以下に示します。それぞれの描画要素には、それに関連する draw クラスがあります。