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

注意

AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.

XFA ベースのフォームテンプレートのHTML5 レンディションは、複数のHTML要素で構成されます。 これらの要素は、順に並べられます。 すべての要素には、適切に定義された CSS クラスがあります。 これらの CSS クラスを使用して、要素の外観を選択および変更できます。

メモ

CSS クラスで、width、height、border-thickness、top、left、right、bottom、padding、margin、およびその他の position 属性と size 属性の値を変更しないでください。 位置およびサイズの属性を変更すると、フォームのレイアウトが変更されます。

要素の CSS クラス 

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

  • Type クラス​は XFA フィールドのタイプを表します。type クラスをオーバーライドして、特定タイプのすべての要素のスタイルを変更できます。

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

メモ

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

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

フィールド要素

field 要素には、ネストされた 2 つの要素が含まれます。ウィジェットとキャプション。

ウィジェット要素

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 クラスの他に、フィールドコンポーネントにも、という名前の追加の CSS クラスが含まれます サブタイプ. サブタイプは、どのフィールドのタイプかを示します（例： NumericField、DateField、TextField）。 subtype クラスをオーバーライドして、subtype 型のすべてのフィールドのスタイル設定を変更できます。

異なるコンポーネントの CSS クラス

コンポーネント タイプ 名前
ページ ページ ユーザー定義名
または
ページ<pagenumber> （デフォルト）
コンテンツ領域 contentarea ユーザー定義名
サブフォーム subform ユーザー定義名
除外グループ exclgroup ユーザー定義名
図面 draw ユーザー定義名
フィールド field ユーザー定義名
キャプション caption 該当なし
ウィジェット widget ウィジェット開発者が定義します（ユーザー定義のウィジェットの場合は、次の節の表を参照してください）。

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

AEM Forms Designer は、NumericField、DecimalField、Date Field など、様々な種類のフィールドをフォームでサポートしています。 HTML内のこれらのフィールドには、上記の CSS クラスがすべて含まれています。 また、フィールドのタイプに応じて、いくつかの追加のクラスが含まれます。

各フィールドには、UI 要素を表す関連ウィジェットがあります。 各フィールドのクラスと各フィールドに関連付けられたウィジェットを以下に示します。

フィールドタイプ サブタイプ ウィジェット名 ウィジェットタイプ HTML UI タグ
ボタン
 該当なし xfaButton
 buttonfieldwidget
 input type=button
CheckButton
 checkboxfield
 XfaCheckBox
 checkboxfieldwidget
 input type=checkbox
DateField
 datefield
 dateField
 datefieldwidget
 inputtype = text
DateTimeField
 textfield
 textField
 textfieldwidget inputtype = text
DecimalField
 numericfield
 numericInput
 numericfieldwidget
 inputtype = text
DropDown
 choicelist
 dropDownListWidget
 choicelistwidget
 「」を選択します
ListBox
 choicelist
 listBoxWidget
 choicelistwidget
 ol
NumericField
 numericfield
 numericInput
 numericfieldwidget
 inputtype = text
PasswordField
 passwordfield
 defaultWidget
 passwordfieldwidget
 input type=password
ラジオボタン
 radiofield
 XfaCheckBox
 radiofieldwidget
 input type=radio
TextField
 textfield
 textField
 textfieldwidget
 inputtype = text
TimeField
 textfield
 textField
 textfieldwidget
 inputtype = text

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

AEM Forms Designer を使用して、テキストや画像などの静的な描画要素を挿入できます。 各描画要素に対して、別々の CSS クラスがその要素に関連付けられます。 描画要素の CSS クラスのリストを以下に示します。 すべての描画要素には、それに関連付けられた描画クラスがあります。

描画タイプ CSS クラス
テキスト text
画像 image
長方形 長方形
Line 線

フォームの他の部分のスタイル設定

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

Styling Inline Errors

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

Styling Inline Warnings

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

Styling Fields with Validation Errors

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

このページ