以XFA為基礎的表單範本的HTML5轉譯由數個HTML元素組成。 這些元件按順序排列。 每個元素都有定義良好的CSS類別。 您可以使用這些CSS類別來選取和變更元素的外觀。
在CSS類別中,請勿變更寬度、高度、邊框粗細、頂端、左、右、底部、填補空間、邊界和其他位置與大小屬性的值。 位置和大小屬性的任何變更都會對表單的版面配置造成變更。
每個元素都包含定義良好的CSS類別。 您可以修改這些類以更改元素的外觀。 除了欄位和繪圖元素之外,每個元素都有兩個CSS類別- Type class和Name class。
Type類表示XFA欄位的類型。 您可以覆寫type
類以修改特定類型的所有元素的樣式。
Name類與XFA欄位的名稱相對應。 您可以覆寫name
類別,以修改元素並套用自訂樣式。
某些XFA元素沒有名稱。 要更改此類元件的樣式,請修改該特定類型的所有元件。
對於未在AEM Forms Designer中命名的頁面,HTML5表單中的頁面會依其數目的遞增順序命名。 例如,對於具有兩頁的HTML5表單,頁面名稱為Page1, Page2。
欄位元素包含兩個巢狀元素:介面工具集和標題。
介面工具集元素
介面工具集元素包含與使用者互動的使用者介面元素。 它有三個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類別外,欄位元件還包含一個名為subtype的附加CSS類別。 子類型可識別其是何種類型的欄位,例如NumericField、DateField、TextField。 您可以覆蓋子類型類以修改所有類型欄位的樣式,子類型。
元件 | 類型 | 名稱 |
頁面 | 頁面 | 用戶定義的名稱 或 Page<pageNumber>(預設) |
內容區域 | contentarea | 用戶定義的名稱 |
子表單 | 子表單 | 用戶定義的名稱 |
排除群組 | exclgroup | 用戶定義的名稱 |
Draw | 繪製 | 用戶定義的名稱 |
欄位 | 欄位 | 用戶定義的名稱 |
插圖標題 | caption | 不適用 |
Widget | 介面工具集 | 介面工具集開發人員會定義它(若需使用者定義的介面工具集,請參閱下節中的表格) |
AEM Forms Designer支援不同類型的欄位,例如NumericField、DecimalField和Date Field。 HTML中的這些欄位都包含上述的CSS類別。 它們還包含一些額外類,具體取決於欄位的類型。
每個欄位都有一個代表UI元素的關聯介面工具集。 每個欄位的類和與每個欄位關聯的Widget列在下面。
欄位類型 | 子類型 | 介面工具集名稱 | 介面工具集類型 | HTML UI標籤 |
按鈕 |
不適用 | xfaButton |
buttonfieldwidget |
輸入類型=button |
CheckButton |
checkboxfield |
XfaCheckBox |
checkboxfieldwidget |
輸入類型=checkbox |
DateField |
datefield |
dateField |
datefieldwidget |
輸入類型=text |
DateTimeField |
textfield |
textField |
textfieldwidget | 輸入類型=text |
DecimalField |
numericfield |
numericInput |
numericfieldwidget |
輸入類型=text |
DropDown |
choicelist |
dropDownListWidget |
choicelistwidget |
sect |
ListBox |
choicelist |
listBoxWidget |
choicelistwidget |
ol |
NumericField |
numericfield |
numericInput |
numericfieldwidget |
輸入類型=text |
PasswordField |
密碼欄位 |
defaultWidget |
密碼域widget<a0/ |
輸入類型=password |
RadioButton |
radiofield |
XfaCheckBox |
放射性域widget |
輸入類型=radio |
TextField |
textfield |
textField |
textfieldwidget |
輸入類型=text |
TimeField |
textfield |
textField |
textfieldwidget |
輸入類型=text |
您可以使用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類。