現在表示中:

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

注意:

CSS クラスで、幅、高さ、境界線厚さ、上、左、右、下、パディング、マージン、およびその他の位置とサイズの属性は変更しないでください。位置とサイズの属性を変更すると、フォームのレイアウトが変わります。

要素の CSS クラス

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

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

注意:

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

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

Field 要素

Field 要素にはネストされた要素が 2 つ(widget と caption)あります。 

Widget 要素

Widget 要素にはユーザーとやりとりするためのユーザーインターフェイス要素が含まれています。それには 3 つの CSS クラスがあります。

  • Widgetすべてのウィジェットにこのクラスがあります。
  • nameAEM とともに出荷されたすべてのウィジェットにはウィジェット名のクラスがあります。カスタムウィジェットでは、ウィジェット開発者がウィジェット名のクラスを提供します。
  • 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 のタイプであるすべてのフィールドのスタイル設定を変更できます。

異なるコンポーネントに対する CSS クラス

コンポーネント タイプ 名前
ページ page ユーザー定義の名前
または
Page<pageNumber>(デフォルト)
コンテンツ領域 contentarea ユーザー定義の名前
サブフォーム サブフォーム ユーザー定義の名前
排他グループ exclgroup ユーザー定義の名前
図面 draw ユーザー定義の名前
フィールド field ユーザー定義の名前
キャプション caption 該当なし
ウィジェット widget ウィジェット開発者が定義します(ユーザー定義のウィジェットに関しては、以下のセクションの表を参照してください)

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

AEM Forms 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

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

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

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

フォームにおける他の部分のスタイル設定

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

インラインエラーのスタイル設定

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

インライン警告のスタイル設定

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

検証エラーのあるフィールドのスタイル設定

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

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー