基礎元件 foundation-components

Last update: Wed Mar 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CAUTION

大部分的基礎元件現在在AEM 6.5中已過時。請參閱發行說明以取得進一步資訊。

Adobe建議使用更現代化且更可擴充的核心元件在AEM專案中。這些元件是 We.Retail範例內容也可以另外安裝並用於開發由您的管理員執行。

您可以使用 AEM Modernize Tools Suite ，將基礎元件型網站重構為使用核心元件。

基礎元件是專為製作標準網頁的內容所設計。這些元件是AEM標準安裝中現成可用元件的子集。

有些可透過元件瀏覽器立即取得。您也可以使用取得其他各種選項設計模式（如果頁面是以靜態範本為基礎）或編輯範本（如果頁面是以可編輯的範本為基礎）。

基礎元件的使用受到支援，但大部分已被核心元件取代並棄用，這些元件提供更大的擴充性和靈活性。

NOTE

本節僅討論標準AEM安裝中現成可用的元件。

根據您的執行個體，您可能已針對您的需求明確開發自訂元件。這些自訂元件的名稱甚至可能與此處討論的部分元件相同。

這些元件可在元件頁編輯器側面板的索引標籤編輯頁面.

您可以選取元件並將其拖曳至頁面上的所需位置。您接著可以使用下列專案加以編輯：

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

一般：包括基本元件，包括文字、影像、表格和圖表。
欄：包含組織內容版面配置所需的元件。
表單：包含建立表單所需的所有元件。

一般 general

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

帳戶項目 account-item

CAUTION

已棄用此基礎元件。 Adobe建議使用核心元件而非。

您可以定義具有標題和說明的連結。

自我調整影像 adaptive-image

CAUTION

已棄用此基礎元件。 Adobe建議使用影像核心元件而非。

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

下列特性可決定視窗的大小：

裝置畫面：行動裝置通常會顯示網頁，以便橫跨整個熒幕。
網頁瀏覽器視窗大小：筆記型電腦和桌上型電腦的使用者可以調整網頁瀏覽器視窗的大小。

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

支援的影像格式 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

低

寬度= 320

320

中

行動電話（直向）

320 <寬度< 481

480

中

行動電話（橫向）

480 <寬度< 769

476

高

平板電腦（縱向）

768 <寬度< 1025

620

高

平板電腦（橫向）

寬度<= 1025

完整（原始大小）

高

桌上型電腦

屬性 properties

此對話方塊可讓您編輯最適化影像元件例項的屬性，其中許多屬性與其所依據的影像元件相同。屬性位於兩個標籤中：

影像
- 影像
  從內容尋找器拖曳影像，或按一下開啟瀏覽視窗，您可在此載入影像。載入影像後，您可以裁切、旋轉或刪除影像。若要放大和縮小影像，請使用影像下方的滑動列（在「確定」和「取消」按鈕上方）
- 裁切
  裁剪部分影像。拖曳邊框以裁切影像。
- 旋轉
  重複按一下「旋轉」，直到視需要旋轉影像為止。
- 清除
  移除目前的影像。
進階
- 標題
  最適化影像元件沒有使用此屬性。
- 替代文字
  用於影像的替代文字。
- 連結至
  最適化影像元件沒有使用此屬性。
- 說明
  最適化影像元件沒有使用此屬性。

擴充自我調整影像元件 extending-the-adaptive-image-component

如需自訂最適化影像元件的詳細資訊，請參閱瞭解自我調整影像元件.

傳送 carousel

CAUTION

已棄用此基礎元件。 Adobe建議使用轉盤核心元件而非。

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

一次一個
短時間
依您指定的順序
具有您指定的時間延遲

可點按的控制項也可讓使用者依需求即時循環瀏覽顯示的頁面。選取目前可見的頁面影像會前往該頁面。換言之，輪播會充當導覽控制項。

屬性 properties-1

這些屬性位於兩個標籤中：

輪播
您可以在此處指定轉盤運作方式：
- 播放速度下一張投影片顯示前的時間（毫秒）。
- 切換時間兩張幻燈片之間的切換時間（毫秒）。
- 控制項樣式下拉式選單中有各種選項，例如「上一個/下一個按鈕」、「右上切換」。
清單

您可在此處指定轉盤中包含頁面的方式：
- 使用以下專案產生清單
  建立頁面清單有數種方式 — 子頁面、固定清單、搜尋或進階搜尋（皆說明如下）。
  無論您選擇哪種方法，您包含在清單中的頁面都應已有一個與頁面關聯的影像。這是轉盤中顯示的影像。如果特定頁面的頁面屬性下沒有影像，您應該先將影像與頁面建立關聯，然後再開始。否則，轉盤會顯示大部分空白頁面。另請參閱編輯頁面屬性.
  視您選擇的專案而定，會出現新面板：
  - 子頁面的選項
    - 父頁面
      手動或使用選取器指定路徑。留空將使用目前頁面作為父頁面。
  - 固定清單的選項
    - 頁面
      選取頁面清單。使用 + 以新增更多專案，並按上/下按鈕以調整順序。
  - 搜尋選項
    - 開始於
      手動或使用選取器輸入開始路徑。
    - 搜尋查詢
      您可以輸入純文字搜尋查詢。
  - 進階搜尋的選項
    - QueryBuilder述詞記號
      您可以使用Querybuilder述詞記號來輸入搜尋查詢。例如，您可以輸入"fulltext=Marketing"，讓內容中包含"Marketing"的所有頁面顯示在轉盤中。
      另請參閱 QueryBuilder API 以完整討論查詢運算式和更多範例。
- 排序依據
  選取 jcr:title， jcr:created， cq:lastModified，或 cq:template 下拉式選單中的。
- 限制
  選填。您想在轉盤中使用的專案數上限。

NOTE

您可以為Adobe Experience Manager建立自訂轉盤元件，該元件會在AEM DAM中顯示數位資產。另請參閱建立Adobe Experience Manager的自訂轉盤元件.

圖表 chart

CAUTION

已棄用此基礎元件。 Adobe建議使用核心元件而非。

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

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

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

chlimage_1-89 dc_chart_use

NOTE

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

內容片段 content-fragment

CAUTION

已棄用此基礎元件。 Adobe建議使用內容片段核心元件而非。

內容片段會建立和管理為不受頁面影響的資產。接著，您就可以在編寫內容頁面時，使用這些片段及其變數。

Design Importer design-importer

CAUTION

已棄用此基礎元件。 Adobe建議使用核心元件而非。

此元件可讓您上傳儲存設計封裝的zip檔案。

下載 download

CAUTION

已棄用此基礎元件。 Adobe建議使用核心元件而非。

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

下載
- 說明
  與下載連結一起顯示的簡短說明。
- 檔案
  可在產生的網頁上下載的檔案。從內容尋找器拖曳資產或選取區域，方便您上傳要下載的檔案。

下列範例顯示Geometrixx的下載元件：

dc_download_use

外部 external

CAUTION

已棄用此基礎元件。 Adobe建議使用核心元件而非。

外部應用程式整合元件(外部)可讓您使用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-90

NOTE

視您的使用案例而定，整合外部應用程式可使用其他選項，例如整合Portlet.

閃光燈 flash

CAUTION

已棄用此基礎元件。 Adobe建議使用核心元件而非。

CAUTION

若無廣泛的專案層級自訂，此元件就不能再正常運作。

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

Flash
- Flash影片
  
  Flash影片檔案。從內容尋找器拖曳資產，或按一下開啟瀏覽視窗。
- 大小
  
  存放影片的顯示區域的Dimension（畫素）。
替代影像

要顯示的替代影像
進階
- 內容功能表
  
  指示要顯示或隱藏內容功能表。
- 視窗模式
  
  視窗的顯示方式，例如，不透明、透明，或作為不同的（實心）視窗。
- 背景顏色
  
  從提供的色彩圖表中選取的背景色彩。
- 最低版本
  
  執行影片所需的最低AdobeFlash Player版本。預設值為9.0.0。
- 屬性
  
  需要任何進一步的屬性。

影像 image

CAUTION

已棄用此基礎元件。 Adobe建議使用影像核心元件而非。

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

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

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

chlimage_1-91

影像上傳後（而非上傳前），您可以使用就地編輯若要視需要裁切/旋轉影像：

就地編輯工具列

NOTE

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

根據您的執行個體，可能也會強制實行最小和最大限制頁面設計. 這些限制是在專案實施期間制定的。

全熒幕編輯模式中有數個其他選項可供使用；例如，地圖和縮放：

全熒幕編輯模式 — 地圖和縮放

NOTE

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

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

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

載入影像時，您可以設定下列專案：

地圖

若要對應影像，請選取「對應」。您可以指定建立影像地圖（矩形、多邊形等）的方式以及區域應指向的位置。
裁切

若要剪下影像的一部分，請選取「裁切」。使用滑鼠裁切影像。
旋轉

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

移除目前的影像。
標題

影像的標題。
替代文字

建立無障礙內容時使用的替代文字。
連結至

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

影像的說明。
大小

設定影像的高度和寬度。

NOTE

部分選項僅在全熒幕編輯器中可用。

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

chlimage_1-92

配置容器 layout-container

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

chlimage_1-93

NOTE

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

清單 list

CAUTION

已棄用此基礎元件。 Adobe建議使用列出核心元件而非。

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

清單
- 使用以下專案產生清單
  
  您可在此指定清單擷取其內容的位置。有幾種方法：
- 視您選擇的專案而定，會出現新面板：
  - 子頁面的選項
    - 子項（父頁面）
      
      手動或使用選取器指定路徑。留空將使用目前頁面作為父頁面。
  - 固定清單的選項
    - 頁面
      
      選取頁面清單。使用+新增更多專案，並使用上/下按鈕調整順序。
  - 搜尋選項
    - 開始
      
      手動或使用選取器輸入開始路徑。
    - 搜尋查詢
      
      您可以輸入純文字搜尋查詢。
  - 進階搜尋的選項
    - QueryBuilder述詞記號
      
      您可以使用Querybuilder述詞記號來輸入搜尋查詢。例如，您可以輸入"fulltext=Marketing"，讓內容中包含"Marketing"的所有頁面顯示在轉盤中。
      
      另請參閱 QueryBuilder API 以完整討論查詢運算式和更多範例。
  - 標籤
    
    指定 上層頁面， 標籤/關鍵字，以及您所需的符合條件。
- 顯示為
  
  您希望專案列出的方式；包括連結、Teaser和新聞。
- 排序依據
  
  是否要排序清單，如果是，則為用於排序的條件。您可以輸入條件，或從提供的下拉式清單中選取條件。
- 限制
  
  指定您要在清單中顯示的最大專案數。
- 啟用摘要
  
  指出是否應為清單啟動RSS摘要。
- 每頁顯示專案數
  
  您可以在此處指定要一次顯示的清單專案數量。專案數量超過指定數量的清單會使用分頁功能將清單分成數個部分顯示。

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

dc_list_use

登入 login

CAUTION

已棄用此基礎元件。 Adobe建議使用核心元件而非。

CAUTION

若無廣泛的專案層級自訂，此元件就不能再正常運作。

提供使用者名稱和密碼欄位。

chlimage_1-94

您可以設定：

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

訂單狀態 order-status

CAUTION

若無廣泛的專案層級自訂，此元件就不能再正常運作。

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

參考 reference

CAUTION

已棄用此基礎元件。 Adobe建議使用內容片段核心元件而非。

此參考元件可讓您參考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-96

搜尋 searching

CAUTION

已棄用此基礎元件。 Adobe建議使用快速搜尋核心元件而非。

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

您可以設定：

搜尋
- 節點型別
  
  如果搜尋僅限於特定節點型別，請在此處列出它們；例如， cq:Page.
- 搜尋路徑：
  
  指定您要搜尋之分支的根頁面。
- 搜尋按鈕文字
  
  實際搜尋按鈕上顯示的名稱。
- 統計資料文字
  
  搜尋結果上方顯示的文字。
- 無結果文字
  
  如果沒有結果，則顯示在此處輸入的文字。
- 拼寫檢查文字
  
  如果有人輸入類似的詞語，此文字會顯示在該詞語之前。
  例如，如果您輸入 Geometrixxe，系統會顯示「您的意思是？ Geometrixx」。
- 類似的頁面文字
  
  在類似頁面的結果旁邊顯示的文字。若要檢視具有類似內容的頁面，請按一下此連結。
- 相關搜尋文字
  
  旁邊顯示的文字會搜尋相關辭彙和主題。
- 搜尋趨勢文字
  
  使用者輸入的搜尋詞上方標題。
- 結果頁面標籤
  
  此清單底部顯示的文字，包含其他結果頁面的連結。
- 上一個標籤
  
  顯示在先前搜尋頁面連結上的名稱。
- 下一個標籤
  
  顯示在後續搜尋頁面連結上的名稱。

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

dc_search_use

下列範例顯示一個搜尋字詞，拼字錯誤且無法使用：

dc_search_usenotfound

Sitemap sitemap

CAUTION

已棄用此基礎元件。 Adobe建議使用導覽，語言導覽、和階層連結核心元件而非。

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

dc_sitemap_use

如有需要，您可以設定下列專案：

Sitemap
- 根路徑
  
  清單開始位置的路徑。

Slideshow slideshow

CAUTION

已棄用此基礎元件。 Adobe建議使用轉盤核心元件而非。

CAUTION

若無廣泛的專案層級自訂，此元件就不能再正常運作。

此元件可讓您載入一系列影像，以便在頁面上以投影片形式顯示。您可以新增或移除影像，並為每個影像指派標題。在「進階」下，您也可以指定顯示區域的大小。

您可以設定：

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

然後幻燈片元件會依序重複顯示每個幻燈片，並停留一小段時間，最後淡入下一張幻燈片：

dc_slideshow_use

表格 table

CAUTION

已棄用此基礎元件。 Adobe建議使用文字核心元件而非。

NOTE

此表格基礎元件是以 RTF編輯器，即為文字基礎元件。

此表格元件已預先設定為可讓您建構、填滿及格式化表格。使用對話方塊，您可以透過以下任一方式設定表格並建立內容：

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

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

dc_table

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

chlimage_1-97

下列熒幕擷圖顯示表格元件的範例；設計由網站特定的CSS決定：

dc_table_use

標記雲 tag-cloud

標籤雲會以圖形呈現選取的標籤，這些標籤已套用至您網站內的內容：

dc_tagclouduse

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

要顯示的標籤

要顯示的標籤收集來源位置。從頁面、具有所有子項或所有標籤的頁面中選取。
Page

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

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

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

文字 text

CAUTION

已棄用此基礎元件。 Adobe建議使用文字核心元件而非。

NOTE

此文字基礎元件是以 RTF編輯器，即為表格基礎元件。

文字元件可讓您使用WYSIWYG編輯器輸入文字區塊，其功能由 RTF編輯器. 選取的圖示可讓您設定文字的格式，包括字型特性、對齊、連結、清單和縮排。

chlimage_1-98

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

分隔符號
文字樣式

格式化文字會顯示在頁面上。實際設計取決於網站CSS：

如需有關文字元件和RTF編輯器所提供功能的詳細資訊，請參閱 RTF編輯器頁面。

就地編輯 inplace-editing

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

文字和影像 text-image

CAUTION

已棄用此基礎元件。 Adobe建議使用影像和文字核心元件而非。

文字與影像元件會新增文字區塊和影像。您也可以分別新增及編輯文字和影像。請參閱文字和影像元件以瞭解詳細資訊。

chlimage_1-99

您可以設定：

元件樣式 (樣式)

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

可讓您指定下列專案：
- 影像資產
  
  上傳所需的影像。
- 標題
  
  區塊標題，由mouseover顯示。
- 替代文字
  
  如果影像無法顯示，則會顯示替代文字。如果留空，則使用標題。
- 連結至
  
  指定目標路徑。
- 說明
  
  影像的說明。
- 大小
  
  設定影像的高度和寬度。

下列範例顯示文字影像元件，該元件以左對齊方式顯示影像：

dc_textimage_use

標題 title

CAUTION

已棄用此基礎元件。 Adobe建議使用標題核心元件而非。

標題元件可以：

將「標題」欄位保留空白以顯示目前頁面的名稱。
顯示您在「標題」欄位中指定的文字。

您可以設定：

標題

如果您想使用頁面標題以外的名稱，請在此處輸入它。
連結

URI （如果標題要當作連結運作）。
型別/大小

從下拉式清單中選取「小」或「大」。「小」會產生為影像。大型會以文字形式產生。

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

影片 video

CAUTION

已棄用此基礎元件。 Adobe建議使用核心元件內嵌元件而非。

CAUTION

若無廣泛的專案層級自訂，此元件就不能再正常運作。

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

另請參閱設定您的視訊設定檔與HTML5元素搭配使用。

將元件的例項放到頁面上後，您就可以設定下列專案：

影片
- 視訊資產
  
  上傳或放置您的視訊資產。
- 大小
  
  視訊的原生大小（寬度x高度，以畫素為單位）會顯示在「大小」(Size)旁的方塊中（請參閱上方）。如果您想要覆寫視訊的原生尺寸，請在此手動輸入寬度和高度尺寸。選取確定關閉對話方塊。

NOTE

支援的格式包括：

.mp4
Ogg
FLV (Flash影片)

欄 columns

欄是控制AEM中內容配置的機制。在標準安裝中，會提供用於建立兩或三欄的元件。

下列範例顯示使用中的兩個Columns元件。您可以使用新元件的預留位置：

dc_columncontroluse

2 欄 columns-1

預設為兩個相等欄的「欄控制」元件。

3 欄 columns-2

預設為三個相等欄的「欄控制」元件。

欄控制項 column-control

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

欄控制項
- 欄配置
  
  選取您要轉譯的欄數。建立後，每欄都有自己的連結，可在新增內容時拖曳元件或資產。

表單 form

CAUTION

已棄用基礎元件。 Adobe建議使用核心元件而非。

表單元件可用來建立表單，以供訪客提交輸入。 Forms和表單元件可用來收集包含使用者意見回饋（例如客戶滿意度問卷）和使用者資訊（例如使用者註冊）的資訊。

NOTE

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

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

表單

表單元件會定義頁面上新表單的開頭和結尾。然後，其他元件可置於這些元素之間，例如表格和下載。
表單欄位和元素

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

個人資料元件與用於社交合作和其他需要訪客個人化區域的訪客個人資料有關。

以下顯示範例表單。它由以下專案組成表單元件（開始和結束），帶兩個表單文字用於輸入的欄位，a 一般文字用於匯入文字的欄位和提交按鈕。

dc_form

NOTE

開發和自訂表單的相關資訊可在以下網址取得：開發Forms頁面. 此功能包括新增動作、限制、預先載入欄位，以及使用指令碼來呼叫服務以進行動作等。

（眾多）表單元件的通用設定 settings-common-to-many-form-components

雖然每個表單元件的用途不同，但許多表單元件是由類似的選項和引數所組成。

設定任何表單元件時，對話方塊中會有下列索引標籤：

標題與文字

您必須在此指定基本資訊，例如表單標題及任何隨附文字。在適當的情況下，它也可讓您定義其他關鍵資訊，例如欄位是否可多重選取及專案是否可供選取。
初始值

可讓您指定預設值。
限制

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

指示欄位的大小和樣式。

NOTE

您看到的欄位會依個別元件而有很大的差異。

這些標籤會提供您必要的引數。標籤視個別元件型別而定，但可包括下列專案：

標題與文字
- 元素名稱
  
  表單元素的名稱。它指出資料在存放庫中的儲存位置。
  此欄位為必要欄位，僅可包含下列字元：
  - 英數字元
  - _ . / : -
- 標題
  
  欄位顯示的標題。如果保留為空白，則會顯示預設標題。
- 說明
  
  可讓您視需要為使用者提供其他資訊。在表單上，它會以小於標題的字型顯示在欄位下方。
- 顯示/隱藏
  
  決定欄位何時可見。
初始值
- 預設值
  
  開啟表單時顯示在欄位中的值。也就是說，在使用者完成任何輸入之前。
限制
- 必填
  
  限制取決於表單元件型別，但會提供一或多個按一下方塊來指示此欄位為必要欄位，或此欄位的某些部分為必要欄位。
- 必要訊息
  
  通知使用者此欄位為必填欄位的訊息。必填欄位也會以星號標幟。
- 限制
  
  可供選取的限制取決於表單元件型別。
- 限制訊息
  
  通知使用者所需內容的訊息。
樣式
- 大小
  
  列與欄中。
- 寬度
  
  以像素顯示。
- CSS

表單（元件） form-component

CAUTION

已棄用此基礎元件。 Adobe建議使用表單容器核心元件而非。

表單元件使用定義表單的開頭和結尾。 表單開始 和 表單結尾 元素。開始和結束一律成對，以確保表單已正確定義。

dc_form-1

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

NOTE

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

表單開始 start-of-form

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

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

表單結尾 end-of-form

標籤表單的結尾。您可以設定下列專案：

表單結尾
- 顯示提交按鈕
  
  指示是否應該顯示提交按鈕。
- 提交名稱
  
  識別碼（如果您在表單中使用多個提交按鈕）。
- 提交標題
  
  按鈕上顯示的名稱，例如「提交」或「傳送」。
- 顯示重設按鈕
  
  選取核取方塊可顯示「重設」按鈕。
- 重設標題
  
  顯示在[重設]按鈕上的名稱。
- 說明
  
  顯示在按鈕下方的資訊。

帳戶名稱 account-name

CAUTION

已棄用此基礎元件。 Adobe建議使用表單文字核心元件而非。

讓使用者輸入帳戶名稱：

dc_form_accountname

地址 address

CAUTION

已棄用此基礎元件。 Adobe建議使用表單文字核心元件而非。

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

dc_form_addressfield

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

Captcha captcha

CAUTION

已棄用此基礎元件。 Adobe建議使用核心元件而非。

CAUTION

若無廣泛的專案層級自訂，此元件就不能再正常運作。

驗證碼元件會要求使用者輸入熒幕上顯示的英數字串。字串會隨著每次重新整理而變更。

dc_form_captcha

您可以為此元件設定各種引數，包括驗證碼字串無效時顯示的訊息。

核取方塊群組 checkbox-group

CAUTION

已棄用此基礎元件。 Adobe建議使用表單選項核心元件而非。

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

dc_form_checkboxgroupuse

您可以指定各種引數，包括標題、說明和元素名稱。您可以使用+和 — 按鈕來新增或移除專案，然後使用向上和向下箭頭來放置它們。

NOTE

使用 專案載入路徑 您可以使用值預先載入核取方塊群組清單。

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

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

CAUTION

已棄用此基礎元件。 Adobe建議使用核心元件而非。

可讓您提供輸入信用卡詳細資料所需的欄位。您可以將其設定為指定接受的卡片型別和所需的資訊（例如安全碼）。

chlimage_1-100

下拉式清單 dropdown-list

CAUTION

已棄用此基礎元件。 Adobe建議使用表單選項核心元件而非。

下拉式清單可設定為您提供一系列的值供您選取：

dc_form_dropdownlistuse

您可以指定要顯示在清單中的標題和專案。您可以使用+和 — 按鈕來新增或移除清單專案，然後使用「向上」和「向下」按鈕來放置它們。您可以指定是否允許使用者從清單中選取數個專案，以及在第一次開啟清單時應該自動選取的任何專案（初始值）。

NOTE

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

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

檔案上傳 file-upload

CAUTION

已棄用此基礎元件。 Adobe建議使用核心元件而非。

檔案上傳元件為使用者提供了一種選擇和上傳檔案的機制。

dc_form_fileupload

NOTE

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

隱藏欄位 hidden-field

CAUTION

已棄用此基礎元件。 Adobe建議使用表單隱藏核心元件而非。

可讓您建立隱藏欄位。這些隱藏欄位可用於各種用途。例如，在提交表單後必須執行動作，或在後處理中需要隱藏資料時。

NOTE

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

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

影像按鈕 image-button

CAUTION

已棄用此基礎元件。 Adobe建議使用表單按鈕核心元件而非。

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

dc_form_imagebutton

影像上載 image-upload

CAUTION

已棄用此基礎元件。 Adobe建議使用核心元件而非。

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

dc_form_imageupload

連結欄位 link-field

CAUTION

已棄用此基礎元件。 Adobe建議使用核心元件而非。

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

dc_form_link

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

密碼欄位 password-field

CAUTION

已棄用此基礎元件。 Adobe建議使用核心元件而非。

允許使用者輸入密碼：

密碼重設 password-reset

CAUTION

已棄用此基礎元件。 Adobe建議使用核心元件而非。

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

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

使用預設設定時，元件會顯示如下：

dc_password_reset

選項按鈕群組 radio-group

CAUTION

已棄用此基礎元件。 Adobe建議使用表單選項核心元件而非。

選項群組會提供您一或多個選項核取方塊的清單，其中只有一個選項核取方塊可以在任何特定時間選取。

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

dc_form_radiogroupuse

NOTE

使用 專案載入路徑 您可以使用值預先載入選項按鈕群組。

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

提交按鈕 submit-button

CAUTION

已棄用此基礎元件。 Adobe建議使用表單按鈕核心元件而非。

此元件可讓您建立具有預設文字的提交按鈕：

dc_form_submitbutton

或是使用您自己的文字：

dc_form_submitbuttonuse

標記欄位 tags-field

CAUTION

已棄用此基礎元件。 Adobe建議使用核心元件而非。

此欄位可讓您選取標籤：

dc_form_tags_use

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

標籤欄位
- 允許的名稱空間
  - Geometrixx Outdoors
  - 工作流程
  - 論壇
  - Stock Photography
  - Geometrixx Media
  - 標準標籤
  - 行銷
  - 資產屬性
  - 寬度（畫素）
  - 快顯視窗大小