建立HTML5表格的CSS樣式

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

注意

在CSS類別中,請勿變更寬度、高度、邊框粗細、頂端、左、右、底部、填補空間、邊界和其他位置與大小屬性的值。 位置和大小屬性的任何變更都會對表單的版面配置造成變更。

元素的CSS類別 

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

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

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

注意

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

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

欄位元素

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

介面工具集元素

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

  • 介面工具集: 每個小部件都有此類。
  • 名稱: 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類別

元件 類型 名稱
頁面 頁面 使用者定義的名稱

Page<pageNumber>(預設值)
內容區域 contentarea 用戶定義的名稱
子表單 子表單 用戶定義的名稱
排除群組 exclgroup 用戶定義的名稱
Draw 繪製 用戶定義的名稱
欄位 欄位 用戶定義的名稱
插圖標題 caption 不適用
Widget 介面工具集 介面工具集開發人員會定義它(若需使用者定義的介面工具集,請參閱下節中的表格)

不同欄位的CSS類別

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

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

欄位類型 子類型 介面工具集名稱 介面工具集類型 HTML UI標籤
按鈕
不適用 xfaButton
按鈕域widget
input type=button
CheckButton
checkboxfield
XfaCheckBox
checkboxfieldwidget
輸入類型=複選框
日期欄位
datefield
dateField
datefieldwidget
輸入類型=文本
DateTimeField
textfield
textField
textfieldwidget 輸入類型=文本
DecimalField
數字場
numericInput
數字域widget
輸入類型=文本
DropDown
選擇
dropDownListWidget
choicelistwidget
sect
ListBox
選擇
listBoxWidget
choicelistwidget
ol
NumericField
數字場
numericInput
數字域widget
輸入類型=文本
密碼欄位
密碼
defaultWidget
密碼widget
輸入類型=密碼
RadioButton
放射場
XfaCheckBox
放射場widget
input type=radio
TextField
textfield
textField
textfieldwidget
輸入類型=文本
TimeField
textfield
textField
textfieldwidget
輸入類型=文本

不同繪圖元素的CSS類別

您可以使用AEM Forms Designer插入靜態繪圖元素,例如文字和影像。 對於每個繪圖元素,會有個別的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類

本頁內容