html中新建表格样式表,建立HTML5表單的CSS樣式

建立HTML5表單的CSS樣式

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

注意

在CSS類別中，請勿變更寬度、高度、邊框粗細、上、左、右、下、邊框間距、邊界以及其他位置和大小屬性的值。 位置和大小屬性中的任何變更都會對表單的版面配置造成變更。

CSS類  用於元素

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

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

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

注意

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

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

欄位元素

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

介面工具集元素

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

介面工具集:每個小部件都有這個類。

名稱:隨AEM提供的所有小部件都包含小部件名稱類。對於自訂介面工具集，介面工具集開發人員提供介面工具集名稱類。

類型:每個Widget都有一個使用者介面元素。此類定義用戶介面元素的類型。

caption content

widget content

widget content

除了類型和名稱類別，欄位元件還包含名為​subtype​的附加CSS類。 子類型標識其是哪種類型的欄位，例如NumericField、DateField、TextField。 您可以改寫子類型類，以修改所有類型、子類型欄位的樣式。

不同元件的CSS類

元件

類型

名稱

頁面

頁面

用戶定義的名稱

或

Page(預設)

內容區域

contentrea

用戶定義的名稱

子表單

子表單

用戶定義的名稱

排除群組

exclgroup

用戶定義的名稱

Draw

繪圖

用戶定義的名稱

欄位

欄位

用戶定義的名稱

插圖標題

caption

不適用

Widget

介面

介面工具集開發人員會加以定義(針對使用者定義的介面工具集，請參閱下節中的表格)

不同欄位的CSS類

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

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

欄位類型

子類型

介面工具集名稱

介面工具集類型

HTML UI標籤

按鈕

不適用

xfaButton

buttonfieldwidget

input type=button

CheckButton

checkboxfield

XfaCheckBox

checkboxfieldwidget

輸入類型=checkbox

DateField

datefield

dateField

datefieldwidget

input type=text

DateTimeField

textfield

textField

textfieldwidget

input type=text

DecimalField

numericfield

numericInput

numericfieldwidget

input type=text

下拉

choelist

dropDownListWidget

choelistwidget

選取

ListBox

choelist

listBoxWidget

choelistwidget

ol

NumericField

numericfield

numericInput

numericfieldwidget

input type=text

PasswordField

passwordfield

defaultWidget

passwordfieldwidget

input type=password

RadioButton

radiofield

XfaCheckBox

radiofieldwidget

input type=radio

TextField

textfield

textField

textfieldwidget

input type=text

TimeField

textfield

textField

textfieldwidget

input type=text

不同繪製元素的CSS類

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