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

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

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

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

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

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

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

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

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

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

フィールド要素 field-element

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 クラス css-classes-for-different-components

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

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

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 クラス css-classes-for-different-draw-elements

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

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

フォームの他の部分のスタイル設定 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 クラスをオーバーライドします。

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da