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

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

CSS類別  針對元素  css-classes-nbsp-for-elements-nbsp

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

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

欄位元素 field-element

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

Widget元素

widget元素包含用於與使用者互動的使用者介面元素。 它有三個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>

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

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

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

AEM Forms Designer支援表單中不同型別的欄位，例如NumericField、DecimalField和Date Field。 HTML中的所有欄位都包含上述CSS類別。 它們也包含一些額外的類別，視欄位型別而定。

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

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

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

設定表單其他部分的樣式 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的樣式會變更。 此樣式變更是透過在Widget元件上套用CSS類別​ widgetError ​來完成。 若要修改預設樣式，請覆寫​ widgetError ​類別。