基礎元件 foundation-components

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：
製作

建立對象：

使用者

CAUTION

AEM 6.4已結束延伸支援，本檔案不再更新。如需詳細資訊，請參閱技術支援期. 尋找支援的版本此處.

NOTE

本節說明基礎元件，這些元件已隨AEM提供許多版本，且可在標準AEM安裝中立即使用。不過，AEM 6.4已棄用許多基礎元件。

Adobe建議運用更現代且可擴充的核心元件. 這些是 We.Retail範例內容也可以獨立安裝，用於開發由您的管理員進行。

基礎元件是專為在標準網頁編寫內容時使用而設計。它們構成標準AEM安裝可用的元件子集。

有些可透過元件瀏覽器立即使用，其他則可使用設計模式（如果頁面是根據靜態範本）或依據編輯範本（如果頁面是以可編輯的範本為基礎）。

支援使用基礎元件，但已由核心元件取代，因為核心元件提供更高的擴充性和彈性。

NOTE

本節僅探討標準AEM安裝中可立即使用的元件。

您可能已根據您的執行個體明確開發自訂元件，以符合您的需求。這些元件甚至可能與此處討論的某些元件具有相同的名稱。

元件可在元件頁面編輯器的側面板標籤編輯頁面.

您可以選取元件，並將其拖曳至頁面上的必要位置。然後，您可以使用：

元件會根據稱為元件群組的各種類別排序，包括：

一般:包括基本元件，包括文本、影像、表和圖表。
欄:包括組織內容佈局所需的元件。
表單:包含建立表單所需的所有元件。

一般 general

一般元件是您用來建立內容的基本元件。

帳戶項目 account-item

CAUTION

此基礎元件已淘汰。 Adobe建議使用核心元件。

您可以定義包含標題和說明的連結。

自我調整影像 adaptive-image

CAUTION

此基礎元件已淘汰。 Adobe建議使用核心元件影像元件。

適用性影像基礎元件會產生大小適合開啟網頁之視窗的影像。若要使用元件，您可從檔案系統或DAM提供影像資源。當開啟網頁時，網頁瀏覽器會下載已調整大小的影像副本，以適合目前視窗。

以下特性可確定窗口的大小：

設備螢幕：行動裝置通常會顯示網頁，使其在整個畫面中延伸。
Web瀏覽器窗口大小：筆記型電腦和台式電腦的用戶可以調整Web瀏覽器窗口的大小。

例如，當在手機上開啟網頁時，元件會產生小型影像，而當在平板電腦上開啟中型影像時，元件會產生中型影像。在筆記型電腦上，當在最大化的Web瀏覽器中開啟頁面時，元件會建立並傳遞大型影像。當調整Web瀏覽器的大小以適合螢幕的一部分時，元件會透過傳送較小的影像並重新整理檢視來適應。

支援的影像格式 supported-image-formats

您可以搭配適用性影像元件使用下列副檔名的影像檔案：

.jpg
.jpeg
.PNG
.gif **

CAUTION

**AEM不支援動畫.gif檔案進行最適化轉譯。

影像大小和品質 images-sizes-and-quality

下表列出為給定視區寬度生成的影像寬度。計算所生成的影像的高度以保持恆定的長寬比，並且影像邊緣內不出現空白。裁切可用來避免空格。

當影像為JPEG影像時，檢視區大小也可能影響JPEG品質。可能的JPEG質量如下：

低(0.42)
中(0.82)
高(1.00)

檢視區寬度範圍（像素）

影像寬度（像素）

JPEG 品質

目標裝置類型

寬<= 319

320

低

width = 320

320

中

行動電話（縱向）

320 <寬< 481

480

中

行動電話（橫向）

480 <寬< 769

476

高

平板電腦（縱向）

768 <寬< 1025

620

高

平板電腦（橫向）

寬<= 1025

完全（原始大小）

高

桌面

屬性 properties

對話方塊可讓您編輯適用性影像元件例項的屬性，其中許多與其所依據的影像元件通用。屬性可在兩個索引標籤中使用：

影像
- 影像
  
  從內容尋找器拖曳影像，或按一下以開啟瀏覽視窗，讓您在其中載入影像。載入影像後，您可以裁切影像、旋轉影像或將其刪除。要放大或縮小影像，請使用影像下方的幻燈片條（在「確定」和「取消」按鈕上）
- 裁切
  
  裁切影像。拖曳邊框以裁切影像。
- 旋轉
  
  重複按一下「旋轉」，直到影像按所需旋轉。
- 清除
  刪除當前映像。
進階
- 標題
  
  適用性影像元件不使用此屬性。
- 替代文字
  
  用於影像的替代文字。
- 連結至
  
  適用性影像元件不使用此屬性。
- 說明
  
  適用性影像元件不使用此屬性。

擴展自適應影像元件 extending-the-adaptive-image-component

如需自訂適用性影像元件的相關資訊，請參閱了解自適應影像元件.

傳送 carousel

轉盤元件可讓您顯示與個別頁面相關聯的影像：

一次一個
很短的時間
按您指定的順序
具有您指定之

可點按控制項也可讓使用者隨選即時循環瀏覽顯示的頁面。按一下目前可見的頁面影像，即會前往該頁面。換句話說，輪播就是導覽控制項。

屬性 properties-1

這兩個標籤提供：

傳送

您可在此指定輪播的運作方式：
- 播放速度
  
  顯示下一張幻燈片之前的時間（毫秒）。
- 過渡時間
  
  兩張幻燈片之間轉換的時間（毫秒）。
- 控制項樣式
  
  下拉式功能表提供各種選項；例如， Prev / Next按鈕，右上角的開關。
清單

您可以在此處指定如何將頁面納入輪播：
- 使用以下方式產生清單
  
  建立頁面清單有數種方式 — 子頁面、固定清單、搜尋或進階搜尋（以下皆說明）。
  
  請注意，無論您選擇哪種方法，清單中包含的頁面若已有與頁面相關聯的影像，則會顯示在輪播中的影像。如果該頁面的「頁面屬性」下沒有指定頁面的影像，您應該在開始前將影像與頁面建立關聯，否則輪播會顯示空白（或大部分為空白）頁面。請參閱編輯頁面屬性.
  
  將根據您選擇的新面板的項目顯示：
  - 子頁面的選項
    - 上層頁面
      手動或使用選取器指定路徑。保留為空白，以使用目前頁面作為上層頁面。
  - 固定清單的選項
    - 頁面
      選取頁面清單。使用
      + 添加更多條目和上/下按鈕以調整順序。
  - 搜尋選項
    - 開始
      
      手動輸入或使用選取器輸入起始路徑。
    - 搜尋查詢
      
      您可以輸入純文字檔案搜索查詢。
  - 進階搜尋的選項
    - QueryBuilder 述詞記號
      
      您可以使用查詢建立器述詞標籤法輸入搜尋查詢。例如，您可以輸入"fulltext=Marketing"，讓其內容中具有"Marketing"的所有頁面都顯示在輪播中。
      
      請參閱 QueryBuilder API 以完整討論查詢運算式和其他範例。
- 排序方式
  
  選擇 jcr:title, jcr:created, cq:lastModified，或 cq:template 從下拉式功能表。
- 限制
  
  您要在轉盤中使用的項目數上限；此為選填。

NOTE

您可以為Adobe Experience Manager建立自訂輪播元件，以顯示位於AEM DAM中的數位資產。如需詳細資訊，請參閱建立適用於Adobe Experience Manager的自訂轉盤元件.

圖表 chart

圖表元件可讓您新增長條圖、折線圖或圓形圖。 AEM會從您提供的資料建立圖表。您可以直接在「資料」標籤中輸入內容，或複製並貼上試算表，借此提供資料。

資料
- 圖表資料
  
  使用CSV格式輸入圖表資料；逗號分隔值格式使用逗號(",")作為欄位分隔符。
進階
- 圖表類型
  
  從餅圖、折線圖和條形圖中選擇。
- 替代文字
  
  顯示的替代文字而非圖表。
- 寬度
  
  圖表的寬度（像素）。
- 高度
  
  圖表的高度（像素）。

以下顯示圖表資料的範例，後面接著產生的長條圖：

chlimage_1-192 dc_chart_use

NOTE

您可以建立自訂AEM圖表控制項，以顯示位於AEM JCR中的資料。如需詳細資訊，請參閱在圖表中顯示Adobe Experience Manager資料.

內容片段 content-fragment

內容片段會建立並管理為不受頁面影響的資產。然後，您可以在編寫內容頁面時使用這些片段及其變體。

Design Importer design-importer

這可讓您上傳包含設計套件的zip檔案。

下載 download

下載元件會在選取的網頁上建立連結，以下載特定檔案。您可以從「內容尋找器」拖曳資產或上傳檔案。

下載
- 說明
  
  下載連結所顯示的簡短說明。
- 檔案
  
  可在產生的網頁上下載檔案。從內容尋找器拖曳資產，或按一下區域以上傳可供下載的檔案。

下列範例顯示中的下載元件Geometrixx:

dc_download_use

外部 external

外部應用程式整合元件(外部)可讓您使用iframe將外部應用程式內嵌至您的AEM頁面。

外部

目標應用程式

指定要整合的Web應用程式的URL;例如：

code language-none
`https://en.wikipedia.org/wiki/Main_Page`

傳遞參數

勾選方塊，以便視需要將參數傳遞至應用程式。
寬度和高度

定義iframe的大小

外部應用程式整合到AEM頁面的段落系統中；例如，使用 https://en.wikipedia.org/wiki/Main_Page:

chlimage_1-193

NOTE

例如，根據您的使用案例，其他選項可用於整合外部應用程式。 the 整合Portlet.

閃光燈 flash

CAUTION

此基礎元件已淘汰。 Adobe建議使用核心元件。

CAUTION

若不進行廣泛的專案層級自訂，此元件將不再可立即運作。

Flash元件可讓您載入Flash影片。您可以從內容尋找器將Flash資產拖曳至元件，或使用對話方塊：

閃光燈
- Flash 影片
  
  快閃影片檔案。從內容尋找器拖曳資產，或按一下以開啟瀏覽視窗。
- 大小
  
  Dimension（以像素表示），顯示影片。
替代影像

要顯示的替代影像
進階
- 上下文功能表
  
  指示應顯示還是隱藏上下文菜單。
- 視窗模式
  
  窗口的顯示方式，例如不透明、透明或作為不同（實體）窗口顯示。
- 背景色彩
  
  從提供的顏色圖中選擇的背景顏色。
- 最低版本
  
  運行影片所需的最低AdobeFlash Player版本。預設為9.0.0。
- 屬性
  
  需要任何其他屬性。

影像 image

影像元件會根據指定的參數顯示影像和隨附的文字。

您可以上傳影像，然後編輯和操控影像（例如裁切、旋轉、新增連結/標題/文字）。

您可以從資產瀏覽器直接放到元件或其上配置對話框. 您也可以從「設定」對話方塊上傳影像；此對話方塊也會控制影像的所有定義和操作：

chlimage_1-194

上傳影像後（而非之前），您可以使用置入編輯要根據需要裁切/旋轉影像：

NOTE

就地編輯器在編輯時使用影像的原始大小和外觀比例。您也可以指定高度和寬度屬性。儲存編輯變更時，屬性中定義的任何大小和外觀比例限制都會套用。

根據您的例項，您也可能對頁面設計;這些項目是在項目實施期間開發的。

全螢幕編輯模式提供其他幾個選項；例如，對應和縮放：

NOTE

無法使用Internet Explorer監控上傳進度。

Internet Explorer使用者需上傳影像，然後按一下確定然後重新開啟影像，在預覽中查看已上傳的檔案，並能夠執行修改（即裁切）。

請參閱支援平台區段，以取得AEM所使用HTML5功能的詳細資訊。

載入影像時，您可以設定下列項目：

地圖

要映射影像，請選擇「映射」。您可以指定要如何建立影像映射（矩形、多邊形等）以及區域應指向的位置。
裁切

選取「裁切」以裁切影像。使用滑鼠來裁切影像。
旋轉

要旋轉影像，請選擇「旋轉」。重複使用，直到影像以您想要的方式旋轉為止。
清除

刪除當前映像。
標題

影像的標題。
替代文字

建立可存取的內容時使用的替代文字。
連結至

在您的網站中建立資產或其他頁面的連結。
說明

影像的說明。
大小

設定影像的高度和寬度。

NOTE

某些選項僅在全螢幕編輯器中可用。

最終影像(包含標題和說明)可顯示為：

chlimage_1-195

配置容器 layout-container

此元件提供網格段落系統，允許您在回應式格線. 這可讓您根據目標裝置的寬度（包括一系列手機、平板電腦和桌上型電腦）定義不同的內容配置。

chlimage_1-196

NOTE

此元件已透過 HTML範本語言(HTL).

清單 list

「清單」元件可讓您設定顯示清單的搜尋條件：

清單
- 使用以下方式產生清單
  
  您可以在此處指定清單將擷取其內容的位置。有數種方法：
- 將根據您選擇的新面板的項目顯示：
  - 子頁面的選項
    - 兒童（上層頁面）
      
      手動或使用選取器指定路徑。保留為空白，以使用目前頁面作為上層頁面。
  - 固定清單的選項
    - 頁面
      
      選取頁面清單。使用+添加更多條目以及上/下按鈕來調整順序。
  - 搜尋選項
    - 開始
      
      手動輸入或使用選取器輸入起始路徑。
    - 搜尋查詢
      
      您可以輸入純文字檔案搜索查詢。
  - 進階搜尋的選項
    - QueryBuilder 述詞記號
      
      您可以使用查詢建立器述詞標籤法輸入搜尋查詢。例如，您可以輸入"fulltext=Marketing"，讓其內容中具有"Marketing"的所有頁面都顯示在輪播中。
      
      請參閱 QueryBuilder API 以完整討論查詢運算式和其他範例。
  - 標記
    
    指定 上層頁面, 標籤/關鍵字 和您所需的符合條件。
- 顯示為
  
  您希望項目的列出方式；包括連結、預告和新聞。
- 排序方式
  
  清單是否要排序，若要，則用於排序的條件。您可以輸入條件，或從提供的下拉式清單中選取條件。
- 限制
  
  指定您要在清單中顯示的項目數上限。
- 啟用資訊源
  
  指出是否應為清單啟用RSS饋送。
- 每頁顯示項目數
  
  您可以在此處指定一次顯示的清單項目數。項目數超過指定的清單會使用分頁功能，以數個部分顯示清單。

下列範例顯示清單元件顯示子頁面清單的方式（設計由網站設計的自訂CSS定義控制）。

dc_list_use

登入 login

CAUTION

此基礎元件已淘汰。 Adobe建議使用核心元件。

CAUTION

若不進行廣泛的專案層級自訂，此元件將不再可立即運作。

這些欄位提供「使用者名稱」和「密碼」欄位。

chlimage_1-197

您可以設定：

登入
- 區域標籤
  
  輸入欄位的導入文本。
- 使用者名稱標籤
  
  用於標籤用戶名欄位的文本。
- 密碼標籤
  
  用於標籤密碼欄位的文本。
- 登入按鈕標籤
  
  登入按鈕的文字。
- 重新導向至
  
  您可以指定在使用者登入後，應該開啟的網站頁面。
已登入
- 繼續按鈕標籤
  
  表示使用者已登入的文字。

訂單狀態 order-status

CAUTION

若不進行廣泛的專案層級自訂，此元件將不再可立即運作。

標題
- 標題
  
  指定您要顯示的標題文字。
- 連結
  
  指定應顯示訂單狀態的頁面（產品）。
- 類型/大小
  
  從提供的選項中選擇。

參考 reference

此參考元件可讓您參照AEM網站其他頁面（在目前例項內）的文字。然後，所引用段落的內容就會顯示為位於當前頁面上。當來源段落變更時，內容將會更新（可能需要重新整理頁面）。

段落引用
- 參考
  
  指定您要參考的頁面和段落（包括內容）的路徑。

要指定段落的路徑，您需要在路徑（到頁面）的尾碼上加上：

.../jcr:content/par/<paragraph-ID>

例如：

/content/geometrixx-outdoors/en/equipment/biking/cajamara/jcr:content/par/similar-products

除了引用特定段落外，還可以修改路徑以指定整個段落系統。您可以在路徑尾碼加上：

/jcr:content/par

例如：

/content/geometrixx-outdoors/en/equipment/biking/cajamara/jcr:content/par

設定後，內容會與來源頁面上的內容完全相同。它是參照的事實，只有在您開啟要編輯的元件時才會顯示：

chlimage_1-199

搜尋 search-features

CAUTION

此基礎元件已淘汰。 Adobe建議使用快速搜尋核心元件。

搜尋元件會將搜尋功能新增至您的頁面。

您可以設定：

搜尋
- 節點類型
  
  如果搜索限制為特定節點類型，請在此列出它們；例如， cq:Page.
- 搜尋路徑:
  
  指定要搜尋之分支的根頁面。
- 搜尋按鈕文字
  
  實際搜索按鈕上顯示的名稱。
- 統計文本
  
  搜索結果上方顯示的文本。
- 無結果文字
  
  如果沒有結果，則顯示此處輸入的文本。
- 拼寫檢查文字
  
  如果某人輸入了類似的詞語，則此文字會顯示在詞語之前。
  
  例如，如果您輸入geometrixxe，系統會顯示「您是說？」 geometrixx」。
- 類似頁面文字
  
  類似頁面的結果旁顯示的文字。按一下此連結可查看具有類似內容的頁面。
- 相關搜索文本
  
  出現在搜尋相關詞語和主題旁的文字。
- 搜尋趨勢文字
  
  使用者輸入之搜尋詞上方的標題。
- 結果頁標籤
  
  顯示在此清單底部的文本，其中包含指向其他結果頁的連結。
- 上一個標籤
  
  出現在先前搜索頁面連結上的名稱。
- 下一個標籤
  
  顯示在後續搜尋頁面連結上的名稱。

下列範例顯示搜尋字詞後的搜尋元件 geometrixx 從標準安裝的根目錄。這也說明結果的分頁：

dc_search_use

下列範例顯示拼寫錯誤且無法使用的搜尋詞：

dc_search_usenotfound

Sitemap sitemap

CAUTION

此基礎元件已淘汰。 Adobe建議使用導覽, 語言導覽，和階層連結核心元件。

自動Sitemap清單（具有預設設定）會列出目前網站中的所有頁面（作為作用中連結）。例如，擷取會顯示：

dc_sitemap_use

如有需要，您可以設定：

Sitemap
- 根路徑
  
  清單的起始路徑。

Slideshow slideshow

CAUTION

此基礎元件已淘汰。 Adobe建議使用轉盤核心元件。

CAUTION

若不進行廣泛的專案層級自訂，此元件將不再可立即運作。

此元件允許您載入一系列要以幻燈片形式顯示在頁面上的影像。您可以添加或刪除影像，並為每個影像分配標題。在「高級」(Advanced)下，還可以指定顯示區域的大小。

您可以設定：

幻燈片
- 新增幻燈片
  
  您可以使用新增 (和移除)按鈕。
- 標題
  
  視需要指定標題。這個覆蓋在適當的幻燈片上。
進階
- 大小
  
  以像素指定寬度和高度。

然後，幻燈片放映元件會在一段較短的時間內重複顯示每個元件，然後淡出到下一張幻燈片：

dc_slideshow_use

表格 table

CAUTION

此基礎元件已淘汰。 Adobe建議使用文字核心元件。

NOTE

此表格元件以 RTF編輯器，亦即文字元件。

建議使用表格表的元件，但也可使用文字元件。

此表格元件已預先設定，可讓您建構、填入表格並設定表格格式。使用對話框，可以通過以下任一方法配置表並建立內容：

從頭開始
從外部編輯器（如Excel、OpenOffice、Notepad等）複製並貼上試算表或表格。

您可以使用內嵌編輯器對內容進行基本變更：

dc_table

在全螢幕模式中，您可以設定表格配置：

chlimage_1-200

以下螢幕截圖顯示了表元件的示例；設計由網站專用的CSS決定：

dc_table_use

標記雲 tag-cloud

標籤雲端以圖形呈現，顯示套用至網站內容的標籤選取項目：

dc_tagclouduse

設定Tag Cloud元件時，您可以指定：

要顯示的標記

從中收集要顯示的標籤。從頁面、包含所有子項或所有標籤的頁面中選取。
Page

選取要參考的頁面。
標記上無連結

顯示的標籤是否應作為連結。

如需套用標籤的詳細資訊，請造訪使用標籤.

文字 text

NOTE

此文字元件以 RTF編輯器，亦即表格元件。

建議使用表格表的元件，但也可使用文字元件。

Text元件可讓您使用WYSIWYG編輯器輸入文字區塊，並搭配 RTF編輯器. 通過選擇表徵圖，可以設定文本的格式，包括字型特性、對齊方式、連結、清單和縮進。

chlimage_1-201

當您開啟設定對話框中，也可以設定：

空格字元
文字樣式

格式化的文字隨即顯示在頁面上；實際設計將取決於網站CSS:

如需Text元件和RTF編輯器提供之功能的詳細資訊，請參閱 RTF編輯器頁面。

就地編輯 inplace-editing

除了以對話方塊為基礎的RTF編輯模式，AEM也提供就地編輯，可直接編輯顯示在頁面版面中的文字。

文字和影像 text-image

文字和影像元件會新增文字區塊和影像。您也可以個別新增和編輯文字和影像。請參閱文字和影像元件以取得詳細資訊。

chlimage_1-202

您可以設定：

元件樣式 (樣式)

您可以在此向左或向右對齊影像。預設為 Left 對齊，與左側的影像對齊。
影像屬性 (進階影像屬性)

可讓您指定下列項目：
- 影像資產
  
  上傳所需的影像。
- 標題
  
  區塊的標題；將以mouseover顯示。
- 替代文字
  
  當無法顯示影像時要顯示的替代文字。如果保留為空白，則會使用標題。
- 連結到
  
  指定目標路徑。
- 說明
  
  影像的說明。
- 大小
  
  設定影像的高度和寬度。

下列範例顯示一個文本影像元件，該元件左對齊影像：

dc_textimage_use

標題 title

標題元件可以：

顯示目前頁面的名稱；將「標題」欄位留空即可完成此作業
顯示在「標題」欄位中指定的文字。

您可以設定：

標題
如果您想使用頁面標題以外的名稱，請在此處輸入。
連結
如果標題要作為連結操作，則URI。
類型/大小
從下拉式清單中選取「小」或「大」。小即生成為影像。大是作為文本生成的。

下列範例顯示標題元件顯示；設計由網站專用的CSS決定。

影片 video

CAUTION

若不進行廣泛的專案層級自訂，此元件將不再可立即運作。

此影片元件可讓您將預先定義且現成可用的視訊元素放置在頁面上。

另請參閱設定視訊元件用於HTML5元素。

將元件的例項放在頁面上後，您可以設定：

影片
- 視訊資產
上傳或放置您的視訊資產。
- 大小
  
  視訊的原生大小(寬x高（以像素為單位）會出現在「大小」旁的方塊中（請參閱上方）。如果您想要覆寫視訊的原生維度，請在此手動輸入寬度和高度維度。按一下確定關閉對話。

NOTE

支援的格式包括：

.mp4
Ogg
FLV (Flash影片)

欄 columns

欄是控制AEM中內容版面的機制。在用於建立兩列和/或三列的標準安裝元件中提供。

下列範例顯示使用中的2欄元件。您可以為新元件使用預留位置：

dc_columncontroluse

2 欄 columns-1

預設值為2個等於列的列控制元件。

3 欄 columns-2

預設值為3個等於列的列控制元件。

欄控制項 column-control

「欄控制」元件可讓使用者選取要將網頁主要面板中的內容分割為多欄的方式。使用者可以選取所需的欄數（從預先定義的清單），然後在每欄內建立、刪除或移動內容。

欄控制項
- 欄配置
  
  選擇要呈現的列數。建立後，每個欄都有其專屬的連結，可在新增內容時拖曳元件或資產。

表單 form

表單元件可用來建立供訪客提交輸入的表單。 Forms和表單元件可用來收集包括用戶反饋（例如，客戶滿意度調查表）和用戶資訊（例如，用戶註冊）在內的資訊。

NOTE

請參閱 AEM Forms說明以取得AEM Forms的相關資訊。

Forms是由數個不同元件所建置：

表單

表單元件會定義頁面上新表單的開頭和結尾。接著，其他元件便可放在這些元素之間，例如表格、下載等。
表單欄位和元素

表單欄位和元素可以包含文字方塊、選項按鈕、影像等。使用者通常會在表單欄位中完成動作，例如輸入文字。如需詳細資訊，請參閱個別表單元素。
設定檔元件

設定檔元件與用於社交協作的訪客設定檔，以及需要訪客個人化的其他區域相關。

以下是範例表單。由表單元件（開始和結束），有兩個 表單文字 輸入欄位， 一般文字 用於導入文本的欄位和提交按鈕。

dc_form

NOTE

有關進一步開發和自訂表單的資訊，請參閱開發Forms頁面. 這包括新增動作、限制、預先載入欄位，以及使用指令碼來呼叫服務以採取動作等。

表單元件的常見設定（多個） settings-common-to-many-form-components

雖然每個表單元件的用途不同，但許多元件都包含類似的選項和參數。

配置任何表單元件時，對話框中都提供以下頁簽：

標題和文字

您需要在此處指定基本資訊，例如表單的標題和任何隨附的文字。如果適用，它還允許您定義其他關鍵資訊，例如欄位是否為多個可選欄位，以及可供選擇的項目。
初始值

可讓您指定預設值。
限制

您可以在此處指定欄位是否為必要欄位，並將限制放在該欄位上（例如，必須是數值，以此類推）。
樣式

指示欄位的大小和樣式。

NOTE

您看到的欄位會依個別元件而大不相同。

這些標籤提供您必要的參數；這取決於個別元件類型，但可能包括：

標題和文字
- 元素名稱
  
  表單元素的名稱。這表示資料儲存在存放庫中的位置。
  
  這是必填欄位，應僅包含下列字元：
  - 英數字元
  - _ . / : -
- 標題
  
  與欄位一起顯示的標題。若保留為空白，則會顯示預設標題。
- 說明
  
  可讓您視需要為使用者提供其他資訊。在表單中，欄位下方會以比標題小的字型顯示。
- 顯示/隱藏
  
  決定欄位的可見時間。
初始值
- 預設值
  
  表單開啟時顯示在欄位中的值；即使用者進行任何輸入之前。
限制
- 必要
  
  這取決於表單元件類型，但提供一個或多個按一下框，以指明此欄位或此欄位的某些部分是/是必需的。
- 必要訊息
  
  通知使用者此欄位為必填的訊息；必填欄位也會標籤為和星號。
- 限制
  
  可用於選擇的約束取決於表單元件類型。
- 限制訊息
  
  通知使用者需要的訊息。
樣式
- 大小
  
  在行和列中。
- 寬度
  
  以像素顯示。
- CSS

表單（元件） form-component

表單元件會使用 表單開始 和 表單結尾 元素。這些一律會配對，以確保表單已正確定義。

dc_form-1

在表單的開頭和結尾之間，您可以新增表單元件，以定義使用者的實際輸入欄位。

NOTE

基礎元件表單元件僅支援使用其他基礎元件表單元件（按鈕、文字、隱藏等）。使用核心元件不支援基礎元件表單中的表單元件（反之亦然）。

表單開始 start-of-form

需要此元件來定義頁面上新表單的開頭。您可以設定：

表單
- 感謝頁面
  
  要參考的頁面，感謝訪客提供其輸入。如果保留為空白，表單會在提交後重新顯示。
- 開始工作流程
  決定提交表單後觸發的工作流程。
進階
- 動作類型
  表單需要動作。動作會定義使用者提交的資料(類似於HTML中的action=)所觸發的執行操作。有些需要對應
  動作設定.
  
  標準AEM安裝中包含一系列動作類型：
  - 帳戶請求
  - 建立內容
  - 建立銷售機會
  - 建立和更新帳戶
  - 電子郵件服務: 建立訂閱者並新增到清單
  - 電子郵件服務: 傳送自動回應的電子郵件
  - 電子郵件服務: 將使用者從清單中取消訂閱
  - 編輯社群
  - 編輯資源
  - 編輯工作流程控制的資源
  - 郵件
  - 已下單的訂單詳細資訊
  - 設定檔更新
  - 重設密碼
  - 設定密碼
  - 存放區內容
    
    這是預設動作類型。
  - 透過上傳儲存內容
  - 提交訂單
  - 取消訂閱者的訂閱
  - 更新訂單
- 表單識別碼
  
  表單識別碼可唯一識別表單。如果單一頁面上有數個表單，請使用表單識別碼；請確定它們有不同的識別碼。
- 載入路徑
  
  用於將預定義值載入到表單欄位中的節點屬性路徑。
  
  這是一個可選欄位，它指定儲存庫中節點的路徑。如果此節點的屬性與欄位名稱匹配，則表單上的相應欄位將預載這些屬性的值。如果不存在匹配項，則欄位包含預設值。
  
  使用 載入路徑 您可以預先載入必填欄位中的值。請參閱預先載入表單值.
- 用戶端驗證
  
  指示此表單是否需要客戶端驗證（伺服器驗證） always 發生。) 這可與 Forms驗證碼 元件。
- 驗證資源類型
  
  如果要驗證整個表單（而非個別欄位），則定義表單驗證資源類型。如果您正在驗證完整的表單，也包括下列其中一項：
  - 用於客戶端驗證的指令碼：
    
    /apps/<myApp>/form/<myValidation>/formclientvalidation.jsp
  - 伺服器端驗證的指令碼：
    
    /apps/<myApp>/form/<myValidation>/formservervalidation.jsp
- 動作設定
  
  中可用的選項 動作設定 取決於 動作類型 已選取：
  - 帳戶請求
    - 建立帳戶頁面
      
      建立新帳戶時使用的頁面。
  - 建立內容
    - 內容路徑
      
      表單傾印之任何內容的內容路徑。輸入以斜線結尾的路徑 /. 斜線表示，對於每個表單埠，在指定位置建立新節點；例如：
      
      /forms/feedback/
    - 類型
      
      選取所需的類型。
    - 表單
      
      指定表單。
    - 轉譯工具
      
      從清單中選取所需選項。
    - 資源類型
      
      若已設定，這會新增至每個註解，如 sling:resourceType
    - 檢視選擇器
  - 建立銷售機會
    - 銷售機會將新增到此清單中
      
      指定所需的銷售機會清單。
  - 建立和更新帳戶
    - 初始群組
      
      組，將新用戶分配給。
    - 首頁
      
      成功登入後顯示的頁面。
    - 路徑
      
      建立和儲存新帳戶的路徑（相對）。
    - 檢視資料…
      
      按一下此按鈕可在批量編輯器中訪問有關表單結果的資訊。從這裡，您可以將資訊匯出至 .tsv （以Tab分隔）檔案（例如，在Excel試算表中使用）。
  - 郵件
    - 從
      
      輸入電子郵件應來自的電子郵件地址。
    - Mailto
      
      輸入表單要傳送的電子郵件地址。
    - CC
      
      輸入CC電子郵件地址。
    - BCC
      
      輸入密件副本電子郵件地址。
    - 主旨
      
      輸入電子郵件的主旨。
  - 重設密碼
    - 變更密碼頁面
      
      更改密碼時使用的頁。
  - 存放區內容
    - 內容路徑
      
      表單傾印之任何內容的內容路徑。輸入以斜線結尾的路徑 /. 斜線表示，對於每個表單埠，在指定位置建立新節點；例如：
      
      /forms/feedback/
    - 檢視資料…
      
      按一下此按鈕可在批量編輯器中訪問有關表單結果的資訊。從這裡，您可以將資訊匯出為.tsv（以Tab分隔）檔案（例如，在Excel試算表中使用）。
  - 透過上傳存放內容
    
    此選項與 儲存內容.
  - 取消訂閱者的訂閱
    - 銷售機會將從此清單中刪除
      
      指定所需的銷售機會清單。

表單結尾 end-of-form

這表示表單的結尾。您可以設定：

表單結尾
- 顯示提交按鈕
  
  指出是否應顯示「提交」按鈕。
- 提交名稱
  
  在表單中使用多個提交按鈕時的識別碼。
- 提交標題
  
  按鈕上顯示的名稱，例如「提交」或「發送」。
- 顯示重設按鈕
  
  選中複選框以使「重置」按鈕可見。
- 重設標題
  
  顯示在「重置」按鈕上的名稱。
- 說明
  
  顯示在按鈕下方的資訊。

帳戶名稱 account-name

這可讓使用者輸入帳戶名稱：

dc_form_accountname

地址 address

這可讓您新增具有下列格式的國際地址欄位：

dc_form_addressfield

元件已設定為立即使用，但您可以視需要變更設定。例如，可以為地址的個別元素新增限制。將欄位保留為空白將使用預設設定。

Captcha captcha

CAUTION

此基礎元件已淘汰。 Adobe建議使用核心元件。

CAUTION

若不進行廣泛的專案層級自訂，此元件將不再可立即運作。

驗證碼元件需要使用者輸入字母數字字串，如畫面上所示。字串會隨著每次重新整理而變更。

dc_form_captcha

您可以為此元件配置各種參數，包括驗證碼字串無效時將顯示的消息。

核取方塊群組 checkbox-group

核取方塊可讓您建立多個核取方塊之一的清單，其中數個可同時選取。

dc_form_checkboxgroupuse

您可以指定各種參數，包括標題、說明和元素名稱。使用+和 — 按鈕，您可以添加或刪除項目，然後使用向上和向下箭頭定位它們。

NOTE

使用 項目載入路徑 您可以使用值預載複選框組清單。

請參閱預先載入多個值的表單欄位.

信用卡詳細資料 credit-card-details

CAUTION

此基礎元件已淘汰。 Adobe建議使用核心元件。

這可讓您提供輸入信用卡詳細資訊所需的欄位。您可以設定它，以指定接受的卡片類型和所需資訊（例如安全代碼）。

chlimage_1-203

下拉式清單 dropdown-list

下拉式清單可經過設定，以提供您的使用範圍以供選取：

dc_form_dropdownlistuse

您可以指定標題和項目以顯示在清單中。使用+和 — 按鈕，可以添加或刪除清單項，然後使用Up和Down按鈕定位它們。您可以指定是否允許使用者從清單中選取數個項目，以及在首次開啟清單時應自動選取的任何項目（初始值）。

NOTE

使用 項目載入路徑 您可以使用值預先載入下拉式清單。

請參閱預先載入多個值的表單欄位.

檔案上傳 file-upload

檔案上傳元件為使用者提供選取和上傳檔案的機制。

dc_form_fileupload

NOTE

您可以建立自訂上傳元件，將檔案上傳至Sling Servlet。如需詳細資訊，請參閱上傳檔案至Adobe Experience Manager.

隱藏欄位 hidden-field

此元件可讓您建立隱藏欄位。這些功能可用於各種用途；例如，提交表單後需要執行動作，或後續處理需要隱藏資料時。

NOTE

您也可以自訂表單，以根據表單中其他欄位的值顯示或隱藏特定表單元件。只有在特定條件下才需要欄位時，變更表單欄位的可見性會很實用。

請參閱顯示和隱藏表單元件.

影像按鈕 image-button

影像按鈕可讓您使用自己的影像和文字建立按鈕：

dc_form_imagebutton

影像上載 image-upload

影像上傳元件為使用者提供選擇及上傳影像檔案的機制。

dc_form_imageupload

連結欄位 link-field

連結欄位可讓使用者指定URL:

dc_form_link

最常用於日曆事件表單，用於事件的URL/連結欄位。

密碼欄位 password-field

這可讓使用者輸入其密碼：

密碼重設 password-reset

此元件為使用者提供下列兩個欄位：

密碼的輸入
重複輸入密碼以檢查輸入是否正確。

使用預設設定時，元件將顯示為：

dc_password_reset

選項按鈕群組 radio-group

無線電組為您提供了多個無線電複選框之一的清單，其中只有一個可以在任何特定時間選擇。

您可以指定元素名稱以及標題和說明使用+和 — 按鈕，您可以新增或移除項目、使用向上和向下箭頭定位項目，並視需要指定預設值：

dc_form_radiogroupuse

NOTE

使用 項目載入路徑 您可以使用值預先載入選項組。

請參閱預先載入多個值的表單欄位.

提交按鈕 submit-button

此元件可讓您建立提交按鈕，其中包含預設文字：

dc_form_submitbutton

或使用您自己的文字：

dc_form_submitbuttonuse

標記欄位 tags-field

此欄位可讓您選取標籤：

dc_form_tags_use

您可以指定各種參數，包括可使用專用索引標籤使用的命名空間：

標記欄位
- 允許的命名空間
  - Geometrixx Outdoors
  - 工作流程
  - 論壇
  - Stock Photography
  - Geometrixx媒體
  - 標準標記
  - 行銷
  - 資產屬性
- 寬度 (以像素為單位)
- 快顯視窗大小

文字欄位 text-field

標準文字欄位可設定為您所需的大小，且訊息中會有您自己的提示：

dc_form_text

工作流程提交按鈕 workflow-submit-button-s

這可讓您建立「提交」按鈕，以用於工作流程。

chlimage_1-204

recommendation-more-help

5f6f1f67-8db1-40cb-84e9-024e65b9fc4c