建立HTML5表單的CSS樣式

以XFA為基礎的表單範本的HTML5轉譯由數個HTML元素組成。 這些元件按順序排列。 每個元素都有定義良好的CSS類別。 您可以使用這些CSS類別來選取和變更元素的外觀。

CSS類別  for elements 

每個元素都包含定義良好的CSS類別。 您可以修改這些類以更改元素的外觀。 除了欄位和繪圖元素之外，每個元素都有兩個CSS類別- Type class和Name class。

• Type類​表示XFA欄位的類型。 您可以覆寫type類以修改特定類型的所有元素的樣式。

• Name類​與XFA欄位的名稱相對應。 您可以覆寫name類別，以修改元素並套用自訂樣式。

對於未在AEM Forms Designer中命名的頁面，HTML5表單中的頁面會依其數目的遞增順序命名。 例如，對於具有兩頁的HTML5表單，頁面名稱為Page1, Page2。

欄位元素

欄位元素包含兩個巢狀元素：介面工具集和標題。

介面工具集元素

介面工具集元素包含與使用者互動的使用者介面元素。 它有三個CSS類別：

• 介面工具集:每個Widget都有這個類別。
• 名稱:AEM隨附的所有Widget都包含Widget名稱類別。對於自訂介面工具集，介面工具集開發人員會提供介面工具集名稱類別。
• 類型:每個Widget都有使用者介面元素。此類定義用戶介面元素的類型。

<!--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類別。 子類型可識別其是何種類型的欄位，例如NumericField、DateField、TextField。 您可以覆蓋子類型類以修改所有類型欄位的樣式，子類型。

不同元件的CSS類別

不同欄位的CSS類別

AEM Forms Designer支援不同類型的欄位，例如NumericField、DecimalField和Date Field。 HTML中的這些欄位都包含上述的CSS類別。 它們還包含一些額外類，具體取決於欄位的類型。

每個欄位都有一個代表UI元素的關聯介面工具集。 每個欄位的類和與每個欄位關聯的Widget列在下面。

不同繪圖元素的CSS類

您可以使用AEM Forms Designer插入靜態繪圖元素，例如文字和影像。 對於每個繪圖元素，會有個別的CSS類別與該元素相關聯。 繪圖元素的CSS類別清單列於下方。 每個繪圖元素都有一個與之關聯的繪圖類。

設定表單的其他部分的樣式

除了HTML表單中的UI元件外觀，您還可以變更元素的樣式，例如「內嵌錯誤」、「內嵌警告」和具有驗證錯誤的欄位。

Styling Inline Errors

當欄位驗證導致錯誤時，在作用中的欄位時會顯示內嵌錯誤。 若要變更內嵌錯誤的樣式，請覆寫CSS ID error-msg。

Styling Inline Warnings

當欄位驗證產生警告時，當欄位處於作用中時，會顯示內嵌警告。 若要變更這些內嵌警告的樣式，請覆寫CSS ID warning-msg。

Styling Fields with Validation Errors

當欄位驗證失敗時，介面工具集的樣式會變更。 此樣式變更是透過在Widget元件上套用CSS類別​widgetError​來完成。 要修改預設樣式，請覆蓋​widgetError​類。