<!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>Widgets — Django v1.1 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.1',
COLLAPSE_MODINDEX: false,
FILE_SUFFIX: '.html',
HAS_SOURCE: true
};
</script>
<script type="text/javascript" src="../../_static/jquery.js"></script>
<script type="text/javascript" src="../../_static/doctools.js"></script>
<link rel="top" title="Django v1.1 documentation" href="../../index.html" />
<link rel="up" title="Forms" href="index.html" />
<link rel="next" title="Form and field validation" href="validation.html" />
<link rel="prev" title="Form fields" href="fields.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 = "../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 v1.1 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="../../modindex.html">Modules</a>
</div>
<div class="nav">
« <a href="fields.html" title="Form fields">previous</a>
|
<a href="../index.html" title="API Reference" accesskey="U">up</a>
|
<a href="validation.html" title="Form and field validation">next</a> »</div>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-g" id="ref-forms-widgets">
<div class="section" id="s-module-django.forms.widgets">
<span id="s-ref-forms-widgets"></span><span id="module-django.forms.widgets"></span><span id="ref-forms-widgets"></span><h1>Widgets<a class="headerlink" href="#module-django.forms.widgets" title="Permalink to this headline">¶</a></h1>
<p>A widget is Django’s representation of a HTML input element. The widget
handles the rendering of the HTML, and the extraction of data from a GET/POST
dictionary that corresponds to the widget.</p>
<p>Django provides a representation of all the basic HTML widgets, plus some
commonly used groups of widgets:</p>
<dl class="class">
<dt id="django.forms.TextInput">
<em class="property">class </em><tt class="descname">TextInput</tt><a class="headerlink" href="#django.forms.TextInput" title="Permalink to this definition">¶</a></dt>
<dd>Text input: <tt class="docutils literal"><span class="pre"><input</span> <span class="pre">type='text'</span> <span class="pre">...></span></tt></dd></dl>
<dl class="class">
<dt id="django.forms.PasswordInput">
<em class="property">class </em><tt class="descname">PasswordInput</tt><a class="headerlink" href="#django.forms.PasswordInput" title="Permalink to this definition">¶</a></dt>
<dd><p>Password input: <tt class="docutils literal"><span class="pre"><input</span> <span class="pre">type='password'</span> <span class="pre">...></span></tt></p>
<p>Takes one optional argument:</p>
<dl class="attribute">
<dt id="django.forms.PasswordInput.render_value">
<tt class="descname">render_value</tt><a class="headerlink" href="#django.forms.PasswordInput.render_value" title="Permalink to this definition">¶</a></dt>
<dd>Determines whether the widget will have a value filled in when the
form is re-displayed after a validation error (default is <tt class="xref docutils literal"><span class="pre">True</span></tt>).</dd></dl>
</dd></dl>
<dl class="class">
<dt id="django.forms.HiddenInput">
<em class="property">class </em><tt class="descname">HiddenInput</tt><a class="headerlink" href="#django.forms.HiddenInput" title="Permalink to this definition">¶</a></dt>
<dd>Hidden input: <tt class="docutils literal"><span class="pre"><input</span> <span class="pre">type='hidden'</span> <span class="pre">...></span></tt></dd></dl>
<dl class="class">
<dt id="django.forms.MultipleHiddenInput">
<em class="property">class </em><tt class="descname">MultipleHiddenInput</tt><a class="headerlink" href="#django.forms.MultipleHiddenInput" title="Permalink to this definition">¶</a></dt>
<dd>Multiple <tt class="docutils literal"><span class="pre"><input</span> <span class="pre">type='hidden'</span> <span class="pre">...></span></tt> widgets.</dd></dl>
<dl class="class">
<dt id="django.forms.FileInput">
<em class="property">class </em><tt class="descname">FileInput</tt><a class="headerlink" href="#django.forms.FileInput" title="Permalink to this definition">¶</a></dt>
<dd>File upload input: <tt class="docutils literal"><span class="pre"><input</span> <span class="pre">type='file'</span> <span class="pre">...></span></tt></dd></dl>
<dl class="class">
<dt id="django.forms.DateInput">
<em class="property">class </em><tt class="descname">DateInput</tt><a class="headerlink" href="#django.forms.DateInput" title="Permalink to this definition">¶</a></dt>
<dd><div class="versionadded">
<span class="title">New in Django 1.1:</span> <a class="reference external" href="../../releases/1.1.html#releases-1-1"><em>Please, see the release notes</em></a></div>
<p>Date input as a simple text box: <tt class="docutils literal"><span class="pre"><input</span> <span class="pre">type='text'</span> <span class="pre">...></span></tt></p>
<p>Takes one optional argument:</p>
<dl class="attribute">
<dt id="django.forms.DateInput.format">
<tt class="descname">format</tt><a class="headerlink" href="#django.forms.DateInput.format" title="Permalink to this definition">¶</a></dt>
<dd>The format in which this field’s initial value will be displayed.</dd></dl>
<p>If no <tt class="docutils literal"><span class="pre">format</span></tt> argument is provided, the default format is <tt class="docutils literal"><span class="pre">'%Y-%m-%d'</span></tt>.</p>
</dd></dl>
<dl class="class">
<dt id="django.forms.DateTimeInput">
<em class="property">class </em><tt class="descname">DateTimeInput</tt><a class="headerlink" href="#django.forms.DateTimeInput" title="Permalink to this definition">¶</a></dt>
<dd><div class="versionadded">
<span class="title">New in Django 1.0:</span> <a class="reference external" href="../../releases/1.0.html#releases-1-0"><em>Please, see the release notes</em></a></div>
<p>Date/time input as a simple text box: <tt class="docutils literal"><span class="pre"><input</span> <span class="pre">type='text'</span> <span class="pre">...></span></tt></p>
<p>Takes one optional argument:</p>
<dl class="attribute">
<dt id="django.forms.DateTimeInput.format">
<tt class="descname">format</tt><a class="headerlink" href="#django.forms.DateTimeInput.format" title="Permalink to this definition">¶</a></dt>
<dd>The format in which this field’s initial value will be displayed.</dd></dl>
<p>If no <tt class="docutils literal"><span class="pre">format</span></tt> argument is provided, the default format is <tt class="docutils literal"><span class="pre">'%Y-%m-%d</span>
<span class="pre">%H:%M:%S'</span></tt>.</p>
</dd></dl>
<dl class="class">
<dt id="django.forms.TimeInput">
<em class="property">class </em><tt class="descname">TimeInput</tt><a class="headerlink" href="#django.forms.TimeInput" title="Permalink to this definition">¶</a></dt>
<dd><p>Time input as a simple text box: <tt class="docutils literal"><span class="pre"><input</span> <span class="pre">type='text'</span> <span class="pre">...></span></tt></p>
<p>Takes one optional argument:</p>
<dl class="attribute">
<dt id="django.forms.TimeInput.format">
<tt class="descname">format</tt><a class="headerlink" href="#django.forms.TimeInput.format" title="Permalink to this definition">¶</a></dt>
<dd>The format in which this field’s initial value will be displayed.</dd></dl>
<p>If no <tt class="docutils literal"><span class="pre">format</span></tt> argument is provided, the default format is <tt class="docutils literal"><span class="pre">'%H:%M:%S'</span></tt>.</p>
<div class="versionchanged">
<span class="title">Changed in Django 1.1:</span> The <tt class="docutils literal"><span class="pre">format</span></tt> argument was not supported in Django 1.0.</div>
</dd></dl>
<dl class="class">
<dt id="django.forms.Textarea">
<em class="property">class </em><tt class="descname">Textarea</tt><a class="headerlink" href="#django.forms.Textarea" title="Permalink to this definition">¶</a></dt>
<dd>Text area: <tt class="docutils literal"><span class="pre"><textarea>...</textarea></span></tt></dd></dl>
<dl class="class">
<dt id="django.forms.CheckboxInput">
<em class="property">class </em><tt class="descname">CheckboxInput</tt><a class="headerlink" href="#django.forms.CheckboxInput" title="Permalink to this definition">¶</a></dt>
<dd><p>Checkbox: <tt class="docutils literal"><span class="pre"><input</span> <span class="pre">type='checkbox'</span> <span class="pre">...></span></tt></p>
<p>Takes one optional argument:</p>
<dl class="attribute">
<dt id="django.forms.CheckboxInput.check_test">
<tt class="descname">check_test</tt><a class="headerlink" href="#django.forms.CheckboxInput.check_test" title="Permalink to this definition">¶</a></dt>
<dd>A callable that takes the value of the CheckBoxInput
and returns <tt class="xref docutils literal"><span class="pre">True</span></tt> if the checkbox should be checked for
that value.</dd></dl>
</dd></dl>
<dl class="class">
<dt id="django.forms.Select">
<em class="property">class </em><tt class="descname">Select</tt><a class="headerlink" href="#django.forms.Select" title="Permalink to this definition">¶</a></dt>
<dd><p>Select widget: <tt class="docutils literal"><span class="pre"><select><option</span> <span class="pre">...>...</select></span></tt></p>
<p>Requires that your field provides <tt class="xref docutils literal"><span class="pre">choices</span></tt>.</p>
</dd></dl>
<dl class="class">
<dt id="django.forms.NullBooleanSelect">
<em class="property">class </em><tt class="descname">NullBooleanSelect</tt><a class="headerlink" href="#django.forms.NullBooleanSelect" title="Permalink to this definition">¶</a></dt>
<dd>Select widget with options ‘Unknown’, ‘Yes’ and ‘No’</dd></dl>
<dl class="class">
<dt id="django.forms.SelectMultiple">
<em class="property">class </em><tt class="descname">SelectMultiple</tt><a class="headerlink" href="#django.forms.SelectMultiple" title="Permalink to this definition">¶</a></dt>
<dd><p>Select widget allowing multiple selection: <tt class="docutils literal"><span class="pre"><select</span>
<span class="pre">multiple='multiple'>...</select></span></tt></p>
<p>Requires that your field provides <tt class="xref docutils literal"><span class="pre">choices</span></tt>.</p>
</dd></dl>
<dl class="class">
<dt id="django.forms.RadioSelect">
<em class="property">class </em><tt class="descname">RadioSelect</tt><a class="headerlink" href="#django.forms.RadioSelect" title="Permalink to this definition">¶</a></dt>
<dd><p>A list of radio buttons:</p>
<div class="highlight-html"><pre><ul>
<li><input type='radio' ...></li>
...
</ul></pre>
</div>
<p>Requires that your field provides <tt class="xref docutils literal"><span class="pre">choices</span></tt>.</p>
</dd></dl>
<dl class="class">
<dt id="django.forms.CheckboxSelectMultiple">
<em class="property">class </em><tt class="descname">CheckboxSelectMultiple</tt><a class="headerlink" href="#django.forms.CheckboxSelectMultiple" title="Permalink to this definition">¶</a></dt>
<dd><p>A list of checkboxes:</p>
<div class="highlight-html"><pre><ul>
<li><input type='checkbox' ...></li>
...
</ul></pre>
</div>
</dd></dl>
<dl class="class">
<dt id="django.forms.MultiWidget">
<em class="property">class </em><tt class="descname">MultiWidget</tt><a class="headerlink" href="#django.forms.MultiWidget" title="Permalink to this definition">¶</a></dt>
<dd>Wrapper around multiple other widgets</dd></dl>
<dl class="class">
<dt id="django.forms.SplitDateTimeWidget">
<em class="property">class </em><tt class="descname">SplitDateTimeWidget</tt><a class="headerlink" href="#django.forms.SplitDateTimeWidget" title="Permalink to this definition">¶</a></dt>
<dd><p>Wrapper around two widgets: <tt class="docutils literal"><span class="pre">DateInput</span></tt> for the date, and <tt class="docutils literal"><span class="pre">TimeInput</span></tt>
for the time.</p>
<p>Takes two optional arguments, <tt class="docutils literal"><span class="pre">date_format</span></tt> and <tt class="docutils literal"><span class="pre">time_format</span></tt>, which
work just like the <tt class="docutils literal"><span class="pre">format</span></tt> argument for <tt class="docutils literal"><span class="pre">DateInput</span></tt> and <tt class="docutils literal"><span class="pre">TimeInput</span></tt>.</p>
<div class="versionchanged">
<span class="title">Changed in Django 1.1:</span> The <tt class="docutils literal"><span class="pre">date_format</span></tt> and <tt class="docutils literal"><span class="pre">time_format</span></tt> arguments were not supported in Django 1.0.</div>
</dd></dl>
<dl class="class">
<dt id="django.forms.SelectDateWidget">
<em class="property">class </em><tt class="descname">SelectDateWidget</tt><a class="headerlink" href="#django.forms.SelectDateWidget" title="Permalink to this definition">¶</a></dt>
<dd><p>Wrapper around three select widgets: one each for month, day, and year.
Note that this widget lives in a separate file from the standard widgets.</p>
<div class="highlight-python"><div class="highlight"><pre><span class="kn">from</span> <span class="nn">django.forms.extras.widgets</span> <span class="kn">import</span> <span class="n">SelectDateWidget</span>
<span class="n">date</span> <span class="o">=</span> <span class="n">forms</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">SelectDateWidget</span><span class="p">())</span>
</pre></div>
</div>
</dd></dl>
<div class="section" id="s-specifying-widgets">
<span id="specifying-widgets"></span><h2>Specifying widgets<a class="headerlink" href="#specifying-widgets" title="Permalink to this headline">¶</a></h2>
<dl class="attribute">
<dt id="django.forms.Form.widget">
<tt class="descclassname">Form.</tt><tt class="descname">widget</tt><a class="headerlink" href="#django.forms.Form.widget" title="Permalink to this definition">¶</a></dt>
<dd></dd></dl>
<p>Whenever you specify a field on a form, Django will use a default widget
that is appropriate to the type of data that is to be displayed. To find
which widget is used on which field, see the documentation for the
built-in Field classes.</p>
<p>However, if you want to use a different widget for a field, you can -
just use the 'widget' argument on the field definition. For example:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="kn">from</span> <span class="nn">django</span> <span class="kn">import</span> <span class="n">forms</span>
<span class="k">class</span> <span class="nc">CommentForm</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="n">name</span> <span class="o">=</span> <span class="n">forms</span><span class="o">.</span><span class="n">CharField</span><span class="p">()</span>
<span class="n">url</span> <span class="o">=</span> <span class="n">forms</span><span class="o">.</span><span class="n">URLField</span><span class="p">()</span>
<span class="n">comment</span> <span class="o">=</span> <span class="n">forms</span><span class="o">.</span><span class="n">CharField</span><span class="p">(</span><span class="n">widget</span><span class="o">=</span><span class="n">forms</span><span class="o">.</span><span class="n">Textarea</span><span class="p">)</span>
</pre></div>
</div>
<p>This would specify a form with a comment that uses a larger Textarea widget,
rather than the default TextInput widget.</p>
</div>
<div class="section" id="s-customizing-widget-instances">
<span id="customizing-widget-instances"></span><h2>Customizing widget instances<a class="headerlink" href="#customizing-widget-instances" title="Permalink to this headline">¶</a></h2>
<p>When Django renders a widget as HTML, it only renders the bare minimum
HTML - Django doesn't add a class definition, or any other widget-specific
attributes. This means that all 'TextInput' widgets will appear the same
on your web page.</p>
<p>If you want to make one widget look different to another, you need to
specify additional attributes for each widget. When you specify a
widget, you can provide a list of attributes that will be added to the
rendered HTML for the widget.</p>
<p>For example, take the following simple form:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="k">class</span> <span class="nc">CommentForm</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="n">name</span> <span class="o">=</span> <span class="n">forms</span><span class="o">.</span><span class="n">CharField</span><span class="p">()</span>
<span class="n">url</span> <span class="o">=</span> <span class="n">forms</span><span class="o">.</span><span class="n">URLField</span><span class="p">()</span>
<span class="n">comment</span> <span class="o">=</span> <span class="n">forms</span><span class="o">.</span><span class="n">CharField</span><span class="p">()</span>
</pre></div>
</div>
<p>This form will include three default TextInput widgets, with default rendering -
no CSS class, no extra attributes. This means that the input boxes provided for
each widget will be rendered exactly the same:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="gp">>>> </span><span class="n">f</span> <span class="o">=</span> <span class="n">CommentForm</span><span class="p">(</span><span class="n">auto_id</span><span class="o">=</span><span class="bp">False</span><span class="p">)</span>
<span class="gp">>>> </span><span class="n">f</span><span class="o">.</span><span class="n">as_table</span><span class="p">()</span>
<span class="go"><tr><th>Name:</th><td><input type="text" name="name" /></td></tr></span>
<span class="go"><tr><th>Url:</th><td><input type="text" name="url"/></td></tr></span>
<span class="go"><tr><th>Comment:</th><td><input type="text" name="comment" /></td></tr></span>
</pre></div>
</div>
<p>On a real web page, you probably don't want every widget to look the same. You
might want a larger input element for the comment, and you might want the 'name'
widget to have some special CSS class. To do this, you use the <tt class="docutils literal"><span class="pre">attrs</span></tt>
argument when creating the widget:</p>
<dl class="attribute">
<dt id="django.forms.Widget.attrs">
<tt class="descclassname">Widget.</tt><tt class="descname">attrs</tt><a class="headerlink" href="#django.forms.Widget.attrs" title="Permalink to this definition">¶</a></dt>
<dd></dd></dl>
<p>For example:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="k">class</span> <span class="nc">CommentForm</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="n">name</span> <span class="o">=</span> <span class="n">forms</span><span class="o">.</span><span class="n">CharField</span><span class="p">(</span>
<span class="n">widget</span><span class="o">=</span><span class="n">forms</span><span class="o">.</span><span class="n">TextInput</span><span class="p">(</span><span class="n">attrs</span><span class="o">=</span><span class="p">{</span><span class="s">'class'</span><span class="p">:</span><span class="s">'special'</span><span class="p">}))</span>
<span class="n">url</span> <span class="o">=</span> <span class="n">forms</span><span class="o">.</span><span class="n">URLField</span><span class="p">()</span>
<span class="n">comment</span> <span class="o">=</span> <span class="n">forms</span><span class="o">.</span><span class="n">CharField</span><span class="p">(</span>
<span class="n">widget</span><span class="o">=</span><span class="n">forms</span><span class="o">.</span><span class="n">TextInput</span><span class="p">(</span><span class="n">attrs</span><span class="o">=</span><span class="p">{</span><span class="s">'size'</span><span class="p">:</span><span class="s">'40'</span><span class="p">}))</span>
</pre></div>
</div>
<p>Django will then include the extra attributes in the rendered output:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="gp">>>> </span><span class="n">f</span> <span class="o">=</span> <span class="n">CommentForm</span><span class="p">(</span><span class="n">auto_id</span><span class="o">=</span><span class="bp">False</span><span class="p">)</span>
<span class="gp">>>> </span><span class="n">f</span><span class="o">.</span><span class="n">as_table</span><span class="p">()</span>
<span class="go"><tr><th>Name:</th><td><input type="text" name="name" class="special"/></td></tr></span>
<span class="go"><tr><th>Url:</th><td><input type="text" name="url"/></td></tr></span>
<span class="go"><tr><th>Comment:</th><td><input type="text" name="comment" size="40"/></td></tr></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 external" href="#">Widgets</a><ul>
<li><a class="reference external" href="#specifying-widgets">Specifying widgets</a></li>
<li><a class="reference external" href="#customizing-widget-instances">Customizing widget instances</a></li>
</ul>
</li>
</ul>
<h3>Browse</h3>
<ul>
<li>Prev: <a href="fields.html">Form fields</a></li>
<li>Next: <a href="validation.html">Form and field validation</a></li>
</ul>
<h3>You are here:</h3>
<ul>
<li>
<a href="../../index.html">Django v1.1 documentation</a>
<ul><li><a href="../index.html">API Reference</a>
<ul><li><a href="index.html">Forms</a>
<ul><li>Widgets</li></ul>
</li></ul></li></ul>
</li>
</ul>
<h3>This Page</h3>
<ul class="this-page-menu">
<li><a href="../../_sources/ref/forms/widgets.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" size="18" />
<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">Feb 18, 2011</p>
</div>
</div>
<div id="ft">
<div class="nav">
« <a href="fields.html" title="Form fields">previous</a>
|
<a href="../index.html" title="API Reference" accesskey="U">up</a>
|
<a href="validation.html" title="Form and field validation">next</a> »</div>
</div>
</div>
<div class="clearer"></div>
</div>
</body>
</html>
distrib
>
Mandriva
>
current
>
i586
>
media
>
main-updates
>
by-pkgid
>
57efe471f3561e70a829edf1b0e9f507
>
files
>
2323
