{"title":"Fichiers annexes de formulaire (classe Media)","version":"2.2","locale":"fr","docname":"topics/forms/media","url":"/fr/2.2/topics/forms/media/","canonical":"https://djangodocs.dev/fr/2.2/topics/forms/media/","summary":"L’affichage d’un formulaire Web attractif et ergonomique exige plus que du code HTML simple, il nécessite également des feuilles de style CSS, et si vous voulez…","html":"

Fichiers annexes de formulaire (classe Media)Lien vers cette rubrique#

\n

L’affichage d’un formulaire Web attractif et ergonomique exige plus que du code HTML simple, il nécessite également des feuilles de style CSS, et si vous voulez utiliser des composants « Web 2.0 » plaisants, il sera peut-être nécessaire d’inclure aussi du code JavaScript sur chaque page. La combinaison exacte de CSS et de JavaScript nécessaire pour une page donnée dépend des composants de formulaire employés sur cette page.

\n

C’est là où la définition de fichiers annexes intervient. Django permet d’associer différents fichiers comme des feuilles de style et des scripts à des formulaires et des composants qui ont besoin de ces fichiers. Par exemple, si vous voulez utiliser un calendrier pour afficher les champs date, vous pouvez définir un composant Calendrier personnalisé. Ce composant peut ensuite être associé à des fichiers CSS et JavaScript requis pour afficher le calendrier. Quand le composant Calendrier est utilisé dans un formulaire, Django est capable d’identifier les fichiers CSS et JavaScript nécessaires et de fournir la liste des noms de fichiers au formulaire de manière à ce qu’ils puissent être facilement inclus dans la page Web.

\n\n\n
\n

Fichiers annexes définis statiquementLien vers cette rubrique#

\n

La façon la plus simple de définir des fichiers annexes est sous forme de définition statique. Avec cette méthode, la déclaration se fait dans une classe Media interne. Les propriétés de la classe interne définissent les exigences.

\n

Voici un exemple simple :

\n
Code
from django import forms\n\nclass CalendarWidget(forms.TextInput):\n    class Media:\n        css = {\n            'all': ('pretty.css',)\n        }\n        js = ('animations.js', 'actions.js')\n
\n

Ce code définit un composant CalendarWidget, qui est basé sur TextInput. Chaque fois que CalendarWidget sera utilisé dans un formulaire, ce dernier sera amené à inclure le fichier CSS pretty.css et les fichiers JavaScript animations.js et actions.js.

\n

Cette définition statique est convertie au moment de l’exécution en une propriété de composant nommée media. La liste des fichiers annexes d’une instance de composant CalendarWidget peut être obtenue par cette propriété :

\n
Code
>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet">\n<script type="text/javascript" src="http://static.example.com/animations.js"></script>\n<script type="text/javascript" src="http://static.example.com/actions.js"></script>\n
\n

Voici une liste de toutes les options possibles de Media. Il n’y a pas d’option obligatoire.

\n
\n

cssLien vers cette rubrique#

\n

Un dictionnaire décrivant les fichiers CSS requis par les différentes formes de support d’affichage.

\n

Les valeurs du dictionnaire doivent être composées de tuples/listes de noms de fichiers. Consultez la section sur les chemins pour plus de détails sur la manière de définir les chemins de ces fichiers.

\n

Les clés du dictionnaire correspondent aux types de support d’affichage. Ce sont les mêmes types que les fichiers CSS acceptent dans les déclarations « media » : “all”, “aural”, “braille”, “embossed”, “handheld”, “print”, “projection”, “screen”, “tty” and “tv”. Si vous avez besoin de feuilles de style différentes en fonction de types de support différents, indiquez des listes de fichiers CSS correspondant à chacun de ces types. L’exemple suivant fournit deux options CSS, une pour l’affichage à l’écran et l’autre pour l’impression :

\n
Code
class Media:\n    css = {\n        'screen': ('pretty.css',),\n        'print': ('newspaper.css',)\n    }\n
\n

Si un groupe de fichiers CSS convient à plusieurs types de support d’affichage, la clé de dictionnaire peut être une liste de types de support d’affichage séparés par des virgules. Dans l’exemple suivant, les télévisions et les projecteurs ont les mêmes exigences en terme de support :

\n
Code
class Media:\n    css = {\n        'screen': ('pretty.css',),\n        'tv,projector': ('lo_res.css',),\n        'print': ('newspaper.css',)\n    }\n
\n

Si cette dernière définition de CSS devait être affichée, cela produirait le code HTML suivant :

\n
Code
<link href="http://static.example.com/pretty.css" type="text/css" media="screen" rel="stylesheet">\n<link href="http://static.example.com/lo_res.css" type="text/css" media="tv,projector" rel="stylesheet">\n<link href="http://static.example.com/newspaper.css" type="text/css" media="print" rel="stylesheet">\n
\n
\n
\n

jsLien vers cette rubrique#

\n

Un tuple décrivant les fichiers JavaScript nécessaires. Consultez la section sur les chemins pour plus de détails sur la manière de définir les chemins de ces fichiers.

\n
\n
\n

extendLien vers cette rubrique#

\n

Une valeur booléenne définissant le comportement de l’héritage des déclarations Media.

\n

Par défaut, tout objet utilisant une définition statique de Media hérite de tous les fichiers annexes associés au composant parent, et ceci quelle que soit la manière dont le parent définit ses propres exigences. Par exemple, si nous devions améliorer notre composant Calendar basique de l’exemple ci-dessus :

\n
Code
>>> class FancyCalendarWidget(CalendarWidget):\n...     class Media:\n...         css = {\n...             'all': ('fancy.css',)\n...         }\n...         js = ('whizbang.js',)\n\n>>> w = FancyCalendarWidget()\n>>> print(w.media)\n<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet">\n<link href="http://static.example.com/fancy.css" type="text/css" media="all" rel="stylesheet">\n<script type="text/javascript" src="http://static.example.com/animations.js"></script>\n<script type="text/javascript" src="http://static.example.com/actions.js"></script>\n<script type="text/javascript" src="http://static.example.com/whizbang.js"></script>\n
\n

Le composant FancyCalendar hérite de tous les fichiers annexes de son composant parent. Si vous ne souhaitez pas que Media soit hérité de cette façon, ajoutez une déclaration extend=False à la déclaration de Media:

\n
Code
>>> class FancyCalendarWidget(CalendarWidget):\n...     class Media:\n...         extend = False\n...         css = {\n...             'all': ('fancy.css',)\n...         }\n...         js = ('whizbang.js',)\n\n>>> w = FancyCalendarWidget()\n>>> print(w.media)\n<link href="http://static.example.com/fancy.css" type="text/css" media="all" rel="stylesheet">\n<script type="text/javascript" src="http://static.example.com/whizbang.js"></script>\n
\n

Si vous avez besoin de pouvoir contrôler encore plus l’héritage, définissez vos fichiers annexes en utilisant une propriété dynamique. Les propriétés dynamiques vous donnent un contrôle total sur les fichiers hérités et ceux qui ne le seront pas.

\n
\n
\n
\n

Media comme propriété dynamiqueLien vers cette rubrique#

\n

Si vous avez besoin d’effectuer certaines manipulations encore plus sophistiquées sur les fichiers annexes requis, vous pouvez définir directement la propriété media. Cela peut être réalisé en définissant une propriété du composant qui renvoie une instance de forms.Media. le constructeur de forms.Media accepte les paramètres nommés css and js dans le même format que celui qui est utilisé pour les définitions statiques de fichiers annexes.

\n

Par exemple, la définition statique de notre composant de calendrier pourrait tout aussi bien être réalisée de manière dynamique :

\n
Code
class CalendarWidget(forms.TextInput):\n    @property\n    def media(self):\n        return forms.Media(css={'all': ('pretty.css',)},\n                           js=('animations.js', 'actions.js'))\n
\n

Consultez la section sur les objets Media pour plus de détails sur la manière de construire des valeurs de retour pour les propriétés dynamiques media.

\n
\n
\n

Chemins dans les définitions de fichiers annexesLien vers cette rubrique#

\n

Les chemins utilisés pour définir les fichiers annexes peuvent être relatifs ou absolus. Si un chemin commence par /, http:// ou https://, il sera interprété comme un chemin absolu et laissé tel quel. Tous les autres chemins seront préfixés par la valeur appropriée. Si l’application django.contrib.staticfiles est installée, elle sera utilisée pour servir ces fichiers.

\n

Que l’application django.contrib.staticfiles soit utilisée ou non, les réglages STATIC_URL et STATIC_ROOT sont obligatoires pour produire une page Web complète.

\n

Pour trouver le bon préfixe à utiliser, Django contrôle si le réglage STATIC_URL est différent de None et se rabat sur MEDIA_URL en cas de besoin. Par exemple, si le réglage MEDIA_URL de votre site est 'http://uploads.example.com/' et que STATIC_URL vaut None:

\n
Code
>>> from django import forms\n>>> class CalendarWidget(forms.TextInput):\n...     class Media:\n...         css = {\n...             'all': ('/css/pretty.css',),\n...         }\n...         js = ('animations.js', 'http://othersite.com/actions.js')\n\n>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="/css/pretty.css" type="text/css" media="all" rel="stylesheet">\n<script type="text/javascript" src="http://uploads.example.com/animations.js"></script>\n<script type="text/javascript" src="http://othersite.com/actions.js"></script>\n
\n

Mai si STATIC_URL vaut 'http://static.example.com/':

\n
Code
>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="/css/pretty.css" type="text/css" media="all" rel="stylesheet">\n<script type="text/javascript" src="http://static.example.com/animations.js"></script>\n<script type="text/javascript" src="http://othersite.com/actions.js"></script>\n
\n

Ou si staticfiles est configuré avec le stockage ManifestStaticFilesStorage:

\n
Code
>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="/css/pretty.css" type="text/css" media="all" rel="stylesheet">\n<script type="text/javascript" src="https://static.example.com/animations.27e20196a850.js"></script>\n<script type="text/javascript" src="http://othersite.com/actions.js"></script>\n
\n
\n
\n

Objets MediaLien vers cette rubrique#

\n

Lorsque vous interrogez l’attribut media d’un composant ou d’un formulaire, la valeur renvoyée est un objet forms.Media. Comme nous l’avons déjà vu, la représentation textuelle d’un objet Media contient le code HTML nécessaire pour inclure les fichiers concernés dans le bloc <head> de votre page HTML.

\n

Cependant, les objets Media ont certaines autres propriétés intéressantes.

\n
\n

Sous-ensembles de fichiers annexesLien vers cette rubrique#

\n

Si vous ne souhaitez obtenir que les fichiers d’un type particulier, vous pouvez utiliser l’opérateur d’indice pour filtrer le support qui vous intéresse. Par exemple :

\n
Code
>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet">\n<script type="text/javascript" src="http://static.example.com/animations.js"></script>\n<script type="text/javascript" src="http://static.example.com/actions.js"></script>\n\n>>> print(w.media['css'])\n<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet">\n
\n

Lorsque vous employez l’opérateur d’indice, la valeur renvoyée est un nouvel objet Media, mais qui ne contient que les fichiers qui vous intéressent.

\n
\n
\n

Combinaison d’objets MediaLien vers cette rubrique#

\n

Les objets Media peuvent aussi être fusionnés. Lorsque l’on additionne deux objets Media, l’objet Media résultant contient l’union des fichiers annexes contenus dans les deux objets :

\n
Code
>>> from django import forms\n>>> class CalendarWidget(forms.TextInput):\n...     class Media:\n...         css = {\n...             'all': ('pretty.css',)\n...         }\n...         js = ('animations.js', 'actions.js')\n\n>>> class OtherWidget(forms.TextInput):\n...     class Media:\n...         js = ('whizbang.js',)\n\n>>> w1 = CalendarWidget()\n>>> w2 = OtherWidget()\n>>> print(w1.media + w2.media)\n<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet">\n<script type="text/javascript" src="http://static.example.com/animations.js"></script>\n<script type="text/javascript" src="http://static.example.com/actions.js"></script>\n<script type="text/javascript" src="http://static.example.com/whizbang.js"></script>\n
\n
\n
\n

Ordre des fichiers annexesLien vers cette rubrique#

\n

L’ordre dans lequel les fichiers annexes sont insérés dans le DOM est souvent important. Par exemple, vous pourriez avoir un script dépendant de jQuery. Ainsi, la combinaison d’objets Media tente de conserver l’ordre relatif dans lequel les fichiers annexes sont définis dans chaque classe Media.

\n

Par exemple :

\n
Code
>>> from django import forms\n>>> class CalendarWidget(forms.TextInput):\n...     class Media:\n...         js = ('jQuery.js', 'calendar.js', 'noConflict.js')\n>>> class TimeWidget(forms.TextInput):\n...     class Media:\n...         js = ('jQuery.js', 'time.js', 'noConflict.js')\n>>> w1 = CalendarWidget()\n>>> w2 = TimeWidget()\n>>> print(w1.media + w2.media)\n<script type="text/javascript" src="http://static.example.com/jQuery.js"></script>\n<script type="text/javascript" src="http://static.example.com/calendar.js"></script>\n<script type="text/javascript" src="http://static.example.com/time.js"></script>\n<script type="text/javascript" src="http://static.example.com/noConflict.js"></script>\n
\n

La combinaison d’objets Media ayant des fichiers annexes dans un ordre conflictuel produit un avertissement MediaOrderConflictWarning.

\n
\n
\n
\n

Media pour les formulairesLien vers cette rubrique#

\n

Les composants ne sont pas les seuls objets qui peuvent posséder des définitions media, les formulaires peuvent aussi en définir. Les règles concernant les définitions media des formulaires sont les mêmes que pour les composants : les déclarations peuvent être statiques ou dynamiques ; les règles des chemins et de l’héritage de ces déclarations sont également identiques.

\n

Que vous définissiez une déclaration media ou non, tous les objets Form possèdent une propriété media. La valeur par défaut de cette propriété est le résultat de la fusion de toutes les définitions media de tous les composants du formulaire :

\n
Code
>>> from django import forms\n>>> class ContactForm(forms.Form):\n...     date = DateField(widget=CalendarWidget)\n...     name = CharField(max_length=40, widget=OtherWidget)\n\n>>> f = ContactForm()\n>>> f.media\n<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet">\n<script type="text/javascript" src="http://static.example.com/animations.js"></script>\n<script type="text/javascript" src="http://static.example.com/actions.js"></script>\n<script type="text/javascript" src="http://static.example.com/whizbang.js"></script>\n
\n

Si vous souhaitez associer des fichiers annexes supplémentaires à un formulaire, par exemple des règles CSS pour la mise en forme du formulaire, ajoutez simplement une déclaration Media au formulaire :

\n
Code
>>> class ContactForm(forms.Form):\n...     date = DateField(widget=CalendarWidget)\n...     name = CharField(max_length=40, widget=OtherWidget)\n...\n...     class Media:\n...         css = {\n...             'all': ('layout.css',)\n...         }\n\n>>> f = ContactForm()\n>>> f.media\n<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet">\n<link href="http://static.example.com/layout.css" type="text/css" media="all" rel="stylesheet">\n<script type="text/javascript" src="http://static.example.com/animations.js"></script>\n<script type="text/javascript" src="http://static.example.com/actions.js"></script>\n<script type="text/javascript" src="http://static.example.com/whizbang.js"></script>\n
\n
","rootId":"form-assets-the-media-class","toc":[{"title":"Fichiers annexes définis statiquement","anchor":"assets-as-a-static-definition","children":[{"title":"css","anchor":"css","children":[]},{"title":"js","anchor":"js","children":[]},{"title":"extend","anchor":"extend","children":[]}]},{"title":"Media comme propriété dynamique","anchor":"media-as-a-dynamic-property","children":[]},{"title":"Chemins dans les définitions de fichiers annexes","anchor":"paths-in-asset-definitions","children":[]},{"title":"Objets Media","anchor":"media-objects","children":[{"title":"Sous-ensembles de fichiers annexes","anchor":"subsets-of-assets","children":[]},{"title":"Combinaison d’objets Media","anchor":"combining-media-objects","children":[]},{"title":"Ordre des fichiers annexes","anchor":"order-of-assets","children":[]}]},{"title":"Media pour les formulaires","anchor":"media-on-forms","children":[]}],"breadcrumbs":[{"docname":"topics/index","title":"Utilisation de Django","url":"/fr/2.2/topics/"},{"docname":"topics/forms/index","title":"Utilisation des formulaires","url":"/fr/2.2/topics/forms/"}],"prev":{"docname":"topics/forms/modelforms","title":"Création de formulaires à partir de modèles","url":"/fr/2.2/topics/forms/modelforms/"},"next":{"docname":"topics/templates","title":"Gabarits","url":"/fr/2.2/topics/templates/"},"formats":{"html":"/fr/2.2/topics/forms/media/","markdown":"/fr/2.2/topics/forms/media.md","json":"/fr/2.2/topics/forms/media.json"},"source":"https://github.com/django/django/blob/stable/2.2.x/docs/topics/forms/media.txt","official":"https://docs.djangoproject.com/fr/2.2/topics/forms/media/","inVersions":["6.1","6.0","5.2","5.1","5.0","4.2","4.1","4.0","3.2","3.1","3.0","2.2","2.1","2.0","1.11","1.10","1.9"],"inLocales":["en","zh-hans","fr","ja","id","pt-br","ko","es","el","pl"]}