XFA ベースのフォームテンプレートの HTML5 レンダリングは、さまざまな HTML 要素で構成されています。これらの要素は一定の順序で整列されます。すべての要素には、適切に定義された CSS クラスがあります。これらの CSS クラスを使用して、要素の外観を選択し変更することができます。
CSS クラスで、幅、高さ、境界線厚さ、上、左、右、下、パディング、マージン、およびその他の位置とサイズの属性は変更しないでください。位置とサイズの属性を変更すると、フォームのレイアウトが変わります。
すべての要素には、適切に定義された CSS クラスがあります。これらのクラスを変更して、要素の外観を変更することができます。フィールド要素と描画要素を除くすべての要素は、2 つの CSS クラス(Type クラスと Name クラス)を持ちます。
Type クラスは XFA フィールドのタイプを表します。type
クラスをオーバーライドして、特定タイプのすべての要素のスタイルを変更できます。
Name クラスは XFA フィールドの名前に対応します。name
クラスをオーバーライドして、スタイルを変更しカスタムスタイルを要素に適用できます。
一部の XFA 要素には名前がありません。そのようなコンポーネントのスタイルを変更するには、その特定タイプのすべてのコンポーネントを変更してください。
AEM Forms Designer で名付けられていないページでは、HTML5 フォームのページはページ番号順に名付けられます。例えば、2 ページからなる HTML5 フォームの場合、ページは Page1 および Page2 と名付けられます。
Field 要素にはネストされた要素が 2 つ(widget と caption)あります。
Widget 要素
Widget 要素にはユーザーとやりとりするためのユーザーインターフェイス要素が含まれています。これには3つのCSSクラスがあります。
<!--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 のタイプであるすべてのフィールドのスタイル設定を変更できます。
コンポーネント | タイプ | 名前 |
ページ | page | ユーザー定義の名前 または Page<pageNumber>(デフォルト) |
コンテンツ領域 | contentarea | ユーザー定義の名前 |
サブフォーム | サブフォーム | ユーザー定義の名前 |
排他グループ | exclgroup | ユーザー定義の名前 |
図面 | draw | ユーザー定義の名前 |
フィールド | field | ユーザー定義の名前 |
キャプション | caption | 該当なし |
ウィジェット | widget | ウィジェット開発者が定義します(ユーザー定義のウィジェットに関しては、以下のセクションの表を参照してください) |
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 |
AEM Forms Designer を使用して、テキスト、画像など、スタティックの描画要素を挿入できます。それぞれの描画要素に対し、別の CSS クラスがそれらの要素に関連しています。描画要素の CSS クラスのリストを以下に示します。それぞれの描画要素には、それに関連する draw クラスがあります。
描画タイプ | CSS クラス |
---|---|
テキスト | text |
画像 | 画像 |
長方形 | rectangle |
線 | line |
HTMLフォームでのUIコンポーネントの外観の他に、インラインエラー、インライン警告、検証エラーのあるフィールドなどの要素のスタイルを変更できます。
Styling Inline Errors
フィールドの検証によりエラーが発生した場合、フィールドがアクティブのときにインラインエラーが表示されます。インラインエラーのスタイルを変更するには、CSS ID error-msg をオーバーライドします。
Styling Inline Warnings
フィールドの検証により警告が発生した場合、フィールドがアクティブのときにインライン警告が表示されます。これらのインライン警告のスタイルを変更するには、CSS ID warning-msg をオーバーライドします。
Styling Fields with Validation Errors
フィールドの検証に失敗すると、ウィジェットのスタイルが変更されます。このスタイルの変更は、ウィジェットコンポーネントにCSSクラスwidgetErrorを適用することで行います。 デフォルトのスタイル設定を変更するには、widgetErrorクラスをオーバーライドします。