Liste der Steuerelemente (HTML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

Windows-Runtime-Apps mit JavaScript verfügen über Zugriff auf eine umfangreiche Bibliothek mit Steuerelementen, die die Entwicklung der Benutzeroberfläche unterstützen. Einige dieser Steuerelemente weisen eine visuelle Darstellung auf. Andere fungieren als Container für andere Steuerelemente oder Inhalte (z. B. Bilder und Medien).

Dieses Thema enthält eine alphabetische Liste der häufigsten Steuerelemente für Windows-Runtime-Apps mit JavaScript.

A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z

A

• a
  Kennzeichnet den Start oder das Ziel eines Hypertextlinks.

  <a href="url">Your text</a>
  

  Referenz: a

• App-Leiste
  Enthält eine Symbolleiste zum Anzeigen App-spezifischer Befehle.

  <div data-win-control="WinJS.UI.AppBar"></div>
  

  Referenz: WinJS.UI.AppBar

  Schnellstart: Hinzufügen einer App-Leiste

• Audio
  Legt die Ton- bzw. Audioinhalte fest, die in einem Dokument wiedergegeben werden sollen, zum Beispiel Musik oder Effekte.

  <audio>
      <source src="uri" type="audioType" />
  </audio>
  

  Referenz: audio

B

• Zurück-Schaltfläche (nur Windows)
  Stellt die Rückwärtsnavigation in Form einer Schaltfläche bereit.

  <div><button data-win-control="WinJS.UI.BackButton"></button></div>
  

  Referenz: WinJS.UI.BackButton

• Schaltfläche
  

  Stellt ein Schaltflächen-Steuerelement dar.

  <button>A button</button>
  

  – oder –

  <input type="button" value="A button" />
  

  Referenz: button, input type=button

  Schnellstart: Hinzufügen einer Schaltfläche

C

• Canvas
  Stellt ein Objekt bereit, das zum Zeichnen, Rendern und Ändern von Bildern und Grafiken in einem Dokument verwendet wird.

  <canvas />
  

  Referenz: canvas

  Schnellstart: Zeichnen auf eine Canvas

• Kontrollkästchen
  

  Stellt ein Kontrollkästchen dar, das der Benutzer aktivieren und deaktivieren kann.

  <input type="checkbox" />
  

  Referenz: input type=checkbox

  Schnellstart: Hinzufügen von Kontrollkästchen

• Kombinationsfeld
  Informationen finden Sie im Eintrag zu "select".

• Inhaltsdialogfeld
  Zeigt wichtige Informationen, die die Aufmerksamkeit oder eine explizite Aktion des Benutzers erfordern, und blockiert vorübergehend Interaktionen mit anderen Elementen in der App.

  <div 
    data-win-control="WinJS.UI.ContentDialog">
    <!-- Content -->
  </div
  

  Referenz: ContentDialog

• Kontextmenü
  Enthält ein kleines Menü, das Benutzern den Zugriff auf Aktionen (wie Zwischenablagebefehle) für Text- oder UI-Objekte in den Windows Store-Apps ermöglicht.

  var menu = new Windows.UI.Popups.PopupMenu();
  

  Referenz: Windows.UI.Popups.PopupMenu

D

• Datumsauswahl (nur Windows)
  

  Legt ein Datum fest.

  <div data-win-control="WinJS.UI.DatePicker"></div>
  

  Referenz: DatePicker

  Schnellstart: Hinzufügen eines DatePicker-Steuerelements

• Dropdownliste
  Informationen finden Sie im Eintrag zur "select".

E

• E-Mail-Eingabefeld
  Ein Steuerelement für die einzeilige Texteingabe, das eine oder mehrere E-Mail-Adressen akzeptiert.

  <input type="email" />
  

  Referenz: input type=email

F

• Dateiupload
  Erstellt ein Dateiuploadobjekt mit einem Textfeld und einer Schaltfläche zum Durchsuchen.

  <input type="file" />
  

  Referenz: input type=file

• Flexbox
  Definiert ein Layout, das den verfügbaren Platz bei der Definition von Feldgrößen berücksichtigt und so relative Größen und Positionierung ermöglicht.

  <div style="display: -ms-box;">
      <!-- Child elements -->
  </div>
  

  Referenz: display

• Flip-Ansicht
  Zeigt eine Sammlung an, jeweils ein Element.

  <div data-win-control="WinJS.UI.FlipView"></div>
  

  Referenz: WinJS.UI.FlipView

  Schnellstart: Hinzufügen eines FlipView-Steuerelements

• Flyout (nur Windows)
  Zeigt eine Meldung an, die einen Benutzereingriff erfordert. (Im Gegensatz zu einem Dialogfeld wird von einem Flyout kein separates Fenster erstellt und keine Benutzerinteraktion blockiert.)

  <div data-win-control="WinJS.UI.Flyout"></div>
  

  Referenz: WinJS.UI.Flyout

  Schnellstart: Hinzufügen eines Flyouts

G

• Raster
  Ein CSS-Layout, das einen aus Spalten und Zeilen bestehenden flexiblen Rasterbereich definiert.

  <div style="{display: -ms-grid}">
      <!-- Child elements -->
  </div>
  

  Referenz: display

• Rasteransicht
  Ein ListView-Objekt mit einem Rasterlayout. Weitere Informationen finden Sie im Eintrag zur "Listenansicht".

  <div data-win-control="WinJS.UI.ListView" 
      data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>
  

  Referenz: WinJS.UI.ListView

  Schnellstart: Hinzufügen eines ListView-Objekts

H

• Html-Steuerelement
  Zeigt Inhalte von einer HTML-Seite an.

  <div data-win-control="WinJS.UI.HtmlControl"></div>
  

  Referenz: WinJS.UI.HtmlControl

• Hub (nur Windows)
  Erstellt ein Hubnavigationsmuster bestehend aus Abschnitten, zu denen navigiert werden kann. Jeder Abschnitt wird durch einen Hubabschnitt definiert.

  <div data-win-control="WinJS.UI.Hub"></div>
  

  Referenz: WinJS.UI.Hub

  Beispiel für ein HTML-Hub-Steuerelement

• Hubabschnitt (nur Windows)
  Definiert einen Abschnitt eines Hubs.

  <div data-win-control="WinJS.UI.HubSection"></div>
  

  Referenz: WinJS.UI.HubSection

  Beispiel für ein HTML-Hub-Steuerelement

• Hyperlink
  Informationen finden Sie im Eintrag "a".

I

• iframe
  Ein unverankerter Inlineframe, der in einem anderen Dokument erscheinen kann.

  <iframe src="url" />
  

  Referenz: iframe

• img
  Zeigt ein Bild an.

  <img src="url" />
  

  Referenz: img

• Elementcontainer
  Definiert ein Element, das gedrückt und gezogen und auf dem eine Streifbewegung ausgeführt werden kann.

  <div data-win-control="WinJS.UI.ItemContainer"></div>
  

  Referenz: WinJS.UI.ItemContainer

  HTML-ItemContainer-Beispiel

J

• Sprunganzeige
  Informationen finden Sie im Eintrag zum "semantischen Zoom".

L

• Bezeichnung
  Gibt eine Bezeichnung für ein anderes Element auf der Seite an.

  <label for="otherControl">Label text</label>
  <input type="text" id="otherControl" />
  

  Referenz: label

• Listenfeld
  Informationen finden Sie im Eintrag zu "select".

• Listenansicht
  Zeigt eine Sammlung von Daten in einer Listen- oder Rasteransicht an.

  <div data-win-control="WinJS.UI.ListView"></div>
  

  Referenz: WinJS.UI.ListView

  Schnellstart: Hinzufügen eines ListView-Objekts

M

• Medienelement
  Informationen finden Sie in den Einträgen für "Audio" und "Video."

• Media Player
  Informationen finden Sie in den Einträgen für "Audio" und "Video."

• Menü
  Zeigt ein Menü an. (Nur Windows)

  <div data-win-control="WinJS.UI.Menu"></div>
  

  Referenz: WinJS.UI.Menu

• Menübefehl (nur Windows)
  Stellt einen Befehl dar, der in einem Menu-Objekt angezeigt wird.

  <button data-win-control="WinJS.UI.MenuCommand" />
  

  Referenz: WinJS.UI.MenuCommand

• Meldungsdialogfeld
  Zeigt eine Meldung an, die eine sofortige Benutzerantwort erfordert.

  Referenz: Windows.UI.Popups.MessageDialog

  Schnellstart: Hinzufügen eines Meldungsdialogfelds

• mehrzeiliges Textfeld
  Informationen finden Sie im Eintrag zu "textarea".

N

• Navigationsleiste (nur Windows)
  Zeigt Navigationssteuerelemente in einer Symbolleiste an, die der Benutzer anzeigen oder ausblenden kann.

  <div data-win-control="WinJS.UI.NavBar"></div>
  

  Referenz: WinJS.UI.NavBar

  HTML-NavBar-Steuerelementbeispiel

• Navigationsleistenbefehl (nur Windows)
  Stellt in einem Navigationsleistencontainer einen Navigationsbefehl dar.

  <div data-win-control="WinJS.UI.NavBarCommand"></div>
  

  Referenz: WinJS.UI.NavBarCommand

  HTML-NavBar-Steuerelementbeispiel

• Navigationsleistencontainer (nur Windows)
  Enthält eine Gruppe mit Navigationsleistenbefehlen in einer Navigationsleiste.

  <div data-win-control="WinJS.UI.NavBarContainer"></div>
  

  Referenz: WinJS.UI.NavBarContainer

  HTML-NavBar-Steuerelementbeispiel

• Zahleingabefeld
  Ein Steuerelement für die einzeilige Texteingabe, das einen numerischen Wert akzeptiert.

  <input type="number" />
  

  Referenz: input type=number

P

• Seitensteuerung
  Stellt ein benutzerdefiniertes Steuerelement oder eine Seite in einer Navigationsapp dar.

  Referenz: WinJS.UI.Pages.PageControl

  Schnellstart: Verwenden der Einzelseitennavigation

• Verschiebungs-Bildlaufansicht
  Informationen finden Sie im Eintrag zum "Bildlauf".

• Kennworteingabefeld
  Ein Steuerelement für die einzeilige Texteingabe, ähnlich dem Steuerelement für die Texteingabe, jedoch ohne Textanzeige während der Eingabe durch den Benutzer.

  <input type="password" />
  

  Referenz: input type=password

• Pivot
  Erstellt ein Registersteuerelement, das mehrere Elemente anzeigt.

  <div data-win-control='WinJS.UI.Pivot'></div>
  

  Referenz: WinJS.UI.Pivot

• Pivot-Element
  Erstellt innerhalb eines Registersteuerelements eine Registerkarte.

  <div data-win-control='WinJS.UI.PivotItem'></div>
  

  Referenz: WinJS.UI.PivotItem

• Popupmenü
  Informationen finden Sie im Eintrag zum "Kontextmenü".

• Statusleiste
  

  Zeigt eine Leiste an, die einen laufenden Vorgang widerspiegelt. Der unbestimmte Statusring wird unter Windows Phone 8.1 nicht unterstützt.

  <progress />
  

  Referenz: progress

  Schnellstart: Hinzufügen von Statussteuerelementen

• Statuskreis (nur Windows)
  Zeigt einen Ring an, der einen laufenden Vorgang widerspiegelt.

  <progress class="win-ring" style="width: 20px; height: 20px" />
  

  Referenz: progress

  Schnellstart: Hinzufügen von Statussteuerelmenten

• Schaltfläche
  Informationen finden Sie im Eintrag zu "Schaltflächen".

R

• Optionsfeld
  Eine Art von Auswahlsteuerelement, das die Auswahl des Benutzers auf einen einzigen Wert innerhalb einer Reihe von Werten beschränkt. Verknüpfen Sie dazu alle Schaltflächen in einer Reihe von Optionsfeldern, indem Sie jeder Schaltfläche denselben Namen zuweisen.

  <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>
  

  Referenz: input type=radio

• Bereich
  Informationen finden Sie im Eintrag zu "slider".

• Bewertung (nur Windows)
  

  Ermöglicht es dem Benutzer, eine Bewertung abzugeben oder die bestehende Bewertung aufzurufen.

  <div data-win-control="WinJS.UI.Rating"></div>
  

  Referenz: WinJS.UI.Rating

  Schnellstart: Hinzufügen von Bewertungen

• Repeater
  Generiert HTML aus einer Reihe von Daten. Mithilfe dieses Steuerelements können Sie Elementlisten generieren.

  <div data-win-control="WinJS.UI.Repeater"></div>
  

  Referenz: WinJS.UI.Repeater

  HTML-Repeater-Steuerelementbeispiel

• Schaltfläche "Zurücksetzen"
  

  Setzt die Daten in einem Formular zurück.

  <button type="reset">Reset</button>
  

  Referenz: button, input type=reset

  Schnellstart: Hinzufügen einer Schaltfläche

• Rich-Edit-Feld/Rich-Text-Feld
  Ein Steuerelement für die Texteingabe, ähnlich einem Feld zur Texteingabe, bietet jedoch Unterstützung für Inhalte mit untergeordneten Elementen. Zum Erstellen eines Rich-Text-Felds legen Sie die contentEditable-Eigenschaft des Elements fest, das Sie bearbeiten möchten.

  <div contentEditable="true">
      <!-- Elements to edit. -->
  </div>
  

  Referenz: contentEditable

S

• Bildlaufleiste
  Ein Container, in dem Sie einen Bildlauf durch seine Elemente durchführen können. Sie fügen diese Bildlauffunktion hinzu, indem Sie den overflow-Stil eines Elements für den Bildlauf oder automatisch festlegen.

  <div style="overflow:scroll;">
      <!-- Contents -->
  </div>
  

  Referenz: overflow

• Bildlaufansicht
  Zeigt eine Inhaltsansicht an, die ein Benutzer vergrößern und verkleinern kann, und bietet zusätzliche Features wie Andockpunkte, die diese Erfahrung verbessern.

  <div style=overflow:scroll;-ms-content-zooming:zoom>>
      <!-- Contents to edit. -->
  </div>
  

  Referenz: overflow, ms-content-zooming

• Suchfeld (nur Windows)
  Ermöglicht dem Benutzer das Ausführen von Suchabfragen und Auswählen von Vorschlägen.

  <div data-win-control="WinJS.UI.SearchBox"></div>
  

  Referenz: WinJS.UI.SearchBox

  SearchBox-Steuerelementbeispiel

• Auswählen
  Stellt ein Listenfeld, ein Kombinationsfeld oder eine Dropdownliste dar.

  <select>
      <option>Apple</option>
      <option>Banana</option>
      <option>Grape</option>
      <option>Orange</option>
      <option>Pear</option>
      <option>Watermelon</option>
  </select>
  

  Referenz: select

• Semantischer Zoom
  Ermöglicht dem Benutzer das Zoomen zwischen zwei Ansichten einer Sammlung mit Elementen.

  <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>
  

  Referenz: WinJS.UI.SemanticZoom

• Einstellungen-Flyout (nur Windows)
  Bietet Zugriff auf Appeinstellungen.

  <div data-win-control="WinJS.UI.SettingsFlyout"></div>
  

  Referenz: SettingsFlyout

• einzeiliges Textfeld
  Informationen finden Sie im Eintrag zu "Textfeldern".

• Schieberegler
  Stellt einen Schieberegler für einen Bereich zur Auswahl eines numerischen Werts zur Verfügung.

  <input type="range" />
  

  Referenz: input type=range

• geteilte Ansicht
  Unterteilt einen Bereich in zwei Abschnitte: einen Bereich, der am Rand angezeigt werden kann, und einen Inhaltsbereich, der den verfügbaren Platz ausfüllt.

  <div data-win-control="WinJS.UI.SplitView">
  </div>
  

  Referenz: SplitView

• Schaltfläche "Senden"
  

  Erstellt eine Schaltfläche, die das Formular absendet, wenn auf sie geklickt wird.

  <button type="submit">Submit</button>
  

  Referenz: button, input type=submit

  Schnellstart: Hinzufügen einer Schaltfläche

• SVG
  Definiert ein SVG-Dokument oder -Dokumentfragment, das Vektorgrafiken rendern kann.

  <svg xmlns="http://www.w3.org/2000/svg"></svg>
  

  Referenz: svg

T

• Textfeld
  Ein Steuerelement für die einzeilige Texteingabe.

  <input type="text" />
  

  Referenz: input type=text

• Textbereich
  Ein Steuerelement für die mehrzeilige Texteingabe.

  <textarea></textarea>
  

  Referenz: textarea

• Zeitauswahl (nur Windows)
  

  Ermöglicht dem Benutzer das Festlegen einer Uhrzeit.

  <div data-win-control="WinJS.UI.TimePicker"></div>
  

  Referenz: WinJS.UI.TimePicker

  Schnellstart: Hinzufügen von TimePicker-Steuerelementen

• Umschalter
  Stellt einen Schalter dar, mit dem zwischen zwei Zuständen hin und her geschaltet werden kann.

  <div data-win-control="WinJS.UI.ToggleSwitch"></div>
  

  Referenz: ToggleSwitch

• Symbolleiste
  Zeigt eine Reihe von Befehlen an. Eine Toolbar kann an einer beliebigen Stelle etwa in einem Flyout oder auf einer AppBar angezeigt werden.

  <div data-win-control="WinJS.UI.Toolbar">
  </div>
  

  Referenz: Toolbar

• QuickInfo (nur Windows)
  Zeigt eine umfangreiche QuickInfo an, die umfangreichen Inhalt (z. B. Bilder und formatierter Text) unterstützen kann, um mehr Informationen zu etwas anzuzeigen.

  <div data-win-control="WinJS.UI.ToolTip"></div>
  

  Referenz: WinJS.UI.Tooltip

• QuickInfo, einfach
  Zeigt eine einfache, nur aus Text bestehende QuickInfo für ein Element an.

  <element title="tooltip text" />
  

  Referenz: title

U

• URL-Eingabefeld
  Ein Steuerelement für die einzeilige Texteingabe, das URLs akzeptiert.

  <input type="url" />
  

  Referenz: input type=url

V

• Video
  Legt die Videoinhalte fest, die in einem Dokument wiedergegeben werden sollen.

  <video controls="controls">
     <source src="url" type="videoType" />
  </video> 
  

  Referenz: video

• Viewbox
  Skaliert ein einziges untergeordnetes Element so, dass der verfügbare Raum ausgefüllt wird, ohne dass dabei eine Größenänderung erfolgt. Dieses Steuerelement reagiert auf Größenänderungen des Containers sowie auf Größenänderungen des untergeordneten Elements. Eine Medienabfrage kann beispielsweise zu einer Änderung des Seitenverhältnisses führen.

  <div data-win-control="WinJS.UI.ViewBox"></div>
  

  Referenz: WinJS.UI.ViewBox

W

• Webansicht
  Informationen finden Sie im Eintrag zu "iframe".

Z

• zoomfähige Bildlaufansicht
  Informationen finden Sie im Eintrag zum "Bildlauf".

Verwandte Themen

try.buildwinjs.com