HTML5 フォームのための CSS スタイルの作成 creating-css-styles-for-html-forms

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

要素の CSS クラス css-classes-nbsp-for-elements-nbsp

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

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

Field 要素 field-element

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 のタイプであるすべてのフィールドのスタイル設定を変更できます。

異なるコンポーネントに対する CSS クラス css-classes-for-different-components

異なるフィールドに対する CSS クラス css-classes-for-different-fields

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

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

異なる Draw 要素に対する CSS クラス css-classes-for-different-draw-elements

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

フォームにおける他の部分のスタイル設定 styling-other-parts-of-the-form

HTML フォームでの UI コンポーネントの外観の以外に、インラインエラー、インライン警告および検証エラーのあるフィールドなどの要素のスタイルを変更できます。

Styling Inline Errors

フィールドの検証によりエラーが発生した場合、フィールドがアクティブのときにインラインエラーが表示されます。インラインエラーのスタイルを変更するには、CSS ID error-msg をオーバーライドします。

Styling Inline Warnings

フィールドの検証により警告が発生した場合、フィールドがアクティブのときにインライン警告が表示されます。これらのインライン警告のスタイルを変更するには、CSS ID warning-msg をオーバーライドします。

Styling Fields with Validation Errors

フィールドの検証に失敗すると、ウィジェットのスタイルが変更されます。このスタイルの変更はウィジェットコンポーネントに **widgetError **​の CSS クラスを適用することにより実施されます。デフォルトのスタイル設定を変更するには、widgetError クラスをオーバーライドします。