使用 HTML 表單網頁組件篩選並顯示其他網頁組件中的資料

本文內容：

使用表單網頁組件
新增網頁組件至頁面
HTML 表單網頁組件連線到另一個網頁組件
自訂的 HTML 表單網頁組件
設定網頁組件的通用屬性

使用表單網頁組件

您可以使用 HTML 表單網頁組件連線，並將資料傳遞到其他網頁組件。例如，您可以使用 HTML 表單網頁組件的預設輸入區域的名稱，將值傳遞給客戶資料的清單檢視網頁組件篩選的資料，以該區域。您也可以自訂 HTML 表單網頁組件可讓使用者，例如，從下拉式清單中選取 [地區名稱。您可以在 HTML 表單網頁組件中使用文字方塊、下拉式清單、多行文字] 方塊，核取方塊或選項按鈕。

您連線至其他網頁組件的欄位的方式取決於其他網頁組件如何定義使用網頁組件連線。

雖然您可以在表單上有一個以上的項目（文字] 方塊、選項按鈕等），只有一個欄位可連線的清單檢視網頁組件。不過，在不同欄位可同時連線至其他網頁組件。例如，您可以讓 HTML 表單網頁組件的文字方塊及一組選項按鈕。[文字] 方塊可以連線到一個清單檢視網頁組件與到另一個的 [選項] 按鈕。當使用者按一下 [ Go ] 按鈕時，兩個清單檢視網頁組件篩選依據 HTML 表單網頁組件中所輸入的資訊。

如果該網頁組件可以接受多個參數，您可以連線至另一個網頁組件，在 HTML 表單網頁組件中的兩個或多個欄位。在此情況下，您可能需要相容於 SharePoint 的網站設計程式中，以完成連線的 SharePoint Designer 2010 等。

頁首

新增網頁組件至頁面

您至少要加入網站預設的 <網站名稱> 成員 SharePoint 群組取得其權限，才可編輯頁面。

在頁面上，按一下功能區的 [頁面] 索引標籤，然後按一下 [編輯] 命令。

若 [編輯] 命令停用，這表示您不具有編輯頁面的權限。請連絡系統管理員。
在頁面中按一下要新增網頁組件的位置，然後按一下 [插入] 索引標籤，再按一下 [網頁組件]。
在 [類別] 下選取類別 (例如 [清單和組件庫])，再選取要新增至頁面的網頁組件 (例如 [宣告])，然後按一下 [新增]。
當您選取某項網頁組件時，[關於網頁組件] 中會顯示該網頁組件的資訊。
當您完成頁面編輯之後，請按一下 [頁面] 索引標籤，然後按一下 [儲存並關閉]。

頁首

HTML 表單網頁組件連線到另一個網頁組件

若要使用 HTML 表單網頁組件，您將其連線所能接收的值，透過網頁組件連線，例如清單檢視網頁組件的另一個網頁組件。必須先在 HTML 表單網頁組件的相同頁面上的網頁組件中顯示您要篩選的清單及您要篩選的欄。新增 HTML 表單網頁組件至頁面的相關資訊，請參閱新增網頁組件至頁面。

瀏覽至包含您要篩選的網頁組件的頁面。
在功能區中，按一下 [頁面] 索引標籤，然後按一下 [編輯] 命令。

若 [編輯] 命令停用，這表示您不具有編輯頁面的權限。請連絡系統管理員。
指向 HTML 表單網頁組件按一下向下箭號，按一下 [連線]，指向 [提供表單值至，再按一下您要連結的網頁組件的名稱。
在 [選擇連線] 對話方塊中，按一下 [設定連線] 索引標籤。
從 [連線類型] 功能表中，選取欄位符合 HTML 表單網頁組件中的資訊。

附註: 欄位必須有相同的名稱，也沒有為相同的資料類型。寄件者 HTML 表單網頁組件的值是文字值。

按一下 [完成]，然後按一下 [在頁面頂端的結束編輯模式。

根據預設，您可以在 [文字] 方塊中輸入文字，然後按一下 [移至或按 ENTER。其他網頁組件會顯示符合您所輸入的文字的資料。若要好讓您可以輸入新的文字，請清除 [文字] 方塊，請選取目前的文字，然後再將它刪除。

自訂的 HTML 表單網頁組件

您可以使用原始檔編輯器] 中所提供的 HTML 表單網頁組件工具窗格或相容於 SharePoint 的網站設計程式，例如從 SharePoint Designer 2010 自訂 HTML 表單網頁組件。而非標準文字] 方塊中，您可以使用選項按鈕、核取方塊、多行文字] 方塊中及清單方塊。您也可以新增標籤，並指定預設值。

如果您自訂 HTML 表單網頁組件，請記住下列動作：

只有一個移] 按鈕（採用 INPUT 元素）可將資料傳遞到其他網頁組件。
HTML 表單網頁組件使用表單項目。在表單元素，包括 HTML、本文和表單元素，無法使用某些 HTML 元素。
所有表單欄位名稱都必須是唯一的。每個名稱值都會用來連線至您要連線之網頁組件中的相對欄名稱。

若要自訂表單網頁組件，請使用 [原始檔編輯器] 按鈕以顯示文字編輯器] 對話方塊然後修改或新增 HTML 程式碼。

附註: HTML 表單網頁組件只提供資料給另一個可連線的網頁組件，無法取得資料從另一個可連線的網頁組件。比方說，您無法為詳細資料表單使用 HTML 表單網頁組件，顯示的資料列。

自訂預設 HTML 表單網頁組件

若要自訂預設 HTML 表單網頁組件，請執行下列動作：

從網頁顯示在功能區] 的 [HTML 表單網頁組件中，按一下 [ 編輯] 索引標籤，然後按 [ 編輯] 命令。
指向 [HTML 表單網頁組件，按一下向下箭號，再按一下編輯網頁組件。
在 [工具] 窗格中，按一下 [原始檔編輯器] 按鈕。
預設 HTML 程式碼會開啟 [文字項目] 對話方塊。

若要讓使用者更容易閱讀及修改程式碼，插入換行字元在文字換行，如下所示：

<div onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_">
<input type="text" name="T1"/>
<input type="button" value="Go" onclick="javascript:_SFSUBMIT_"/>
</div>

您可以變更欄位的名稱、新增標籤至功能變數，或新增的預設值，以變更數種方式的第一個輸入項目。

屬性	描述
欄位名稱	表單網頁組件中的預設文字] 方塊的名稱為T1。這是出現在 [設定連線] 對話方塊中的名稱。若要指定的欄位有意義的名稱，輸入取代T1的新名稱。請勿移除括住。
欄位標籤	您可以新增標籤文字之前, 或之後的表單欄位。輸入不引文標記的文字。
預設值	您可以新增的預設值的文字區域的欄位。使用者可以接受的值，即可移至] 按鈕，或輸入自己的項目加以取代。若要新增的預設值，使用 value 屬性。

範例如果您想要提供有意義的名稱，新增預設值，然後加上標籤，您可以執行下列動作：

Region: <input type="text" name="Region" value="India"/>

您可以變更的第二個輸入項目變更的按鈕名稱，如下列範例所示：

<input type="button" value="SUBMIT" onclick="javascript:_SFSUBMIT_"/>

您也可以新增其他 HTML 項目之前和之後的 DIV 項目。例如啟用若要快速重新整理頁面，以及表單項目重設使用者的非常有用及最簡單的方法是關閉 DIV 項目後新增錨點標記目前頁面。例如：

<br/>
<a href="http://contoso/SitePages/CustByRegion.aspx">Refresh</a>

重要: 不會變更文字編輯器] 對話方塊中的其他 HTML 程式碼。動態 HTML 表單網頁組件會在執行階段建立連線到其他網頁組件建立指令碼處理常式。請勿修改onkeydown或onclick事件程式碼，或您不小心可能會中斷 HTML 表單網頁組件。

使用多行文字方塊

文字區域項目定義的多行文字輸入的控制項。列屬性會指定會顯示在 [文字] 欄位的行數。COLS 屬性會指定字元的文字區域寬度。在下列範例中，使用者會看到文字方塊 5 線條和 30 個字元的寬度。當使用者在] 方塊中輸入文字時，文字會自動換列在 30 個字元。

<textarea name="Region" rows=5 cols=30></textarea>

提示: 請確定沒有空間程式碼中緊接右角括弧 (>)。

使用 [選項] 按鈕

選項按鈕，也稱為選項按鈕，提供給使用者的互斥選項。下列範例會顯示三個選項按鈕。使用相同的名稱，針對每個選項按鈕。這是自訂新增標籤之後每個按鈕。如果您想要格式化分開每個選項按鈕，請使用巴西項目。

<input type="radio" name="Region" value="India"/> India<BR/>
<input type="radio" name="Region" value="USA"/> USA<BR/>
<input type="radio" name="Region" value="Spain"/> Spain<BR/>

使用下拉式清單的選項

如果有多個互斥選項，請考慮使用下拉式清單方塊下使用選取的項目。每個選項會顯示為個別在清單中，選擇，但是使用者可以只選取一個選項。選項元素的右角括弧後的文字都會顯示在下拉式清單中。

<select name="Region">
<option value="India">India</option>
<option value="USA">USA</option>
<option value="Spain"> Spain </option>
</select>

若要提供的預設值，例如西班牙，執行下列動作：

<option value="Spain" selected="selected"> Spain </option>

使用核取方塊

如果有多個非-互斥選項，請考慮使用核取方塊。每個選項會顯示為個別的核取方塊，然後使用者也可以選取任何或所有選項。使用這個選項需要接受多個參數隨著網頁組件連線網頁組件。

<input type="checkbox" name="region1" value="India"/> India<BR/>
<input type="checkbox" name="region2" value="USA"/> USA<BR/>
<input type="checkbox" name="region3" value="Spain"/> Spain<BR/>

若要提供的預設值，例如西班牙，執行下列動作：

<input type="checkbox" name="region3" value="Spain" checked="checked"/> Spain<BR/>

頁首

設定網頁組件的通用屬性

所有網頁組件都有一組通用的屬性，可用於控制其外觀、版面配置及進階特性。您可在工具窗格變更網頁組件的屬性。

附註: 工具窗格中所顯示的通用網頁組件屬性，可能會與本節所述者不盡相同，原因包括：

您必須有適當的權限，才可在工具窗格中看到 [進階] 區段。
特定的網頁組件的網頁組件開發人員可能選擇不顯示一或多個下列通用屬性或可能已選擇建立並顯示外觀、版面配置]，就不會列出下方的其他屬性和進階的工具窗格區段。
部分權限與屬性設定可能會停用或隱藏網頁組件屬性。

外觀

屬性	描述
標題	指定顯示在網頁組件標題列上的網頁組件標題。
高度	指定網頁組件的高度。
寬度	指定網頁組件的寬度。
組件區塊狀態	指定當使用者開啟頁面時，頁面上是否要顯示整個網頁組件。根據預設，組件區塊狀態是設定為 [一般]，亦即會顯示整個網頁組件。當狀態設定為 [最小化] 時，只會顯示標題列。
組件區塊類型	指定是否顯示網頁組件圖文框的標題列及框線。

版面配置

屬性	描述
隱藏	指定當使用者開啟頁面時，是否要顯示網頁組件。若選取此核取方塊，則網頁組件只在您設計頁面時出現，且標題後會加上 (隱藏)。若要透過網頁組件連線以使用網頁組件來提供資料給另一個網頁組件，但不想要顯示該網頁組件，即可隱藏網頁組件。
方向	指定網頁組件內容的文字方向。例如，阿拉伯文是由右到左的語言，而英文與其他大多數歐洲語言則是由左到右的語言。只有某些類型的網頁組件才可以使用此設定。
區域	指定網頁組件所在的頁面區域。附註: 當您沒有權限可修改區域時，清單方塊中就不會列出頁面上的區域。
區域索引	指定當區域包含一個以上的網頁組件時，網頁組件在區域中的位置。若要指定順序，請在文字方塊中輸入正整數。區域中的網頁組件若是由上而下依序排列，值 1 即表示網頁組件會出現在區域的頂端。區域中的網頁組件若是由左而右依序排列，值 1 即表示網頁組件會出現在區域的左側。例如，當您將網頁組件新增至由上而下排列的空白區域時，區域索引為 0。當您將第二個網頁組件新增到該區域的底端時，其區域索引為 1。若要將第二個網頁組件移至該區域的頂端，請輸入 0，然後為第一個網頁組件輸入 1。附註: 區域中的每個網頁組件都必須有唯一的區域索引值。因此，變更目前網頁組件的區域索引值，也會變更該區域中其他網頁組件的區域索引值。

進階

屬性	描述
允許最小化	指定網頁組件是否可以最小化。
允許關閉	指定網頁組件是否可從頁面中移除。
允許隱藏	指定網頁組件是否可以隱藏。
允許區域變更	指定網頁組件是否可以移至不同的區域。
允許連線	指定網頁組件是否可以與其他網頁組件連線。
允許在個人檢視中編輯	指定網頁組件內容是否可以在個人檢視中修改。
匯出模式	指定允許此網頁組件匯出之資料的層級。視您的設定而異，可能無法使用此設定。
標題 URL	指定內含網頁組件其他相關資訊之檔案的 URL。當您按一下網頁組件標題時，該檔案會顯示在另一個瀏覽器視窗中。
描述	指定當您將滑鼠指標置於網頁組件標題或網頁組件圖示上時，所出現的工具提示。當您在工具窗格中使用 [尋找網頁組件] 功能表上的 [搜尋] 命令來搜尋網頁組件時，會使用此屬性的值。
說明 URL	指定內含網頁組件相關說明資訊之檔案的位置。當您按一下 [網頁組件] 功能表中的 [說明] 命令時，[說明] 資訊會顯示在另一個瀏覽器視窗中。
說明模式	指定瀏覽器顯示網頁組件 [說明] 內容的方式。選取下列其中一項： • 強制回應：會開啟另一個瀏覽器視窗 (若瀏覽器有此功能)。使用者回到網頁前，必須先關閉視窗。 • 非強制回應：會開啟另一個瀏覽器視窗 (若瀏覽器有此功能)。使用者回到網頁之前，不一定要先關閉視窗。此為預設值。 • 導覽：在目前的瀏覽器視窗中開啟網頁。附註: 即使自訂 Microsoft ASP.NET 網頁組件支援此屬性，預設 SharePoint 說明主題只會在另一個瀏覽器視窗中開啟。
目錄圖示圖像 URL	指定一個檔案的位置，而該檔案內含的圖像在網頁組件清單中會作為網頁組件圖示使用。圖像大小必須為 16 x 16 像素。
標題圖示圖像 URL	指定一個檔案的位置，而網頁組件標題列中會使用該檔案內含的圖像。圖像大小必須為 16 x 16 像素。
匯入錯誤訊息	指定匯入網頁組件發生問題時要顯示的訊息。

頁面頂端