依功能分類的控制項 (HTML)
[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱 最新文件 ]
使用 JavaScript 的 Windows 執行階段應用程式提供可執行許多功能的控制項。您可以比較提供類似功能的控制項，依自己的情況選取適當的控制項 (如需依字母排序的控制項清單，請參閱控制項清單)。
如需了解這些功能的運作情形，請參閱應用程式功能，從開始到完成系列 : Windows 市集應用程式 UI，從開始到完成
應用程式列和命令
應用程式列
提供用來顯示應用程式特定命令的工具列。<div data-win-control="WinJS.UI.AppBar"></div>操作功能表
在使用 JavaScript 的 Windows 執行階段應用程式中提供輕量型功能表，讓使用者可以在文字或 UI 物件上存取動作 (如剪貼簿命令)。var menu = new Windows.UI.Popups.PopupMenu();功能表 (僅限 Windows)
顯示功能表。<div data-win-control="WinJS.UI.Menu"></div>參考：Menu
功能表命令 (僅限 Windows)
代表在 Menu 物件中顯示的命令。<button data-win-control="WinJS.UI.MenuCommand" />參考：MenuCommand
瀏覽列 (僅限 Windows)
在使用者可以顯示或隱藏的工具列上顯示瀏覽命令。<div data-win-control="WinJS.UI.NavBar"></div>瀏覽列命令 (僅限 Windows)
代表瀏覽列容器中的瀏覽命令。<div data-win-control="WinJS.UI.NavBarCommand"></div>瀏覽列容器 (僅限 Windows)
在瀏覽列包含一組瀏覽列命令。<div data-win-control="WinJS.UI.NavBarContainer"></div>快顯功能表
請參閱"操作功能表"項目。工具列
顯示一組命令。Toolbar 可以顯示在任何位置，包括在 Flyout 或 AppBar 中。<div data-win-control="WinJS.UI.Toolbar"> </div>參考：Toolbar
按鈕
返回按鈕 (僅限 Windows)
以按鈕的形式提供向後瀏覽。<div><button data-win-control="WinJS.UI.BackButton"></div>按鈕
.png "按鈕控制項")
代表一個按鈕控制項。
<button>A button</button>- 或 -
<input type="button" value="A button" />按鈕
請參閱＜按鈕＞重設按鈕
.png "重設按鈕")
重設表單中的資料。
<button type="reset">Reset</button>提交按鈕
.png "提交按鈕控制項")
建立按一下時會提交表單的按鈕。
<button type="submit">Submit</button>
集合/資料控制項
翻轉檢視
顯示集合，一次一個項目。<div data-win-control="WinJS.UI.FlipView"></div>格線檢視
具備格線配置的 ListView。如需詳細資訊，請參閱"清單檢視"項目。<div data-win-control="WinJS.UI.ListView" data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>捷徑檢視器
請參閱語意式縮放Repeater
從一組資料產生 HTML。使用這個控制項產生項目清單。<div data-win-control="WinJS.UI.Repeater"></div>語意式縮放
讓使用者能夠在項目集合的兩個檢視之間縮放。<div data-win-control="WinJS.UI.SemanticZoom"> <!-- Control that provides the zoomed-in view. --> <div id="zoomedInView" data-win-control="WinJS.UI.ListView"></div> <!-- Control that provides the zoomed-out view. --> <div id="zoomedOutView" data-win-control="WinJS.UI.ListView"></div> </div>
飛出視窗
內容對話方塊
顯示需要使用者注意或明確動作的重要資訊，並暫時封鎖與應用程式中其他元素的互動。<div data-win-control="WinJS.UI.ContentDialog"> <!-- Content --> </div操作功能表
請參閱"快顯功能表"。飛出視窗 (僅限 Windows)
顯示一則要求使用者互動的訊息。(與訊息對話方塊不同的是，飛出視窗不會建立另一個視窗，也不會封鎖其他使用者互動。)<div data-win-control="WinJS.UI.Flyout"></div>功能表 (僅限 Windows)
顯示功能表。<div data-win-control="WinJS.UI.Menu"></div>功能表命令 (僅限 Windows)
代表在 Menu 物件中顯示的命令。<button data-win-control="WinJS.UI.MenuCommand" />訊息對話方塊
顯示需要使用者立即回應的訊息。快顯功能表
代表操作功能表。var popupMenu = new Windows.UI.Popups.PopupMenu();設定飛出視窗 (僅限 Windows)
提供對應用程式設定的存取。<div data-win-control="WinJS.UI.SettingsFlyout"></div>工具提示 (僅限 Windows)
顯示可以支援豐富內容 (如影像和格式化文字) 的豐富工具提示，以顯示某個項目的更多資訊。<div data-win-control="WinJS.UI.ToolTip"></div>簡單工具提示
為元素顯示一個簡單、僅包含文字的工具提示。<element title="tooltip text" />參考：title
圖形
畫布
在文件上提供用來繪製、轉譯和操作影像和圖形的物件。<canvas />參考：canvas
svg
定義可以轉譯向量圖形的 SVG 文件或文件片段。<svg xmlns="http://www.w3.org/2000/svg"></svg>參考：svg
影像
img
顯示影像。<img src="url" />參考：img
配置控制項
彈性方塊
定義方塊維度時會考慮可用空間的 CSS 配置，可啟用相對大小和定位。<div style="display: -ms-box;"> <!-- Child elements --> </div>參考：display
格線
定義由欄和列組成之彈性格線區域的 CSS 配置。<div style="{display: -ms-grid}"> <!-- Child elements --> </div>參考：display
中樞 (僅限 Windows)
建立由各個可瀏覽區段組成的中樞瀏覽模式。每個區段都由中樞區段加以定義。<div data-win-control="WinJS.UI.Hub"></div>參考：WinJS.UI.Hub
中樞區段 (僅限 Windows)
定義中樞的區段。<div data-win-control="WinJS.UI.HubSection"></div>項目容器
定義一個可以按下、撥動以及拖曳的項目。<div data-win-control="WinJS.UI.ItemContainer"></div>移動瀏覽捲動檢視
請參閱"捲動檢視"項目。樞紐分析
建立顯示多個項目的索引標籤控制項。<div data-win-control='WinJS.UI.Pivot'></div>樞紐分析項目
在索引標籤控制項內建立索引標籤。<div data-win-control='WinJS.UI.PivotItem'></div>捲軸
可讓您捲動其中內容的容器。您可以新增元素的 overflow 樣式並設定為 scroll 或 auto，以新增此捲動功能。<div style="overflow:scroll;"> <!-- Contents --> </div>參考：overflow
捲動檢視
顯示使用者可以放大/縮小的內容檢視，以及提供增強該經驗的其他功能 (例如貼齊點)。<div style=overflow:scroll;-ms-content-zooming:zoom>> <!-- Contents to edit. --> </div>分割檢視
將區域分割成兩個部分：一個可從邊緣顯示的窗格，以及一個填滿可用空間的內容區域。<div data-win-control="WinJS.UI.SplitView"> </div>參考：SplitView
viewbox
調整單一子元素使其填滿可用的空間，無須調整大小。這個控制項會回應容器大小的變更，以及子元素大小的變更。例如，媒體查詢可能會導致外觀比例變更。<div data-win-control="WinJS.UI.ViewBox"></div>可縮放捲動檢視
請參閱"捲動檢視"項目。
媒體控制項
音訊
指定在文件中播放的音效或音訊內容 (如音樂或效果)。<audio> <source src="uri" type="audioType" /> </audio>參考：audio
媒體元素
請參閱"音訊"和"視訊"項目。媒體播放程式
請參閱"音訊"和"視訊"項目。視訊
指定要在文件中播放的視訊內容。<video controls="controls"> <source src="url" type="videoType" /> </video>參考：video
瀏覽
HTML 控制項
顯示 HTML 網頁的內容。<div data-win-control="WinJS.UI.HtmlControl"></div>iframe
可以顯示另一份文件的內嵌浮動畫面。<iframe src="url" />參考：iframe
頁面控制項
代表瀏覽應用程式中的自訂控制項或頁面。分割檢視
將區域分割成兩個部分：一個可從邊緣顯示的窗格，以及一個填滿可用空間的內容區域。<div data-win-control="WinJS.UI.SplitView"> </div>參考：SplitView
網頁檢視
請參閱 "iframe" 項目。
進度控制項
進度列
.png "進度控制項樣式")
顯示指示工作正在進行的進度列。
<progress />參考：progress
進度環 (僅限 Windows)
顯示指示工作正在進行的進度環。<progress class="win-ring" style="width: 20px; height: 20px" />參考：progress
評等控制項
評等 (僅限 Windows)
.png "評等控制項")
讓使用者進行評等或檢視現有評等。
<div data-win-control="WinJS.UI.Rating"></div>
選取控制項
核取方塊
.png "多個核取方塊控制項")
代表使用者可以選取和清除的核取方塊。
<input type="checkbox" />下拉式方塊
請參閱"選取"項目。日期選擇器 (僅限 Windows)
.png "DatePicker 淺色樣式")
設定日期。
<div data-win-control="WinJS.UI.DatePicker"></div>參考：DatePicker
檔案上傳
建立包含文字方塊和瀏覽按鈕的檔案上傳物件。<input type="file" />清單方塊
請參閱"選取"項目。清單檢視
在清單或格線配置中顯示資料集合。<div data-win-control="WinJS.UI.ListView"></div>選項按鈕
限制使用者只能在一組值中選取單一值的選取控制項類型。若要這樣做，您必須將一組選項按鈕中的每個按鈕指派相同的名稱，將它們連結在一起。<input type="radio" id="redRadio" name="colorRadio" /><label for="redRadio">Red</label> <input type="radio" id="greedRadio" name="colorRadio" /><label for="greedRadio">Green</label> <input type="radio" id="blueRadio" name="colorRadio" /><label for="blueRadio">Blue</label>範圍
請參閱"滑桿"項目。搜尋方塊 (僅限 Windows)
讓使用者執行搜尋查詢並選取建議。<div data-win-control="WinJS.UI.SearchBox"></div>選取
代表清單方塊、下拉式方塊或下拉式清單。<select> <option>Apple</option> <option>Banana</option> <option>Grape</option> <option>Orange</option> <option>Pear</option> <option>Watermelon</option> </select>參考：select
滑桿
提供範圍滑桿以選取數值。<input type="range" />時間選擇器 (僅限 Windows)
.png "TimePicker 淺色樣式")
讓使用者指定時間。
<div data-win-control="WinJS.UI.TimePicker"></div>切換開關
代表可以在兩個狀態之間切換的開關。<div data-win-control="WinJS.UI.ToggleSwitch"></div>參考：ToggleSwitch
文字控制項
電子郵件輸入方塊
單行輸入控制項，可接受一或多個電子郵件地址。<input type="email" />多行文字方塊
請參閱 "textarea" 項目。數值輸入方塊
接受數值的單行輸入控制項。<input type="number" />密碼輸入方塊
單行文字輸入控制項與文字輸入控制項類似，但是使用者輸入文字時不會顯示。<input type="password" />Rich Edit 方塊/RTF 方塊
提供文字輸入功能的控制項，它與文字輸入方塊類似，但是可以處理包含子元素的內容。若要建立 RTF 方塊，請設定要編輯之元素的 contentEditable 屬性。<div contentEditable="true"> <!-- Elements to edit. --> </div>單行文字方塊
請參閱"文字方塊"項目。文字方塊
單行文字輸入控制項。<input type="text" />文字區域
多行文字輸入控制項。<textarea></textarea>參考：textarea
URL 輸入方塊
接受 URL 的單行文字輸入控制項。<input type="url" />
使用者說明
標籤
為頁面上的另一個元素指定標籤。<label for="otherControl">Label text</label> <input type="text" id="otherControl" />參考：label
工具提示 (僅限 Windows)
顯示可以支援豐富內容 (如影像和格式化文字) 的豐富工具提示，以顯示某個項目的更多資訊。<div data-win-control="WinJS.UI.ToolTip"></div>簡單工具提示
為元素顯示一個簡單、僅包含文字的工具提示。<element title="tooltip text" />參考：title