建立HTML5表單的CSS樣式

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

注意

在CSS類別中，請勿變更寬度、高度、邊框粗細、上、左、右、下、邊框間距、邊界以及其他位置和大小屬性的值。 位置和大小屬性中的任何變更都會對表單的版面配置造成變更。

CSS類  用於元素 

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

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

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

注意

某些XFA元素沒有名稱。 要更改此類元件的樣式，請修改該特定類型的所有元件。

對於在AEM Forms設計工具中未命名的頁面，HTML5表單中的頁面會以其數量的遞增順序命名。 例如，對於含有兩頁的HTML5表單，頁面名為Page1、Page2。

欄位元素

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

介面工具集元素

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

  • 介面工具集:每個小部件都有這個類。
  • 名稱:隨AEM提供的所有小部件都包含小部件名稱類。對於自訂介面工具集，介面工具集開發人員提供介面工具集名稱類。
  • 類型:每個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>

除了類型和名稱類別，欄位元件還包含名為​subtype​的附加CSS類。 子類型標識其是哪種類型的欄位，例如NumericField、DateField、TextField。 您可以改寫子類型類，以修改所有類型、子類型欄位的樣式。

不同元件的CSS類

元件 類型 名稱
頁面 頁面 用戶定義的名稱
或
Page<pageNumber>（預設）
內容區域 contentrea 用戶定義的名稱
子表單 子表單 用戶定義的名稱
排除群組 exclgroup 用戶定義的名稱
Draw 繪圖 用戶定義的名稱
欄位 欄位 用戶定義的名稱
插圖標題 caption 不適用
Widget 介面 介面工具集開發人員會加以定義（針對使用者定義的介面工具集，請參閱下節中的表格）

不同欄位的CSS類

AEM Forms設計工具支援不同類型的欄位，如數值欄位、小數欄位和日期欄位。 HTML中的所有這些欄位都包含上述的CSS類別。 視欄位類型而定，它們也包含一些額外類別。

每個欄位都有一個代表UI元素的關聯Widget。 下面列出了每個欄位的類和與每個欄位關聯的小部件。

欄位類型 子類型 介面工具集名稱 介面工具集類型 HTML UI標籤
按鈕
 不適用 xfaButton
 buttonfieldwidget
 input type=button
CheckButton
 checkboxfield
 XfaCheckBox
 checkboxfieldwidget<a0/
 輸入類型=checkbox
DateField
 datefield
 dateField
 datefieldwidget<a0/
 input type=text
DateTimeField
 textfield
 textField
 textfieldwidget input type=text
DecimalField
 numericfield
 numericInput
 numericfieldwidget
 input type=text
下拉
 choelist
 dropDownListWidget
 choelistwidget
 選取
ListBox
 choelist
 listBoxWidget
 choelistwidget
 ol
NumericField
 numericfield
 numericInput
 numericfieldwidget
 input type=text
PasswordField
 passwordfield<a0/
 defaultWidget
 passwordfieldwidget<a0/
 input type=password
RadioButton
 radiofield
 XfaCheckBox
 radiofieldwidget
 input type=radio
TextField
 textfield
 textField
 textfieldwidget<a0/
 input type=text
TimeField
 textfield
 textField
 textfieldwidget<a0/
 input type=text

不同繪製元素的CSS類

您可以使用AEM Forms設計工具插入靜態繪圖元素，如文字和影像。 對於每個繪圖元素，單獨的CSS類與該元素相關聯。 下面列出了用於繪製元素的CSS類清單。 每個繪製元素都有一個與其關聯的繪製類。

繪圖類型 CSS 類別
文字 文字
影像 影像
矩形 矩形
Line 折線圖

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

除了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​類別。

本頁內容