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

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

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

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

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

欄位元素 field-element

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

介面工具集元素

介面工具集元素包含與使用者互動的使用者介面元素。 它有三個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類別，欄位元件也包含另一個名為的CSS類別 子類型. 子類型標識其是哪種類型的欄位，例如NumericField、DateField、TextField。 您可以改寫子類型類，以修改所有類型、子類型欄位的樣式。

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

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

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

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

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

您可以使用AEM Forms設計工具插入靜態繪圖元素，如文字和影像。 對於每個繪圖元素，單獨的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

欄位驗證失敗時，介面工具集的樣式會變更。 此樣式變更是透過套用CSS類別來完成 widgetError 在widget元件上。 要修改預設樣式，請覆蓋 widgetError 類別。