<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Form Media — Django 1.5.9 documentation</title> <link rel="stylesheet" href="../../_static/default.css" type="text/css" /> <link rel="stylesheet" href="../../_static/pygments.css" type="text/css" /> <script type="text/javascript"> var DOCUMENTATION_OPTIONS = { URL_ROOT: '../../', VERSION: '1.5.9', COLLAPSE_INDEX: false, FILE_SUFFIX: '.html', HAS_SOURCE: true }; </script> <script type="text/javascript" src="../../_static/jquery.js"></script> <script type="text/javascript" src="../../_static/underscore.js"></script> <script type="text/javascript" src="../../_static/doctools.js"></script> <link rel="top" title="Django 1.5.9 documentation" href="../../index.html" /> <link rel="up" title="Working with forms" href="index.html" /> <link rel="next" title="The Django template language" href="../templates.html" /> <link rel="prev" title="Creating forms from models" href="modelforms.html" /> <script type="text/javascript" src="../../templatebuiltins.js"></script> <script type="text/javascript"> (function($) { if (!django_template_builtins) { // templatebuiltins.js missing, do nothing. return; } $(document).ready(function() { // Hyperlink Django template tags and filters var base = "../../ref/templates/builtins.html"; if (base == "#") { // Special case for builtins.html itself base = ""; } // Tags are keywords, class '.k' $("div.highlight\\-html\\+django span.k").each(function(i, elem) { var tagname = $(elem).text(); if ($.inArray(tagname, django_template_builtins.ttags) != -1) { var fragment = tagname.replace(/_/, '-'); $(elem).html("<a href='" + base + "#" + fragment + "'>" + tagname + "</a>"); } }); // Filters are functions, class '.nf' $("div.highlight\\-html\\+django span.nf").each(function(i, elem) { var filtername = $(elem).text(); if ($.inArray(filtername, django_template_builtins.tfilters) != -1) { var fragment = filtername.replace(/_/, '-'); $(elem).html("<a href='" + base + "#" + fragment + "'>" + filtername + "</a>"); } }); }); })(jQuery); </script> </head> <body> <div class="document"> <div id="custom-doc" class="yui-t6"> <div id="hd"> <h1><a href="../../index.html">Django 1.5.9 documentation</a></h1> <div id="global-nav"> <a title="Home page" href="../../index.html">Home</a> | <a title="Table of contents" href="../../contents.html">Table of contents</a> | <a title="Global index" href="../../genindex.html">Index</a> | <a title="Module index" href="../../py-modindex.html">Modules</a> </div> <div class="nav"> « <a href="modelforms.html" title="Creating forms from models">previous</a> | <a href="../index.html" title="Using Django" accesskey="U">up</a> | <a href="../templates.html" title="The Django template language">next</a> »</div> </div> <div id="bd"> <div id="yui-main"> <div class="yui-b"> <div class="yui-g" id="topics-forms-media"> <div class="section" id="s-form-media"> <span id="form-media"></span><h1>Form Media<a class="headerlink" href="#form-media" title="Permalink to this headline">¶</a></h1> <p>Rendering an attractive and easy-to-use Web form requires more than just HTML - it also requires CSS stylesheets, and if you want to use fancy “Web2.0” widgets, you may also need to include some JavaScript on each page. The exact combination of CSS and JavaScript that is required for any given page will depend upon the widgets that are in use on that page.</p> <p>This is where Django media definitions come in. Django allows you to associate different media files with the forms and widgets that require that media. For example, if you want to use a calendar to render DateFields, you can define a custom Calendar widget. This widget can then be associated with the CSS and JavaScript that is required to render the calendar. When the Calendar widget is used on a form, Django is able to identify the CSS and JavaScript files that are required, and provide the list of file names in a form suitable for easy inclusion on your Web page.</p> <div class="admonition-media-and-django-admin admonition"> <p class="first admonition-title">Media and Django Admin</p> <p>The Django Admin application defines a number of customized widgets for calendars, filtered selections, and so on. These widgets define media requirements, and the Django Admin uses the custom widgets in place of the Django defaults. The Admin templates will only include those media files that are required to render the widgets on any given page.</p> <p class="last">If you like the widgets that the Django Admin application uses, feel free to use them in your own application! They’re all stored in <tt class="docutils literal"><span class="pre">django.contrib.admin.widgets</span></tt>.</p> </div> <div class="admonition-which-javascript-toolkit admonition"> <p class="first admonition-title">Which JavaScript toolkit?</p> <p class="last">Many JavaScript toolkits exist, and many of them include widgets (such as calendar widgets) that can be used to enhance your application. Django has deliberately avoided blessing any one JavaScript toolkit. Each toolkit has its own relative strengths and weaknesses - use whichever toolkit suits your requirements. Django is able to integrate with any JavaScript toolkit.</p> </div> <div class="section" id="s-media-as-a-static-definition"> <span id="s-id1"></span><span id="media-as-a-static-definition"></span><span id="id1"></span><h2>Media as a static definition<a class="headerlink" href="#media-as-a-static-definition" title="Permalink to this headline">¶</a></h2> <p>The easiest way to define media is as a static definition. Using this method, the media declaration is an inner class. The properties of the inner class define the media requirements.</p> <p>Here’s a simple example:</p> <div class="highlight-python"><div class="highlight"><pre><span class="k">class</span> <span class="nc">CalendarWidget</span><span class="p">(</span><span class="n">forms</span><span class="o">.</span><span class="n">TextInput</span><span class="p">):</span> <span class="k">class</span> <span class="nc">Media</span><span class="p">:</span> <span class="n">css</span> <span class="o">=</span> <span class="p">{</span> <span class="s">'all'</span><span class="p">:</span> <span class="p">(</span><span class="s">'pretty.css'</span><span class="p">,)</span> <span class="p">}</span> <span class="n">js</span> <span class="o">=</span> <span class="p">(</span><span class="s">'animations.js'</span><span class="p">,</span> <span class="s">'actions.js'</span><span class="p">)</span> </pre></div> </div> <p>This code defines a <tt class="docutils literal"><span class="pre">CalendarWidget</span></tt>, which will be based on <tt class="docutils literal"><span class="pre">TextInput</span></tt>. Every time the CalendarWidget is used on a form, that form will be directed to include the CSS file <tt class="docutils literal"><span class="pre">pretty.css</span></tt>, and the JavaScript files <tt class="docutils literal"><span class="pre">animations.js</span></tt> and <tt class="docutils literal"><span class="pre">actions.js</span></tt>.</p> <p>This static media definition is converted at runtime into a widget property named <tt class="docutils literal"><span class="pre">media</span></tt>. The media for a CalendarWidget instance can be retrieved through this property:</p> <div class="highlight-python"><div class="highlight"><pre><span class="gp">>>> </span><span class="n">w</span> <span class="o">=</span> <span class="n">CalendarWidget</span><span class="p">()</span> <span class="gp">>>> </span><span class="k">print</span><span class="p">(</span><span class="n">w</span><span class="o">.</span><span class="n">media</span><span class="p">)</span> <span class="go"><link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" /></span> <span class="go"><script type="text/javascript" src="http://static.example.com/animations.js"></script></span> <span class="go"><script type="text/javascript" src="http://static.example.com/actions.js"></script></span> </pre></div> </div> <p>Here’s a list of all possible <tt class="docutils literal"><span class="pre">Media</span></tt> options. There are no required options.</p> <div class="section" id="s-css"> <span id="css"></span><h3><tt class="docutils literal"><span class="pre">css</span></tt><a class="headerlink" href="#css" title="Permalink to this headline">¶</a></h3> <p>A dictionary describing the CSS files required for various forms of output media.</p> <p>The values in the dictionary should be a tuple/list of file names. See <a class="reference internal" href="#form-media-paths"><em>the section on media paths</em></a> for details of how to specify paths to media files.</p> <p>The keys in the dictionary are the output media types. These are the same types accepted by CSS files in media declarations: ‘all’, ‘aural’, ‘braille’, ‘embossed’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’ and ‘tv’. If you need to have different stylesheets for different media types, provide a list of CSS files for each output medium. The following example would provide two CSS options – one for the screen, and one for print:</p> <div class="highlight-python"><div class="highlight"><pre><span class="k">class</span> <span class="nc">Media</span><span class="p">:</span> <span class="n">css</span> <span class="o">=</span> <span class="p">{</span> <span class="s">'screen'</span><span class="p">:</span> <span class="p">(</span><span class="s">'pretty.css'</span><span class="p">,),</span> <span class="s">'print'</span><span class="p">:</span> <span class="p">(</span><span class="s">'newspaper.css'</span><span class="p">,)</span> <span class="p">}</span> </pre></div> </div> <p>If a group of CSS files are appropriate for multiple output media types, the dictionary key can be a comma separated list of output media types. In the following example, TV’s and projectors will have the same media requirements:</p> <div class="highlight-python"><div class="highlight"><pre><span class="k">class</span> <span class="nc">Media</span><span class="p">:</span> <span class="n">css</span> <span class="o">=</span> <span class="p">{</span> <span class="s">'screen'</span><span class="p">:</span> <span class="p">(</span><span class="s">'pretty.css'</span><span class="p">,),</span> <span class="s">'tv,projector'</span><span class="p">:</span> <span class="p">(</span><span class="s">'lo_res.css'</span><span class="p">,),</span> <span class="s">'print'</span><span class="p">:</span> <span class="p">(</span><span class="s">'newspaper.css'</span><span class="p">,)</span> <span class="p">}</span> </pre></div> </div> <p>If this last CSS definition were to be rendered, it would become the following HTML:</p> <div class="highlight-python"><pre><link href="http://static.example.com/pretty.css" type="text/css" media="screen" rel="stylesheet" /> <link href="http://static.example.com/lo_res.css" type="text/css" media="tv,projector" rel="stylesheet" /> <link href="http://static.example.com/newspaper.css" type="text/css" media="print" rel="stylesheet" /></pre> </div> </div> <div class="section" id="s-js"> <span id="js"></span><h3><tt class="docutils literal"><span class="pre">js</span></tt><a class="headerlink" href="#js" title="Permalink to this headline">¶</a></h3> <p>A tuple describing the required JavaScript files. See <a class="reference internal" href="#form-media-paths"><em>the section on media paths</em></a> for details of how to specify paths to media files.</p> </div> <div class="section" id="s-extend"> <span id="extend"></span><h3><tt class="docutils literal"><span class="pre">extend</span></tt><a class="headerlink" href="#extend" title="Permalink to this headline">¶</a></h3> <p>A boolean defining inheritance behavior for media declarations.</p> <p>By default, any object using a static media definition will inherit all the media associated with the parent widget. This occurs regardless of how the parent defines its media requirements. For example, if we were to extend our basic Calendar widget from the example above:</p> <div class="highlight-python"><div class="highlight"><pre><span class="gp">>>> </span><span class="k">class</span> <span class="nc">FancyCalendarWidget</span><span class="p">(</span><span class="n">CalendarWidget</span><span class="p">):</span> <span class="gp">... </span> <span class="k">class</span> <span class="nc">Media</span><span class="p">:</span> <span class="gp">... </span> <span class="n">css</span> <span class="o">=</span> <span class="p">{</span> <span class="gp">... </span> <span class="s">'all'</span><span class="p">:</span> <span class="p">(</span><span class="s">'fancy.css'</span><span class="p">,)</span> <span class="gp">... </span> <span class="p">}</span> <span class="gp">... </span> <span class="n">js</span> <span class="o">=</span> <span class="p">(</span><span class="s">'whizbang.js'</span><span class="p">,)</span> <span class="gp">>>> </span><span class="n">w</span> <span class="o">=</span> <span class="n">FancyCalendarWidget</span><span class="p">()</span> <span class="gp">>>> </span><span class="k">print</span><span class="p">(</span><span class="n">w</span><span class="o">.</span><span class="n">media</span><span class="p">)</span> <span class="go"><link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" /></span> <span class="go"><link href="http://static.example.com/fancy.css" type="text/css" media="all" rel="stylesheet" /></span> <span class="go"><script type="text/javascript" src="http://static.example.com/animations.js"></script></span> <span class="go"><script type="text/javascript" src="http://static.example.com/actions.js"></script></span> <span class="go"><script type="text/javascript" src="http://static.example.com/whizbang.js"></script></span> </pre></div> </div> <p>The FancyCalendar widget inherits all the media from it’s parent widget. If you don’t want media to be inherited in this way, add an <tt class="docutils literal"><span class="pre">extend=False</span></tt> declaration to the media declaration:</p> <div class="highlight-python"><div class="highlight"><pre><span class="gp">>>> </span><span class="k">class</span> <span class="nc">FancyCalendarWidget</span><span class="p">(</span><span class="n">CalendarWidget</span><span class="p">):</span> <span class="gp">... </span> <span class="k">class</span> <span class="nc">Media</span><span class="p">:</span> <span class="gp">... </span> <span class="n">extend</span> <span class="o">=</span> <span class="bp">False</span> <span class="gp">... </span> <span class="n">css</span> <span class="o">=</span> <span class="p">{</span> <span class="gp">... </span> <span class="s">'all'</span><span class="p">:</span> <span class="p">(</span><span class="s">'fancy.css'</span><span class="p">,)</span> <span class="gp">... </span> <span class="p">}</span> <span class="gp">... </span> <span class="n">js</span> <span class="o">=</span> <span class="p">(</span><span class="s">'whizbang.js'</span><span class="p">,)</span> <span class="gp">>>> </span><span class="n">w</span> <span class="o">=</span> <span class="n">FancyCalendarWidget</span><span class="p">()</span> <span class="gp">>>> </span><span class="k">print</span><span class="p">(</span><span class="n">w</span><span class="o">.</span><span class="n">media</span><span class="p">)</span> <span class="go"><link href="http://static.example.com/fancy.css" type="text/css" media="all" rel="stylesheet" /></span> <span class="go"><script type="text/javascript" src="http://static.example.com/whizbang.js"></script></span> </pre></div> </div> <p>If you require even more control over media inheritance, define your media using a <a class="reference internal" href="#dynamic-property"><em>dynamic property</em></a>. Dynamic properties give you complete control over which media files are inherited, and which are not.</p> </div> </div> <div class="section" id="s-media-as-a-dynamic-property"> <span id="s-dynamic-property"></span><span id="media-as-a-dynamic-property"></span><span id="dynamic-property"></span><h2>Media as a dynamic property<a class="headerlink" href="#media-as-a-dynamic-property" title="Permalink to this headline">¶</a></h2> <p>If you need to perform some more sophisticated manipulation of media requirements, you can define the media property directly. This is done by defining a widget property that returns an instance of <tt class="docutils literal"><span class="pre">forms.Media</span></tt>. The constructor for <tt class="docutils literal"><span class="pre">forms.Media</span></tt> accepts <tt class="docutils literal"><span class="pre">css</span></tt> and <tt class="docutils literal"><span class="pre">js</span></tt> keyword arguments in the same format as that used in a static media definition.</p> <p>For example, the static media definition for our Calendar Widget could also be defined in a dynamic fashion:</p> <div class="highlight-python"><div class="highlight"><pre><span class="k">class</span> <span class="nc">CalendarWidget</span><span class="p">(</span><span class="n">forms</span><span class="o">.</span><span class="n">TextInput</span><span class="p">):</span> <span class="k">def</span> <span class="nf">_media</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span> <span class="k">return</span> <span class="n">forms</span><span class="o">.</span><span class="n">Media</span><span class="p">(</span><span class="n">css</span><span class="o">=</span><span class="p">{</span><span class="s">'all'</span><span class="p">:</span> <span class="p">(</span><span class="s">'pretty.css'</span><span class="p">,)},</span> <span class="n">js</span><span class="o">=</span><span class="p">(</span><span class="s">'animations.js'</span><span class="p">,</span> <span class="s">'actions.js'</span><span class="p">))</span> <span class="n">media</span> <span class="o">=</span> <span class="nb">property</span><span class="p">(</span><span class="n">_media</span><span class="p">)</span> </pre></div> </div> <p>See the section on <a class="reference internal" href="#media-objects">Media objects</a> for more details on how to construct return values for dynamic media properties.</p> </div> <div class="section" id="s-paths-in-media-definitions"> <span id="s-form-media-paths"></span><span id="paths-in-media-definitions"></span><span id="form-media-paths"></span><h2>Paths in media definitions<a class="headerlink" href="#paths-in-media-definitions" title="Permalink to this headline">¶</a></h2> <p>Paths used to specify media can be either relative or absolute. If a path starts with <tt class="docutils literal"><span class="pre">/</span></tt>, <tt class="docutils literal"><span class="pre">http://</span></tt> or <tt class="docutils literal"><span class="pre">https://</span></tt>, it will be interpreted as an absolute path, and left as-is. All other paths will be prepended with the value of the appropriate prefix.</p> <p>As part of the introduction of the <a class="reference internal" href="../../ref/contrib/staticfiles.html"><em>staticfiles app</em></a> two new settings were added to refer to “static files” (images, CSS, Javascript, etc.) that are needed to render a complete web page: <a class="reference internal" href="../../ref/settings.html#std:setting-STATIC_URL"><tt class="xref std std-setting docutils literal"><span class="pre">STATIC_URL</span></tt></a> and <a class="reference internal" href="../../ref/settings.html#std:setting-STATIC_ROOT"><tt class="xref std std-setting docutils literal"><span class="pre">STATIC_ROOT</span></tt></a>.</p> <p>To find the appropriate prefix to use, Django will check if the <a class="reference internal" href="../../ref/settings.html#std:setting-STATIC_URL"><tt class="xref std std-setting docutils literal"><span class="pre">STATIC_URL</span></tt></a> setting is not <tt class="docutils literal"><span class="pre">None</span></tt> and automatically fall back to using <a class="reference internal" href="../../ref/settings.html#std:setting-MEDIA_URL"><tt class="xref std std-setting docutils literal"><span class="pre">MEDIA_URL</span></tt></a>. For example, if the <a class="reference internal" href="../../ref/settings.html#std:setting-MEDIA_URL"><tt class="xref std std-setting docutils literal"><span class="pre">MEDIA_URL</span></tt></a> for your site was <tt class="docutils literal"><span class="pre">'http://uploads.example.com/'</span></tt> and <a class="reference internal" href="../../ref/settings.html#std:setting-STATIC_URL"><tt class="xref std std-setting docutils literal"><span class="pre">STATIC_URL</span></tt></a> was <tt class="docutils literal"><span class="pre">None</span></tt>:</p> <div class="highlight-python"><div class="highlight"><pre><span class="gp">>>> </span><span class="k">class</span> <span class="nc">CalendarWidget</span><span class="p">(</span><span class="n">forms</span><span class="o">.</span><span class="n">TextInput</span><span class="p">):</span> <span class="gp">... </span> <span class="k">class</span> <span class="nc">Media</span><span class="p">:</span> <span class="gp">... </span> <span class="n">css</span> <span class="o">=</span> <span class="p">{</span> <span class="gp">... </span> <span class="s">'all'</span><span class="p">:</span> <span class="p">(</span><span class="s">'/css/pretty.css'</span><span class="p">,),</span> <span class="gp">... </span> <span class="p">}</span> <span class="gp">... </span> <span class="n">js</span> <span class="o">=</span> <span class="p">(</span><span class="s">'animations.js'</span><span class="p">,</span> <span class="s">'http://othersite.com/actions.js'</span><span class="p">)</span> <span class="gp">>>> </span><span class="n">w</span> <span class="o">=</span> <span class="n">CalendarWidget</span><span class="p">()</span> <span class="gp">>>> </span><span class="k">print</span><span class="p">(</span><span class="n">w</span><span class="o">.</span><span class="n">media</span><span class="p">)</span> <span class="go"><link href="/css/pretty.css" type="text/css" media="all" rel="stylesheet" /></span> <span class="go"><script type="text/javascript" src="http://uploads.example.com/animations.js"></script></span> <span class="go"><script type="text/javascript" src="http://othersite.com/actions.js"></script></span> </pre></div> </div> <p>But if <a class="reference internal" href="../../ref/settings.html#std:setting-STATIC_URL"><tt class="xref std std-setting docutils literal"><span class="pre">STATIC_URL</span></tt></a> is <tt class="docutils literal"><span class="pre">'http://static.example.com/'</span></tt>:</p> <div class="highlight-python"><div class="highlight"><pre><span class="gp">>>> </span><span class="n">w</span> <span class="o">=</span> <span class="n">CalendarWidget</span><span class="p">()</span> <span class="gp">>>> </span><span class="k">print</span><span class="p">(</span><span class="n">w</span><span class="o">.</span><span class="n">media</span><span class="p">)</span> <span class="go"><link href="/css/pretty.css" type="text/css" media="all" rel="stylesheet" /></span> <span class="go"><script type="text/javascript" src="http://static.example.com/animations.js"></script></span> <span class="go"><script type="text/javascript" src="http://othersite.com/actions.js"></script></span> </pre></div> </div> </div> <div class="section" id="s-media-objects"> <span id="media-objects"></span><h2>Media objects<a class="headerlink" href="#media-objects" title="Permalink to this headline">¶</a></h2> <p>When you interrogate the media attribute of a widget or form, the value that is returned is a <tt class="docutils literal"><span class="pre">forms.Media</span></tt> object. As we have already seen, the string representation of a Media object is the HTML required to include media in the <tt class="docutils literal"><span class="pre"><head></span></tt> block of your HTML page.</p> <p>However, Media objects have some other interesting properties.</p> <div class="section" id="s-media-subsets"> <span id="media-subsets"></span><h3>Media subsets<a class="headerlink" href="#media-subsets" title="Permalink to this headline">¶</a></h3> <p>If you only want media of a particular type, you can use the subscript operator to filter out a medium of interest. For example:</p> <div class="highlight-python"><div class="highlight"><pre><span class="gp">>>> </span><span class="n">w</span> <span class="o">=</span> <span class="n">CalendarWidget</span><span class="p">()</span> <span class="gp">>>> </span><span class="k">print</span><span class="p">(</span><span class="n">w</span><span class="o">.</span><span class="n">media</span><span class="p">)</span> <span class="go"><link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" /></span> <span class="go"><script type="text/javascript" src="http://static.example.com/animations.js"></script></span> <span class="go"><script type="text/javascript" src="http://static.example.com/actions.js"></script></span> <span class="gp">>>> </span><span class="k">print</span><span class="p">(</span><span class="n">w</span><span class="o">.</span><span class="n">media</span><span class="p">[</span><span class="s">'css'</span><span class="p">])</span> <span class="go"><link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" /></span> </pre></div> </div> <p>When you use the subscript operator, the value that is returned is a new Media object – but one that only contains the media of interest.</p> </div> <div class="section" id="s-combining-media-objects"> <span id="combining-media-objects"></span><h3>Combining media objects<a class="headerlink" href="#combining-media-objects" title="Permalink to this headline">¶</a></h3> <p>Media objects can also be added together. When two media objects are added, the resulting Media object contains the union of the media from both files:</p> <div class="highlight-python"><div class="highlight"><pre><span class="gp">>>> </span><span class="k">class</span> <span class="nc">CalendarWidget</span><span class="p">(</span><span class="n">forms</span><span class="o">.</span><span class="n">TextInput</span><span class="p">):</span> <span class="gp">... </span> <span class="k">class</span> <span class="nc">Media</span><span class="p">:</span> <span class="gp">... </span> <span class="n">css</span> <span class="o">=</span> <span class="p">{</span> <span class="gp">... </span> <span class="s">'all'</span><span class="p">:</span> <span class="p">(</span><span class="s">'pretty.css'</span><span class="p">,)</span> <span class="gp">... </span> <span class="p">}</span> <span class="gp">... </span> <span class="n">js</span> <span class="o">=</span> <span class="p">(</span><span class="s">'animations.js'</span><span class="p">,</span> <span class="s">'actions.js'</span><span class="p">)</span> <span class="gp">>>> </span><span class="k">class</span> <span class="nc">OtherWidget</span><span class="p">(</span><span class="n">forms</span><span class="o">.</span><span class="n">TextInput</span><span class="p">):</span> <span class="gp">... </span> <span class="k">class</span> <span class="nc">Media</span><span class="p">:</span> <span class="gp">... </span> <span class="n">js</span> <span class="o">=</span> <span class="p">(</span><span class="s">'whizbang.js'</span><span class="p">,)</span> <span class="gp">>>> </span><span class="n">w1</span> <span class="o">=</span> <span class="n">CalendarWidget</span><span class="p">()</span> <span class="gp">>>> </span><span class="n">w2</span> <span class="o">=</span> <span class="n">OtherWidget</span><span class="p">()</span> <span class="gp">>>> </span><span class="k">print</span><span class="p">(</span><span class="n">w1</span><span class="o">.</span><span class="n">media</span> <span class="o">+</span> <span class="n">w2</span><span class="o">.</span><span class="n">media</span><span class="p">)</span> <span class="go"><link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" /></span> <span class="go"><script type="text/javascript" src="http://static.example.com/animations.js"></script></span> <span class="go"><script type="text/javascript" src="http://static.example.com/actions.js"></script></span> <span class="go"><script type="text/javascript" src="http://static.example.com/whizbang.js"></script></span> </pre></div> </div> </div> </div> <div class="section" id="s-media-on-forms"> <span id="media-on-forms"></span><h2>Media on Forms<a class="headerlink" href="#media-on-forms" title="Permalink to this headline">¶</a></h2> <p>Widgets aren’t the only objects that can have media definitions – forms can also define media. The rules for media definitions on forms are the same as the rules for widgets: declarations can be static or dynamic; path and inheritance rules for those declarations are exactly the same.</p> <p>Regardless of whether you define a media declaration, <em>all</em> Form objects have a media property. The default value for this property is the result of adding the media definitions for all widgets that are part of the form:</p> <div class="highlight-python"><div class="highlight"><pre><span class="gp">>>> </span><span class="k">class</span> <span class="nc">ContactForm</span><span class="p">(</span><span class="n">forms</span><span class="o">.</span><span class="n">Form</span><span class="p">):</span> <span class="gp">... </span> <span class="n">date</span> <span class="o">=</span> <span class="n">DateField</span><span class="p">(</span><span class="n">widget</span><span class="o">=</span><span class="n">CalendarWidget</span><span class="p">)</span> <span class="gp">... </span> <span class="n">name</span> <span class="o">=</span> <span class="n">CharField</span><span class="p">(</span><span class="n">max_length</span><span class="o">=</span><span class="mi">40</span><span class="p">,</span> <span class="n">widget</span><span class="o">=</span><span class="n">OtherWidget</span><span class="p">)</span> <span class="gp">>>> </span><span class="n">f</span> <span class="o">=</span> <span class="n">ContactForm</span><span class="p">()</span> <span class="gp">>>> </span><span class="n">f</span><span class="o">.</span><span class="n">media</span> <span class="go"><link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" /></span> <span class="go"><script type="text/javascript" src="http://static.example.com/animations.js"></script></span> <span class="go"><script type="text/javascript" src="http://static.example.com/actions.js"></script></span> <span class="go"><script type="text/javascript" src="http://static.example.com/whizbang.js"></script></span> </pre></div> </div> <p>If you want to associate additional media with a form – for example, CSS for form layout – simply add a media declaration to the form:</p> <div class="highlight-python"><div class="highlight"><pre><span class="gp">>>> </span><span class="k">class</span> <span class="nc">ContactForm</span><span class="p">(</span><span class="n">forms</span><span class="o">.</span><span class="n">Form</span><span class="p">):</span> <span class="gp">... </span> <span class="n">date</span> <span class="o">=</span> <span class="n">DateField</span><span class="p">(</span><span class="n">widget</span><span class="o">=</span><span class="n">CalendarWidget</span><span class="p">)</span> <span class="gp">... </span> <span class="n">name</span> <span class="o">=</span> <span class="n">CharField</span><span class="p">(</span><span class="n">max_length</span><span class="o">=</span><span class="mi">40</span><span class="p">,</span> <span class="n">widget</span><span class="o">=</span><span class="n">OtherWidget</span><span class="p">)</span> <span class="gp">...</span> <span class="gp">... </span> <span class="k">class</span> <span class="nc">Media</span><span class="p">:</span> <span class="gp">... </span> <span class="n">css</span> <span class="o">=</span> <span class="p">{</span> <span class="gp">... </span> <span class="s">'all'</span><span class="p">:</span> <span class="p">(</span><span class="s">'layout.css'</span><span class="p">,)</span> <span class="gp">... </span> <span class="p">}</span> <span class="gp">>>> </span><span class="n">f</span> <span class="o">=</span> <span class="n">ContactForm</span><span class="p">()</span> <span class="gp">>>> </span><span class="n">f</span><span class="o">.</span><span class="n">media</span> <span class="go"><link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" /></span> <span class="go"><link href="http://static.example.com/layout.css" type="text/css" media="all" rel="stylesheet" /></span> <span class="go"><script type="text/javascript" src="http://static.example.com/animations.js"></script></span> <span class="go"><script type="text/javascript" src="http://static.example.com/actions.js"></script></span> <span class="go"><script type="text/javascript" src="http://static.example.com/whizbang.js"></script></span> </pre></div> </div> </div> </div> </div> </div> </div> <div class="yui-b" id="sidebar"> <div class="sphinxsidebar"> <div class="sphinxsidebarwrapper"> <h3><a href="../../contents.html">Table Of Contents</a></h3> <ul> <li><a class="reference internal" href="#">Form Media</a><ul> <li><a class="reference internal" href="#media-as-a-static-definition">Media as a static definition</a><ul> <li><a class="reference internal" href="#css"><tt class="docutils literal"><span class="pre">css</span></tt></a></li> <li><a class="reference internal" href="#js"><tt class="docutils literal"><span class="pre">js</span></tt></a></li> <li><a class="reference internal" href="#extend"><tt class="docutils literal"><span class="pre">extend</span></tt></a></li> </ul> </li> <li><a class="reference internal" href="#media-as-a-dynamic-property">Media as a dynamic property</a></li> <li><a class="reference internal" href="#paths-in-media-definitions">Paths in media definitions</a></li> <li><a class="reference internal" href="#media-objects">Media objects</a><ul> <li><a class="reference internal" href="#media-subsets">Media subsets</a></li> <li><a class="reference internal" href="#combining-media-objects">Combining media objects</a></li> </ul> </li> <li><a class="reference internal" href="#media-on-forms">Media on Forms</a></li> </ul> </li> </ul> <h3>Browse</h3> <ul> <li>Prev: <a href="modelforms.html">Creating forms from models</a></li> <li>Next: <a href="../templates.html">The Django template language</a></li> </ul> <h3>You are here:</h3> <ul> <li> <a href="../../index.html">Django 1.5.9 documentation</a> <ul><li><a href="../index.html">Using Django</a> <ul><li><a href="index.html">Working with forms</a> <ul><li>Form Media</li></ul> </li></ul></li></ul> </li> </ul> <h3>This Page</h3> <ul class="this-page-menu"> <li><a href="../../_sources/topics/forms/media.txt" rel="nofollow">Show Source</a></li> </ul> <div id="searchbox" style="display: none"> <h3>Quick search</h3> <form class="search" action="../../search.html" method="get"> <input type="text" name="q" /> <input type="submit" value="Go" /> <input type="hidden" name="check_keywords" value="yes" /> <input type="hidden" name="area" value="default" /> </form> <p class="searchtip" style="font-size: 90%"> Enter search terms or a module, class or function name. </p> </div> <script type="text/javascript">$('#searchbox').show(0);</script> </div> </div> <h3>Last update:</h3> <p class="topless">Aug 21, 2014</p> </div> </div> <div id="ft"> <div class="nav"> « <a href="modelforms.html" title="Creating forms from models">previous</a> | <a href="../index.html" title="Using Django" accesskey="U">up</a> | <a href="../templates.html" title="The Django template language">next</a> »</div> </div> </div> <div class="clearer"></div> </div> </body> </html>