Liste des contrôles (HTML)

  • Article

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Les applications Windows Runtime en JavaScript ont accès à une vaste bibliothèque de contrôles qui aident au développement de l’interface utilisateur. Certains de ces contrôles ont une représentation visuelle, tandis que d’autres font office de conteneurs d’autres contrôles ou d’un autre contenu, à l’instar des images et d’un contenu multimédia.

Cette rubrique propose une liste alphabétique des principaux contrôles des applications Windows Runtime en 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
    Désigne le début ou la destination d’un lien hypertexte.

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

    Référence : a

  • barre de l’application
    Fournit une barre d’outils pour afficher des commandes spécifiques à l’application.

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

    Référence : WinJS.UI.AppBar

    Démarrage rapide : ajout d’une barre de l’application

  • audio
    Spécifie le contenu sonore ou audio, tel que de la musique ou des effets, à lire dans un document.

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

    Référence : audio

B

  • bouton Précédent (Windows uniquement)
    Fournit la possibilité de naviguer vers l’arrière sous forme d’un bouton.

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

    Référence : WinJS.UI.BackButton

  • bouton
    Contrôle bouton

    Représente un contrôle bouton.

    <button>A button</button>

    - ou -

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

    Référence : button, input type=button

    Démarrage rapide : ajout d’un bouton

C

  • zone de dessin
    Fournit un objet utilisé pour le dessin, le rendu et la manipulation d’images et de graphiques dans un document.

    <canvas />

    Référence : canvas

    Démarrage rapide : dessin sur une zone de dessin

  • case à cocher
    Plusieurs contrôles de case à cocher

    Représente une case à cocher que l’utilisateur peut activer ou désactiver.

    <input type="checkbox" />

    Référence : input type=checkbox

    Démarrage rapide : ajout de cases à cocher

  • zone de liste déroulante
    Voir l’entrée "select" (sélection).

  • boîte de dialogue de contenu
    Affiche les informations critiques qui nécessitent l’attention, ou une action explicite de l’utilisateur, et qui bloquent pour un temps toute interaction avec d’autres éléments de l’application.

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

    Référence : ContentDialog

  • menu contextuel
    Fournit un menu léger qui donne aux utilisateurs accès à des actions (telles que les commandes du Presse-papiers) sur du texte ou des objets de l’interface utilisateur dans les applications du Windows Store.

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

    Référence : Windows.UI.Popups.PopupMenu

D

E

  • zone de saisie du courrier électronique
    Contrôle avec zone de saisie d’une seule ligne qui accepte une ou plusieurs adresses e-mail.

    <input type="email" />

    Référence : input type=email

F

  • téléchargement de fichiers
    Crée un objet de téléchargement de fichier doté d’une zone de texte et d’un bouton Parcourir.

    <input type="file" />

    Référence : input type=file

  • zone flexible
    Disposition qui prend en compte l’espace disponible lors de la définition des dimensions d’une zone, permettant ainsi des tailles et un positionnement relatif.

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

    Référence : display

  • vue symétrique
    Affiche une collection, un élément à la fois.

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

    Référence : WinJS.UI.FlipView

    Démarrage rapide : ajout d’un contrôle FlipView

  • menu volant (Windows uniquement)
    Affiche un message nécessitant une action de la part de l’utilisateur. (Contrairement à une boîte de dialogue, un menu volant ne crée pas de fenêtre distincte et ne bloque pas l’action des autres utilisateurs.)

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

    Référence : WinJS.UI.Flyout

    Démarrage rapide : ajout d’un menu volant

G

  • grille
    Disposition CSS qui définit une zone de grille flexible composée de colonnes et de lignes.

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

    Référence : display

  • affichage Grille
    ListView avec une présentation grille. Voir l’entrée "list view" (affichage liste) pour plus d’informations.

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

    Référence : WinJS.UI.ListView

    Démarrage rapide : ajout d’un contrôle ListView

H

  • contrôle HTML
    Affiche le contenu d’une page HTML.

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

    Référence : WinJS.UI.HtmlControl

  • hub (Windows uniquement)
    Crée un modèle de navigation Hub constitué de sections auxquelles l’utilisateur peut accéder. Chaque section est définie par une section Hub.

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

    Référence : WinJS.UI.Hub

    Exemple de contrôle Hub HTML

  • section hub (Windows uniquement)
    Définit une section d’un Hub.

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

    Référence : WinJS.UI.HubSection

    Exemple de contrôle Hub HTML

  • lien hypertexte
    Voir l’entrée "a".

I

  • iframe
    Cadre flottant inséré pouvant afficher un autre document.

    <iframe src="url" />

    Référence : iframe

  • img
    Affiche une image.

    <img src="url" />

    Référence : img

  • conteneur d’élément
    Définit un élément sur lequel l’utilisateur peut appuyer, et qu’il peut balayer et faire glisser.

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

    Référence : WinJS.UI.ItemContainer

    Exemple de contrôle ItemContainer HTML

J

  • affichage de raccourci
    Voir l’entrée "semantic zoom" (zoom sémantique).

L

  • étiquette
    Spécifie une étiquette pour un autre élément de la page.

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

    Référence : label

  • zone de liste
    Voir l’entrée "select" (sélection).

  • affichage de liste
    Affiche une collection de données dans une disposition en liste ou en grille.

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

    Référence : WinJS.UI.ListView

    Démarrage rapide : ajout d’un contrôle ListView

M

  • élément multimédia
    Voir les entrées "audio" (audio) et "video" (vidéo).

  • lecteur multimédia
    Voir les entrées "audio" (audio) et "video" (vidéo).

  • menu
    Affiche un menu. (Windows uniquement)

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

    Référence : WinJS.UI.Menu

  • commande de menu (Windows uniquement)
    Représente une commande à afficher dans un objet Menu.

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

    Référence : WinJS.UI.MenuCommand

  • boîte de message
    Affiche un message qui nécessite une réponse utilisateur immédiate.

    Référence : Windows.UI.Popups.MessageDialog

    Démarrage rapide : ajout d’une boîte de dialogue de message

  • zone de texte de plusieurs lignes
    Voir l’entrée "textarea" (zone de texte).

N

  • barre de navigation (Windows uniquement)
    Affiche les commandes de navigation dans une barre d’outils que l’utilisateur peut afficher ou masquer.

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

    Référence : WinJS.UI.NavBar

    Exemple de contrôle NavBar HTML

  • commande de barre de navigation (Windows uniquement)
    Représente une commande de navigation dans un conteneur de barre de navigation.

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

    Référence : WinJS.UI.NavBarCommand

    Exemple de contrôle NavBar HTML

  • conteneur de barre de navigation (Windows uniquement)
    Contient un groupe de commandes de barre de navigation dans une barre de navigation.

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

    Référence : WinJS.UI.NavBarContainer

    Exemple de contrôle NavBar HTML

  • zone de saisie de nombre
    Contrôle avec zone de saisie d’une seule ligne qui accepte une valeur numérique.

    <input type="number" />

    Référence : input type=number

P

  • contrôle de page
    Représente un contrôle personnalisé ou une page d’une application de navigation.

    Référence : WinJS.UI.Pages.PageControl

    Démarrage rapide : utilisation de la navigation sur une seule page

  • mouvement panoramique
    Voir l’entrée "scroll view" (défilement).

  • zone de saisie de mot de passe
    Contrôle de zone de texte d’une seule ligne semblable au contrôle d’entrée de texte, excepté que le texte ne s’affiche pas à mesure que l’utilisateur le tape.

    <input type="password" />

    Référence : input type=password

  • pivot
    Crée un contrôle d’onglet qui affiche plusieurs éléments.

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

    Référence : WinJS.UI.Pivot

  • élément pivot
    Crée un onglet dans un contrôle d’onglet.

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

    Référence : WinJS.UI.PivotItem

  • menu contextuel
    Voir l’entrée "context menu" (menu contextuel).

  • barre de progression
    Styles de contrôle de progression

    Affiche une barre indiquant qu’une opération est en cours. L’anneau indéterminé n’est pas pris en charge sur Windows Phone 8.1.

    <progress />

    Référence : progress

    Démarrage rapide : ajout de contrôles de progression

  • anneau de progression (Windows uniquement)
    Affiche un anneau indiquant qu’une opération est en cours.

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

    Référence : progress

    Démarrage rapide : ajout de contrôles de progression

  • bouton de commande
    Voir l’entrée "button" (bouton).

R

  • case d’option
    Type de contrôle de sélection qui limite la sélection d’un utilisateur à une seule valeur d’un ensemble de valeurs. Pour ce faire, vous devez relier chaque case d’un ensemble de cases d’option en attribuant à chaque case le même nom.

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

    Référence : input type=radio

  • plage
    Voir l’entrée "slider" (curseur).

  • évaluation (Windows uniquement)
    Contrôle d’évaluation

    Permet à l’utilisateur d’évaluer un élément ou d’afficher son évaluation existante.

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

    Référence : WinJS.UI.Rating

    Démarrage rapide : ajout d’évaluations

  • repeater
    Génère du code HTML à partir d’un jeu de données. Utilisez ce contrôle pour générer des listes d’éléments.

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

    Référence : WinJS.UI.Repeater

    Exemple de contrôle Repeater HTML

  • bouton de réinitialisation
    Un bouton de réinitialisation

    Réinitialise des données dans un formulaire.

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

    Référence : button, input type=reset

    Démarrage rapide : ajout d’un bouton

  • zone d’édition enrichie/zone de texte enrichi
    Contrôle fournissant une fonctionnalité de saisie de texte semblable à une zone de texte mais qui peut gérer un contenu contenant des éléments enfants. Pour créer une zone de texte enrichi, vous définissez la propriété contentEditable des éléments à modifier.

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

    Référence : contentEditable

S

  • barre de défilement
    Conteneur qui vous permet de parcourir son contenu. Pour ajouter cette fonctionnalité de défilement, définissez le paramètre du style overflow d’un élément sur « scroll » ou « auto ».

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

    Référence : overflow

  • défilement
    Affiche une vue du contenu sur lequel un utilisateur peut effectuer des zooms avant et arrière, et fournit des fonctionnalités supplémentaires, telles que des points d’ancrage, qui améliorent cette expérience.

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

    Référence : overflow, ms-content-zooming

  • zone de recherche (Windows uniquement)
    Permet à l’utilisateur d’effectuer des requêtes de recherche et de sélectionner des suggestions.

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

    Référence : WinJS.UI.SearchBox

    Exemple de contrôle SearchBox

  • select
    Représente une zone de liste, une zone de liste déroulante ou une liste déroulante.

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

    Référence : select

  • zoom sémantique
    Permet à l’utilisateur de zoomer entre deux vues d’une collection d’éléments.

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

    Référence : WinJS.UI.SemanticZoom

  • menu volant Paramètres (Windows uniquement)
    Fournit l’accès aux paramètres de l’application.

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

    Référence : SettingsFlyout

  • zone de texte d’une ligne
    Voir l’entrée "text box" (zone de texte).

  • curseur
    Fournit un curseur de plage permettant de sélectionner une valeur numérique.

    <input type="range" />

    Référence : input type=range

  • mode Fractionné
    Fractionne une zone en deux parties : un volet affichable depuis un bord et une zone de contenu, qui remplit l’espace disponible.

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

    Référence : SplitView

  • bouton d’envoi
    Contrôle bouton Envoyer

    Crée un bouton qui, lorsqu’il est enfoncé, envoie le formulaire.

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

    Référence : button, input type=submit

    Démarrage rapide : ajout d’un bouton

  • svg
    Définit un document SVG ou un fragment de document qui peut afficher le rendu de graphiques vectoriels.

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

    Référence : svg

T

  • zone de texte
    Contrôle de zone de texte d’une seule ligne.

    <input type="text" />

    Référence : input type=text

  • espace de texte
    Contrôle de zone de texte de plusieurs lignes.

    <textarea></textarea>

    Référence : textarea

  • sélecteur d’heure (Windows uniquement)
    Style clair du contrôle TimePicker

    Permet à l’utilisateur de spécifier une heure.

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

    Référence : WinJS.UI.TimePicker

    Démarrage rapide : ajout d’un TimePicker

  • bouton bascule
    Représente un commutateur qui peut basculer entre deux états.

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

    Référence : ToggleSwitch

  • barre d’outils
    Affiche un ensemble de commandes. Un élément Toolbar peut apparaître à n’importe quel emplacement, y compris dans un élément Flyout ou AppBar.

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

    Référence : Toolbar

  • info-bulle (Windows uniquement)
    Affiche une info-bulle enrichie qui prend en charge du contenu riche (tel que des images et du texte mis en forme) pour afficher davantage d’informations sur un élément.

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

    Référence : WinJS.UI.Tooltip

  • info-bulle, simple
    Affiche une info-bulle simple ne contenant que du texte pour un élément.

    <element title="tooltip text" />

    Référence : title

U

  • zone de saisie d’URL
    Contrôle avec zone de saisie d’une seule ligne qui accepte les URL.

    <input type="url" />

    Référence : input type=url

V

  • vidéo
    Spécifie le contenu vidéo à lire dans un document.

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

    Référence : video

  • viewbox
    Ajuste un seul élément enfant pour remplir l’espace disponible sans le redimensionner. Ce contrôle réagit aux modifications apportées à la taille du conteneur et à la taille de l’élément enfant. Par exemple, une demande de support peut aboutir à une modification des proportions.

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

    Référence : WinJS.UI.ViewBox

W

  • affichage Web
    Voir l’entrée "iframe".

Z

  • défilement avec possibilité de mouvement de zoom
    Voir l’entrée "scroll view" (défilement).

Rubriques associées

try.buildwinjs.com