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