XFA ベースのフォームテンプレートのHTML5 レンディションは、複数のHTML要素で構成されます。 これらの要素は、順に並べられます。 すべての要素には、適切に定義された CSS クラスがあります。 これらの CSS クラスを使用して、要素の外観を選択および変更できます。
CSS クラスで、width、height、border-thickness、top、left、right、bottom、padding、margin、およびその他の position 属性と size 属性の値を変更しないでください。 位置およびサイズの属性を変更すると、フォームのレイアウトが変更されます。
すべての要素には、適切に定義された 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 クラスがあります。
<!--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 型のすべてのフィールドのスタイル設定を変更できます。
コンポーネント | タイプ | 名前 |
ページ | ページ | ユーザー定義名 または ページ<pagenumber> (デフォルト) |
コンテンツ領域 | contentarea | ユーザー定義名 |
サブフォーム | subform | ユーザー定義名 |
除外グループ | exclgroup | ユーザー定義名 |
図面 | draw | ユーザー定義名 |
フィールド | field | ユーザー定義名 |
キャプション | caption | 該当なし |
ウィジェット | widget | ウィジェット開発者が定義します(ユーザー定義のウィジェットの場合は、次の節の表を参照してください)。 |
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 |
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 クラスをオーバーライドします。