建立HTML5表單的CSS樣式 creating-css-styles-for-html-forms

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

NOTE
在CSS類別中,請勿變更width、height、border-thickness、top、left、right、bottom、padding、margin及其他位置與大小屬性的值。 位置和大小屬性的任何變更都會對表單的版面配置造成變更。

元素的CSS類別  css-classes-nbsp-for-elements-nbsp

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

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

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

NOTE
有些XFA元素沒有名稱。 若要變更這類元件的樣式,請修改該特定型別的所有元件。

對於AEM Forms Designer中未命名的頁面,HTML5表單中的頁面會依其編號的遞增順序命名。 例如,如果是具有兩個頁面的HTML5表單,這些頁面的名稱為Page1, Page2。

欄位元素 field-element

欄位元素包含兩個巢狀元素:Widget和標題。

Widget元素

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

  • Widget:每個Widget都有這個類別。
  • 名稱:AEM隨附的所有Widget都包含Widget Name類別。 對於自訂Widget,Widget開發人員會提供Widget name類別。
  • type:每個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>

除了型別和名稱類別外,欄位元件也包含其他名為的CSS類別 子型別. 子型別會識別其欄位型別,例如NumericField、DateField、TextField。 您可以覆寫子型別類別,以修改型別、子型別的所有欄位的樣式。

不同元件的CSS類別 css-classes-for-different-components

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

頁面<pagenumber> (預設)
內容區域
contentarea
使用者定義的名稱
子表單
子表單
使用者定義的名稱
排除群組
exclgroup
使用者定義的名稱
Draw
draw
使用者定義的名稱
欄位
欄位
使用者定義的名稱
插圖標題
註解
不適用
Widget
Widget
Widget開發人員會加以定義(若是使用者定義的Widget,請參閱下節中的表格)

不同欄位的CSS類別 css-classes-for-different-fields

AEM Forms Designer支援表單中不同型別的欄位,例如「數值欄位」、「十進位欄位」和「日期欄位」。 HTML中的所有欄位都包含上述CSS類別。 它們也包含一些額外的類別,視欄位型別而定。

每個欄位都有一個代表UI元素的關聯Widget。 以下列出每個欄位的類別以及與每個欄位相關聯的Widget。

欄位型別
子類型
Widget名稱
Widget型別
HTMLUI標籤
按鈕
不適用
xfaButton
buttonfieldwidget
輸入型別=按鈕
核取按鈕
核取方塊欄位
XfaCheckBox
checkboxfieldwidget
input type=checkbox
日期欄位
datefield
dateField
datefieldwidget
輸入型別=文字
日期時間欄位
textfield
textField
textfieldwidget
輸入型別=文字
DecimalField
numericfield
數值輸入
numericfieldwidget
輸入型別=文字
下拉式清單
choicelist
dropDownListWidget
choicelistwidget
選取
ListBox
choicelist
listBoxWidget
choicelistwidget
ol
數值欄位
numericfield
數值輸入
numericfieldwidget
輸入型別=文字
密碼欄位
密碼欄位
defaultWidget
密碼欄位Widget
input type=password
RadioButton
無線電場
XfaCheckBox
Radiofieldwidget
input type=radio
文字欄位
textfield
textField
textfieldwidget
輸入型別=文字
時間欄位
textfield
textField
textfieldwidget
輸入型別=文字

不同繪圖元素的CSS類別 css-classes-for-different-draw-elements

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

Draw Type
CSS類別
文字
text
影像
影像
矩形
矩形
Line
折線圖

設定表單其他部分的樣式 styling-other-parts-of-the-form

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

Styling Inline Errors

當欄位驗證導致錯誤時,當欄位處於活動狀態時會顯示內嵌錯誤。 若要變更內嵌錯誤的樣式,請覆寫CSS ID error-msg.

Styling Inline Warnings

當欄位驗證導致警告時,當欄位處於活動狀態時會顯示內嵌警告。 若要變更這些內嵌警告的樣式,請覆寫CSS ID warning-msg.

Styling Fields with Validation Errors

當欄位驗證失敗時,Widget的樣式會變更。 此樣式變更是透過套用CSS類別來完成 widgetError 在widget元件上。 若要修改預設樣式,請覆寫 widgetError 類別。

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2