{"title":"Formtillgångar (klassen ”Media”)","version":"6.0","locale":"sv","docname":"topics/forms/media","url":"/sv/6.0/topics/forms/media/","canonical":"https://djangodocs.dev/sv/6.0/topics/forms/media/","summary":"För att skapa ett attraktivt och lättanvänt webbformulär krävs mer än bara HTML - det krävs också CSS-stilmallar, och om du vill använda snygga widgetar kan du…","html":"

Formtillgångar (klassen ”Media”)Link to this heading#

\n

För att skapa ett attraktivt och lättanvänt webbformulär krävs mer än bara HTML - det krävs också CSS-stilmallar, och om du vill använda snygga widgetar kan du också behöva inkludera lite JavaScript på varje sida. Den exakta kombinationen av CSS och JavaScript som krävs för en viss sida beror på vilka widgetar som används på den sidan.

\n

Det är här tillgångsdefinitioner kommer in i bilden. Django låter dig associera olika filer - som stilmallar och skript - med de formulär och widgetar som kräver dessa tillgångar. Om du till exempel vill använda en kalender för att rendera DateFields kan du definiera en anpassad Calendar-widget. Denna widget kan sedan associeras med den CSS och JavaScript som krävs för att rendera kalendern. När kalenderwidgeten används i ett formulär kan Django identifiera de CSS- och JavaScript-filer som krävs och tillhandahålla listan med filnamn i ett formulär som är lämpligt att inkludera på din webbsida.

\n\n\n
\n

Tillgångar som en statisk definitionLink to this heading#

\n

Det enklaste sättet att definiera tillgångar är som en statisk definition. Med den här metoden är deklarationen en inre klass av typen Media. Egenskaperna för den inre klassen definierar kraven.

\n

Här är ett exempel:

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

Denna kod definierar en CalendarWidget, som kommer att baseras på TextInput. Varje gång CalendarWidget används i ett formulär kommer formuläret att instrueras att inkludera CSS-filen pretty.css och JavaScript-filerna animations.js och actions.js.

\n

Denna statiska definition omvandlas vid körning till en widgetegenskap med namnet media. Listan över tillgångar för en CalendarWidget-instans kan hämtas via den här egenskapen:

\n
Python console
>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="https://static.example.com/pretty.css" media="all" rel="stylesheet">\n<script src="https://static.example.com/animations.js"></script>\n<script src="https://static.example.com/actions.js"></script>\n
\n

Här är en lista över alla möjliga Media-alternativ. Det finns inga obligatoriska alternativ.

\n
\n

cssLink to this heading#

\n

En ordbok som beskriver de CSS-filer som krävs för olika typer av utdatamedia.

\n

Värdena i ordlistan bör vara en tupel/lista med filnamn. Se avsnittet om sökvägar för information om hur du anger sökvägar till dessa filer.

\n

Nycklarna i ordlistan är mediatyperna för utdata. Dessa är samma typer som accepteras av CSS-filer i mediedeklarationer: ’all’, ’aural’, ’braille’, ’embossed’, ’handheld’, ’print’, ’projection’, ’screen’, ’tty’ och ’tv’. Om du behöver ha olika stilmallar för olika medietyper ska du ange en lista med CSS-filer för varje utdatamedium. Följande exempel skulle ge två CSS-alternativ - ett för skärmen och ett för utskrift:

\n
Code
class Media:\n    css = {\n        "screen": ["pretty.css"],\n        "print": ["newspaper.css"],\n    }\n
\n

Om en grupp CSS-filer är lämpliga för flera olika typer av utdatamedier kan ordboksnyckeln vara en kommaseparerad lista över typerna av utdatamedier. I följande exempel kommer TV-apparater och projektorer att ha samma mediekrav:

\n
Code
class Media:\n    css = {\n        "screen": ["pretty.css"],\n        "tv,projector": ["lo_res.css"],\n        "print": ["newspaper.css"],\n    }\n
\n

Om denna sista CSS-definition skulle renderas skulle den bli följande HTML:

\n
Django template
<link href="https://static.example.com/pretty.css" media="screen" rel="stylesheet">\n<link href="https://static.example.com/lo_res.css" media="tv,projector" rel="stylesheet">\n<link href="https://static.example.com/newspaper.css" media="print" rel="stylesheet">\n
\n
\n
\n

jsLink to this heading#

\n

En tupel som beskriver de JavaScript-filer som krävs. Se avsnittet om sökvägar för information om hur du anger sökvägar till dessa filer.

\n
\n

Script-objektLink to this heading#

\n\n
\n
\nclass Script(src, **attributes)Link to this definition#
\n

Representerar en skriptfil.

\n

Den första parametern, src, är strängsökvägen till skriptfilen. Se avsnittet om sökvägar för mer information om hur du anger sökvägar till dessa filer.

\n

De valfria nyckelordsargumenten, **attributes, är HTML-attribut som ställs in på den återgivna <script>-taggen.

\n

Se Banor som objekt för användningsexempel.

\n
\n\n
\n
\n
\n

förlängaLink to this heading#

\n

En boolean som definierar arvsbeteendet för Media-deklarationer.

\n

Som standard kommer alla objekt som använder en statisk Media-definition att ärva alla tillgångar som är associerade med den överordnade widgeten. Detta sker oavsett hur den överordnade widgeten definierar sina egna krav. Till exempel, om vi skulle utöka vår grundläggande kalenderwidget från exemplet ovan:

\n
Python console
>>> class FancyCalendarWidget(CalendarWidget):\n...     class Media:\n...         css = {\n...             "all": ["fancy.css"],\n...         }\n...         js = ["whizbang.js"]\n...\n\n>>> w = FancyCalendarWidget()\n>>> print(w.media)\n<link href="https://static.example.com/pretty.css" media="all" rel="stylesheet">\n<link href="https://static.example.com/fancy.css" media="all" rel="stylesheet">\n<script src="https://static.example.com/animations.js"></script>\n<script src="https://static.example.com/actions.js"></script>\n<script src="https://static.example.com/whizbang.js"></script>\n
\n

FancyCalendar-widgeten ärver alla tillgångar från sin föräldrawidget. Om du inte vill att Media ska ärvas på detta sätt lägger du till en extend=False-deklaration i Media-deklarationen:

\n
Python console
>>> class FancyCalendarWidget(CalendarWidget):\n...     class Media:\n...         extend = False\n...         css = {\n...             "all": ["fancy.css"],\n...         }\n...         js = ["whizbang.js"]\n...\n\n>>> w = FancyCalendarWidget()\n>>> print(w.media)\n<link href="https://static.example.com/fancy.css" media="all" rel="stylesheet">\n<script src="https://static.example.com/whizbang.js"></script>\n
\n

Om du vill ha ännu mer kontroll över arvet kan du definiera dina tillgångar med hjälp av en dynamisk egenskap. Dynamiska egenskaper ger dig fullständig kontroll över vilka filer som ärvs och vilka som inte ärvs.

\n
\n
\n
\n

Media som en dynamisk egenskapLink to this heading#

\n

If you need to perform some more sophisticated manipulation of asset\nrequirements, you can define the media property directly. This is\ndone by defining a widget property that returns an instance of\nforms.Media. The constructor for forms.Media accepts css\nand js keyword arguments in the same format as that used in a\nstatic media definition.

\n

Till exempel kan den statiska definitionen för vår Calendar Widget också definieras på ett dynamiskt sätt:

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

Se avsnittet om Mediaobjekt för mer information om hur man konstruerar returvärden för dynamiska media-egenskaper.

\n
\n
\n

Vägar i tillgångsdefinitionerLink to this heading#

\n
\n

Banor som strängarLink to this heading#

\n

Strängsökvägar som används för att ange tillgångar kan vara antingen relativa eller absoluta. Om en sökväg börjar med /, http:// eller https:// kommer den att tolkas som en absolut sökväg och lämnas som den är. Alla andra sökvägar kommer att föregås av värdet på lämpligt prefix. Om appen django.contrib.staticfiles är installerad kommer den att användas för att servera tillgångar.

\n

Oavsett om du använder django.contrib.staticfiles eller inte, krävs inställningarna STATIC_URL och STATIC_ROOT för att rendera en komplett webbsida.

\n

För att hitta det lämpliga prefixet att använda kommer Django att kontrollera om inställningen STATIC_URL inte är None och automatiskt falla tillbaka till att använda MEDIA_URL. Till exempel, om MEDIA_URL för din webbplats var 'https://uploads.example.com/' och STATIC_URL var None:

\n
Python console
>>> from django import forms\n>>> class CalendarWidget(forms.TextInput):\n...     class Media:\n...         css = {\n...             "all": ["/css/pretty.css"],\n...         }\n...         js = ["animations.js", "https://othersite.com/actions.js"]\n...\n\n>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="/css/pretty.css" media="all" rel="stylesheet">\n<script src="https://uploads.example.com/animations.js"></script>\n<script src="https://othersite.com/actions.js"></script>\n
\n

Men om STATIC_URL är 'https://static.example.com/':

\n
Python console
>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="/css/pretty.css" media="all" rel="stylesheet">\n<script src="https://static.example.com/animations.js"></script>\n<script src="https://othersite.com/actions.js"></script>\n
\n

Eller om staticfiles konfigureras med hjälp av ManifestStaticFilesStorage:

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

Banor som objektLink to this heading#

\n

Tillgångar kan också vara objektbaserade, med Script. Dessutom tillåter dessa att du skickar anpassade HTML-attribut:

\n
Code
class Media:\n    js = [\n        Script(\n            "https://cdn.example.com/something.min.js",\n            **{\n                "crossorigin": "anonymous",\n                "async": True,\n            },\n        ),\n    ]\n
\n

Om denna Media-definition skulle renderas, skulle den bli följande HTML:

\n
Django template
<script src="https://cdn.example.com/something.min.js"\n        crossorigin="anonymous"\n        async>\n</script>\n
\n\n
\n
\n
\n

Media objektLink to this heading#

\n

När du frågar efter media-attributet för en widget eller ett formulär, returneras ett forms.Media-objekt. Som vi redan har sett är strängrepresentationen av ett Media-objekt den HTML som krävs för att inkludera de relevanta filerna i <head>-blocket på din HTML-sida.

\n

Objekt av typen Media har dock några andra intressanta egenskaper.

\n
\n

Delmängder av tillgångarLink to this heading#

\n

Om du bara vill ha filer av en viss typ kan du använda operatorn subscript för att filtrera ut ett medium av intresse. Till exempel:

\n
Python console
>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="https://static.example.com/pretty.css" media="all" rel="stylesheet">\n<script src="https://static.example.com/animations.js"></script>\n<script src="https://static.example.com/actions.js"></script>\n\n>>> print(w.media["css"])\n<link href="https://static.example.com/pretty.css" media="all" rel="stylesheet">\n
\n

När du använder subscript-operatorn returneras ett nytt Media-objekt - men ett som bara innehåller de medier som är av intresse.

\n
\n
\n

Kombinera Media-objektLink to this heading#

\n

Media-objekt kan också läggas till tillsammans. När två Media-objekt läggs till innehåller det resulterande Media-objektet en sammanslagning av de tillgångar som anges av båda:

\n
Python console
>>> 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\n>>> class OtherWidget(forms.TextInput):\n...     class Media:\n...         js = ["whizbang.js"]\n...\n\n>>> w1 = CalendarWidget()\n>>> w2 = OtherWidget()\n>>> print(w1.media + w2.media)\n<link href="https://static.example.com/pretty.css" media="all" rel="stylesheet">\n<script src="https://static.example.com/animations.js"></script>\n<script src="https://static.example.com/actions.js"></script>\n<script src="https://static.example.com/whizbang.js"></script>\n
\n
\n
\n

Tillgångarnas ordningsföljdLink to this heading#

\n

Den ordning i vilken tillgångar infogas i DOM är ofta viktig. Du kan t.ex. ha ett skript som är beroende av jQuery. Genom att kombinera Media-objekt försöker man därför bevara den relativa ordning i vilken tillgångarna definieras i varje Media-klass.

\n

Till exempel:

\n
Python console
>>> from django import forms\n>>> class CalendarWidget(forms.TextInput):\n...     class Media:\n...         js = ["jQuery.js", "calendar.js", "noConflict.js"]\n...\n>>> class TimeWidget(forms.TextInput):\n...     class Media:\n...         js = ["jQuery.js", "time.js", "noConflict.js"]\n...\n>>> w1 = CalendarWidget()\n>>> w2 = TimeWidget()\n>>> print(w1.media + w2.media)\n<script src="https://static.example.com/jQuery.js"></script>\n<script src="https://static.example.com/calendar.js"></script>\n<script src="https://static.example.com/time.js"></script>\n<script src="https://static.example.com/noConflict.js"></script>\n
\n

Om du kombinerar Media-objekt med tillgångar i en motstridig ordning resulterar det i en MediaOrderConflictWarning.

\n
\n
\n
\n

Media på formulärLink to this heading#

\n

Widgets är inte de enda objekt som kan ha media-definitioner - även formulär kan definiera media. Reglerna för media-definitioner på formulär är desamma som för widgets: deklarationer kan vara statiska eller dynamiska; sökvägs- och arvsreglerna för dessa deklarationer är exakt desamma.

\n

Oavsett om du definierar en media-deklaration har alla formulärobjekt en media-egenskap. Standardvärdet för den här egenskapen är resultatet av att lägga till media-definitionerna för alla widgetar som ingår i formuläret:

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

Om du vill koppla ytterligare tillgångar till ett formulär, t.ex. CSS för formulärlayout, kan du lägga till en Media-deklaration i formuläret:

\n
Python console
>>> class ContactForm(forms.Form):\n...     date = DateField(widget=CalendarWidget)\n...     name = CharField(max_length=40, widget=OtherWidget)\n...     class Media:\n...         css = {\n...             "all": ["layout.css"],\n...         }\n...\n\n>>> f = ContactForm()\n>>> f.media\n<link href="https://static.example.com/pretty.css" media="all" rel="stylesheet">\n<link href="https://static.example.com/layout.css" media="all" rel="stylesheet">\n<script src="https://static.example.com/animations.js"></script>\n<script src="https://static.example.com/actions.js"></script>\n<script src="https://static.example.com/whizbang.js"></script>\n
\n
","rootId":"form-assets-the-media-class","toc":[{"title":"Tillgångar som en statisk definition","anchor":"assets-as-a-static-definition","children":[{"title":"css","anchor":"css","children":[]},{"title":"js","anchor":"js","children":[{"title":"Script-objekt","anchor":"script-objects","children":[]}]},{"title":"förlänga","anchor":"extend","children":[]}]},{"title":"Media som en dynamisk egenskap","anchor":"media-as-a-dynamic-property","children":[]},{"title":"Vägar i tillgångsdefinitioner","anchor":"paths-in-asset-definitions","children":[{"title":"Banor som strängar","anchor":"paths-as-strings","children":[]},{"title":"Banor som objekt","anchor":"paths-as-objects","children":[]}]},{"title":"Media objekt","anchor":"media-objects","children":[{"title":"Delmängder av tillgångar","anchor":"subsets-of-assets","children":[]},{"title":"Kombinera Media-objekt","anchor":"combining-media-objects","children":[]},{"title":"Tillgångarnas ordningsföljd","anchor":"order-of-assets","children":[]}]},{"title":"Media på formulär","anchor":"media-on-forms","children":[]}],"breadcrumbs":[{"docname":"topics/index","title":"Använda Django","url":"/sv/6.0/topics/"},{"docname":"topics/forms/index","title":"Arbeta med formulär","url":"/sv/6.0/topics/forms/"}],"prev":{"docname":"topics/forms/modelforms","title":"Skapa formulär från modeller","url":"/sv/6.0/topics/forms/modelforms/"},"next":{"docname":"topics/templates","title":"Mallar","url":"/sv/6.0/topics/templates/"},"formats":{"html":"/sv/6.0/topics/forms/media/","markdown":"/sv/6.0/topics/forms/media.md","json":"/sv/6.0/topics/forms/media.json"},"source":"https://github.com/django/django/blob/stable/6.0.x/docs/topics/forms/media.txt","official":"https://docs.djangoproject.com/sv/6.0/topics/forms/media/","inVersions":["6.1","6.0","5.2"],"inLocales":["en","sv","zh-hans","ga","fr","ja","id","it","pt-br","ko","es","el","pl"]}