{"title":"ウィジェット","version":"4.0","locale":"ja","docname":"ref/forms/widgets","url":"/ja/4.0/ref/forms/widgets/","canonical":"https://djangodocs.dev/ja/4.0/ref/forms/widgets/","summary":"ウィジェットは、Django が HTML の input 要素の表現方法です。ウィジェットは、HTML のレンダリングをコントロールして、ウィジェットに合致する GET/POST…","html":"<span id=\"widgets\"></span><h1>ウィジェット<a class=\"heading-anchor\" href=\"#module-django.forms.widgets\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h1>\n<p>ウィジェットは、Django が HTML の input 要素の表現方法です。ウィジェットは、HTML のレンダリングをコントロールして、ウィジェットに合致する GET/POST ディクショナリからデータを取り出します。</p>\n<p>Built-in widgets によって作られる HTML は、<code class=\"docutils literal notranslate\">&lt;!DOCTYPE html&gt;</code> を対象とした HTML5 シンタックスを使います。例えば、XHTML スタイルである <code class=\"docutils literal notranslate\">checked='checked'</code> よりも、<code class=\"docutils literal notranslate\">checked</code> といった boolean 属性を使います。</p>\n<aside class=\"admonition admonition-tip\" role=\"note\">\n<p class=\"admonition-title\">Tip</p>\n<p>ウィジェットを <a class=\"reference internal\" href=\"/ja/4.0/ref/forms/fields/\"><span class=\"doc\">form fields</span></a> と混同しないでください。フォームフィールドは入力値の検証ロジックを扱い、テンプレート内で直接使用されます。ウィジェットはウェブページ上で input 要素から HTML の form をレンダリングし、submit された生データを取り出します。ウィジェットはフォームフィールドにアサイン (<a class=\"reference internal\" href=\"#widget-to-field\"><span class=\"std std-ref\">assigned</span></a>) される必要があります。</p>\n</aside>\n<section id=\"specifying-widgets\">\n<span id=\"widget-to-field\"></span><h2>ウィジェットを指定する<a class=\"heading-anchor\" href=\"#specifying-widgets\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h2>\n<p>フォーム上でフィールドを指定したときは、Django は描画されるデータのタイプに適したデフォルトのウィジェットを使用します。各フィールドで使われるウィジェットを調べるためには、 <a class=\"reference internal\" href=\"/ja/4.0/ref/forms/fields/#built-in-fields\"><span class=\"std std-ref\">ビルトインの Field クラス</span></a> をご覧ください。</p>\n<p>However, if you want to use a different widget for a field, you can\nuse the <a class=\"reference internal\" href=\"/ja/4.0/ref/forms/fields/#django.forms.Field.widget\" title=\"django.forms.Field.widget\"><code class=\"xref py py-attr docutils literal notranslate\">widget</code></a> argument on the field definition. For example:</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code><span class=\"kn\">from</span> <span class=\"nn\">django</span> <span class=\"kn\">import</span> forms\n\n<span class=\"k\">class</span> <span class=\"nc\">CommentForm</span><span class=\"p\">(</span>forms<span class=\"o\">.</span>Form<span class=\"p\">):</span>\n    name <span class=\"o\">=</span> forms<span class=\"o\">.</span>CharField<span class=\"p\">()</span>\n    url <span class=\"o\">=</span> forms<span class=\"o\">.</span>URLField<span class=\"p\">()</span>\n    comment <span class=\"o\">=</span> forms<span class=\"o\">.</span>CharField<span class=\"p\">(</span>widget<span class=\"o\">=</span>forms<span class=\"o\">.</span>Textarea<span class=\"p\">)</span>\n</code></pre></div>\n<p>これは、comment のフォームに対して、デフォルトの <a class=\"reference internal\" href=\"#django.forms.TextInput\" title=\"django.forms.TextInput\"><code class=\"xref py py-class docutils literal notranslate\">TextInput</code></a> ウィジェットではなく、より大きなサイズの <a class=\"reference internal\" href=\"#django.forms.Textarea\" title=\"django.forms.Textarea\"><code class=\"xref py py-class docutils literal notranslate\">Textarea</code></a> ウィジェットを指定しています。</p>\n</section>\n<section id=\"setting-arguments-for-widgets\">\n<h2>ウィジェットの引数を設定する<a class=\"heading-anchor\" href=\"#setting-arguments-for-widgets\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h2>\n<p>多くのウィジェットは、省略可能な追加の引数を持っています; これらは、フィールド上でウィジェットを定義する際にセットできます。以下の例では、<a class=\"reference internal\" href=\"#django.forms.SelectDateWidget\" title=\"django.forms.SelectDateWidget\"><code class=\"xref py py-class docutils literal notranslate\">SelectDateWidget</code></a> に対して <a class=\"reference internal\" href=\"#django.forms.SelectDateWidget.years\" title=\"django.forms.SelectDateWidget.years\"><code class=\"xref py py-attr docutils literal notranslate\">years</code></a> 属性がセットされます:</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code><span class=\"kn\">from</span> <span class=\"nn\">django</span> <span class=\"kn\">import</span> forms\n\nBIRTH_YEAR_CHOICES <span class=\"o\">=</span> <span class=\"p\">[</span><span class=\"s1\">&#39;1980&#39;</span><span class=\"p\">,</span> <span class=\"s1\">&#39;1981&#39;</span><span class=\"p\">,</span> <span class=\"s1\">&#39;1982&#39;</span><span class=\"p\">]</span>\nFAVORITE_COLORS_CHOICES <span class=\"o\">=</span> <span class=\"p\">[</span>\n    <span class=\"p\">(</span><span class=\"s1\">&#39;blue&#39;</span><span class=\"p\">,</span> <span class=\"s1\">&#39;Blue&#39;</span><span class=\"p\">),</span>\n    <span class=\"p\">(</span><span class=\"s1\">&#39;green&#39;</span><span class=\"p\">,</span> <span class=\"s1\">&#39;Green&#39;</span><span class=\"p\">),</span>\n    <span class=\"p\">(</span><span class=\"s1\">&#39;black&#39;</span><span class=\"p\">,</span> <span class=\"s1\">&#39;Black&#39;</span><span class=\"p\">),</span>\n<span class=\"p\">]</span>\n\n<span class=\"k\">class</span> <span class=\"nc\">SimpleForm</span><span class=\"p\">(</span>forms<span class=\"o\">.</span>Form<span class=\"p\">):</span>\n    birth_year <span class=\"o\">=</span> forms<span class=\"o\">.</span>DateField<span class=\"p\">(</span>widget<span class=\"o\">=</span>forms<span class=\"o\">.</span>SelectDateWidget<span class=\"p\">(</span>years<span class=\"o\">=</span>BIRTH_YEAR_CHOICES<span class=\"p\">))</span>\n    favorite_colors <span class=\"o\">=</span> forms<span class=\"o\">.</span>MultipleChoiceField<span class=\"p\">(</span>\n        required<span class=\"o\">=</span><span class=\"kc\">False</span><span class=\"p\">,</span>\n        widget<span class=\"o\">=</span>forms<span class=\"o\">.</span>CheckboxSelectMultiple<span class=\"p\">,</span>\n        choices<span class=\"o\">=</span>FAVORITE_COLORS_CHOICES<span class=\"p\">,</span>\n    <span class=\"p\">)</span>\n</code></pre></div>\n<p>使用可能なウィジェットとそれぞれの引数の詳細については、<a class=\"reference internal\" href=\"#built-in-widgets\"><span class=\"std std-ref\">ビルトインのウィジェット</span></a> をご覧ください。</p>\n</section>\n<section id=\"widgets-inheriting-from-the-select-widget\">\n<h2><code class=\"docutils literal notranslate\">Select</code> ウィジェットを継承したウィジェット<a class=\"heading-anchor\" href=\"#widgets-inheriting-from-the-select-widget\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h2>\n<p><a class=\"reference internal\" href=\"#django.forms.Select\" title=\"django.forms.Select\"><code class=\"xref py py-class docutils literal notranslate\">Select</code></a> ウィジェットを継承したウィジェットは、選択肢を扱います。これらはユーザーに選択肢のリストを提示します。提示される選択肢はウィジェットによって異なります; <a class=\"reference internal\" href=\"#django.forms.Select\" title=\"django.forms.Select\"><code class=\"xref py py-class docutils literal notranslate\">Select</code></a> ウィジェット自体は、<code class=\"docutils literal notranslate\">&lt;select&gt;</code> HTML のリスト表現を使い、一方で <a class=\"reference internal\" href=\"#django.forms.RadioSelect\" title=\"django.forms.RadioSelect\"><code class=\"xref py py-class docutils literal notranslate\">RadioSelect</code></a> はラジオボタンを使います。</p>\n<p><a class=\"reference internal\" href=\"#django.forms.Select\" title=\"django.forms.Select\"><code class=\"xref py py-class docutils literal notranslate\">Select</code></a> ウィジェットは、 <a class=\"reference internal\" href=\"/ja/4.0/ref/forms/fields/#django.forms.ChoiceField\" title=\"django.forms.ChoiceField\"><code class=\"xref py py-class docutils literal notranslate\">ChoiceField</code></a> フィールド上でデフォルトで使われます。ウィジェットに表示される選択肢は <a class=\"reference internal\" href=\"/ja/4.0/ref/forms/fields/#django.forms.ChoiceField\" title=\"django.forms.ChoiceField\"><code class=\"xref py py-class docutils literal notranslate\">ChoiceField</code></a> から継承され、 <a class=\"reference internal\" href=\"/ja/4.0/ref/forms/fields/#django.forms.ChoiceField.choices\" title=\"django.forms.ChoiceField.choices\"><code class=\"xref py py-attr docutils literal notranslate\">ChoiceField.choices</code></a> を変更すると <a class=\"reference internal\" href=\"#django.forms.Select.choices\" title=\"django.forms.Select.choices\"><code class=\"xref py py-attr docutils literal notranslate\">Select.choices</code></a> が更新されます。たとえば:</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code><span class=\"gp\">&gt;&gt;&gt; </span><span class=\"kn\">from</span> <span class=\"nn\">django</span> <span class=\"kn\">import</span> forms\n<span class=\"gp\">&gt;&gt;&gt; </span>CHOICES <span class=\"o\">=</span> <span class=\"p\">[(</span><span class=\"s1\">&#39;1&#39;</span><span class=\"p\">,</span> <span class=\"s1\">&#39;First&#39;</span><span class=\"p\">),</span> <span class=\"p\">(</span><span class=\"s1\">&#39;2&#39;</span><span class=\"p\">,</span> <span class=\"s1\">&#39;Second&#39;</span><span class=\"p\">)]</span>\n<span class=\"gp\">&gt;&gt;&gt; </span>choice_field <span class=\"o\">=</span> forms<span class=\"o\">.</span>ChoiceField<span class=\"p\">(</span>widget<span class=\"o\">=</span>forms<span class=\"o\">.</span>RadioSelect<span class=\"p\">,</span> choices<span class=\"o\">=</span>CHOICES<span class=\"p\">)</span>\n<span class=\"gp\">&gt;&gt;&gt; </span>choice_field<span class=\"o\">.</span>choices\n<span class=\"go\">[(&#39;1&#39;, &#39;First&#39;), (&#39;2&#39;, &#39;Second&#39;)]</span>\n<span class=\"gp\">&gt;&gt;&gt; </span>choice_field<span class=\"o\">.</span>widget<span class=\"o\">.</span>choices\n<span class=\"go\">[(&#39;1&#39;, &#39;First&#39;), (&#39;2&#39;, &#39;Second&#39;)]</span>\n<span class=\"gp\">&gt;&gt;&gt; </span>choice_field<span class=\"o\">.</span>widget<span class=\"o\">.</span>choices <span class=\"o\">=</span> <span class=\"p\">[]</span>\n<span class=\"gp\">&gt;&gt;&gt; </span>choice_field<span class=\"o\">.</span>choices <span class=\"o\">=</span> <span class=\"p\">[(</span><span class=\"s1\">&#39;1&#39;</span><span class=\"p\">,</span> <span class=\"s1\">&#39;First and only&#39;</span><span class=\"p\">)]</span>\n<span class=\"gp\">&gt;&gt;&gt; </span>choice_field<span class=\"o\">.</span>widget<span class=\"o\">.</span>choices\n<span class=\"go\">[(&#39;1&#39;, &#39;First and only&#39;)]</span>\n</code></pre></div>\n<p>とは言うものの、<a class=\"reference internal\" href=\"#django.forms.Select.choices\" title=\"django.forms.Select.choices\"><code class=\"xref py py-attr docutils literal notranslate\">choices</code></a> 属性を提供するウィジェットは、選択肢に基づかないフィールド -- 例えば <a class=\"reference internal\" href=\"/ja/4.0/ref/forms/fields/#django.forms.CharField\" title=\"django.forms.CharField\"><code class=\"xref py py-class docutils literal notranslate\">CharField</code></a>  -- とともに使うことができますが、選択肢がモデルに継承され、単に表示されるだけのウィジェットではないときには、<a class=\"reference internal\" href=\"/ja/4.0/ref/forms/fields/#django.forms.ChoiceField\" title=\"django.forms.ChoiceField\"><code class=\"xref py py-class docutils literal notranslate\">ChoiceField</code></a> に基づいたフィールドを使うことをお勧めします。</p>\n</section>\n<section id=\"customizing-widget-instances\">\n<h2>ウィジェットのインスタンスをカスタマイズする<a class=\"heading-anchor\" href=\"#customizing-widget-instances\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h2>\n<p>When Django renders a widget as HTML, it only renders very minimal markup -\nDjango doesn't add class names, or any other widget-specific attributes. This\nmeans, for example, that all <a class=\"reference internal\" href=\"#django.forms.TextInput\" title=\"django.forms.TextInput\"><code class=\"xref py py-class docutils literal notranslate\">TextInput</code></a> widgets will appear the same\non your web pages.</p>\n<p>ウィジェットをカスタマイズする方法には 2 つあります: <a class=\"reference internal\" href=\"#styling-widget-instances\"><span class=\"std std-ref\">ウィジェットごとのインスタンス</span></a> と <a class=\"reference internal\" href=\"#styling-widget-classes\"><span class=\"std std-ref\">ウィジェットごとのクラス</span></a> です。</p>\n<section id=\"styling-widget-instances\">\n<span id=\"id1\"></span><h3>ウィジェットのインスタンスにスタイルを設定する<a class=\"heading-anchor\" href=\"#styling-widget-instances\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h3>\n<p>1 つのウィジェットのインスタンスを他と異なる見た目にしたい場合、ウィジェットのオブジェクトをインスタンス化してフォームフィールドに割り当てるタイミングで、追加の属性を指定する必要があります (そしておそらく、あなたの CSS ファイルにいくつか記述を追加する必要もあります)。</p>\n<p>For example, take the following form:</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code><span class=\"kn\">from</span> <span class=\"nn\">django</span> <span class=\"kn\">import</span> forms\n\n<span class=\"k\">class</span> <span class=\"nc\">CommentForm</span><span class=\"p\">(</span>forms<span class=\"o\">.</span>Form<span class=\"p\">):</span>\n    name <span class=\"o\">=</span> forms<span class=\"o\">.</span>CharField<span class=\"p\">()</span>\n    url <span class=\"o\">=</span> forms<span class=\"o\">.</span>URLField<span class=\"p\">()</span>\n    comment <span class=\"o\">=</span> forms<span class=\"o\">.</span>CharField<span class=\"p\">()</span>\n</code></pre></div>\n<p>このフォームは、デフォルトのレンダリングとともに、3 つのデフォルトの <a class=\"reference internal\" href=\"#django.forms.TextInput\" title=\"django.forms.TextInput\"><code class=\"xref py py-class docutils literal notranslate\">TextInput</code></a> ウィジェットを含みます -- CSS のクラスも追加の属性もありません。これは、それぞれのウィジェットに対して提供された input ボックスが、以下とまったく同じくレンダリングされることを意味します。</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code><span class=\"gp\">&gt;&gt;&gt; </span>f <span class=\"o\">=</span> CommentForm<span class=\"p\">(</span>auto_id<span class=\"o\">=</span><span class=\"kc\">False</span><span class=\"p\">)</span>\n<span class=\"gp\">&gt;&gt;&gt; </span>f<span class=\"o\">.</span>as_table<span class=\"p\">()</span>\n<span class=\"go\">&lt;tr&gt;&lt;th&gt;Name:&lt;/th&gt;&lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;name&quot; required&gt;&lt;/td&gt;&lt;/tr&gt;</span>\n<span class=\"go\">&lt;tr&gt;&lt;th&gt;Url:&lt;/th&gt;&lt;td&gt;&lt;input type=&quot;url&quot; name=&quot;url&quot; required&gt;&lt;/td&gt;&lt;/tr&gt;</span>\n<span class=\"go\">&lt;tr&gt;&lt;th&gt;Comment:&lt;/th&gt;&lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;comment&quot; required&gt;&lt;/td&gt;&lt;/tr&gt;</span>\n</code></pre></div>\n<p>On a real web page, you probably don't want every widget to look the same. You\nmight want a larger input element for the comment, and you might want the\n'name' widget to have some special CSS class. It is also possible to specify\nthe 'type' attribute to take advantage of the new HTML5 input types.  To do\nthis, you use the <a class=\"reference internal\" href=\"#django.forms.Widget.attrs\" title=\"django.forms.Widget.attrs\"><code class=\"xref py py-attr docutils literal notranslate\">Widget.attrs</code></a> argument when creating the widget:</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code><span class=\"k\">class</span> <span class=\"nc\">CommentForm</span><span class=\"p\">(</span>forms<span class=\"o\">.</span>Form<span class=\"p\">):</span>\n    name <span class=\"o\">=</span> forms<span class=\"o\">.</span>CharField<span class=\"p\">(</span>widget<span class=\"o\">=</span>forms<span class=\"o\">.</span>TextInput<span class=\"p\">(</span>attrs<span class=\"o\">=</span><span class=\"p\">{</span><span class=\"s1\">&#39;class&#39;</span><span class=\"p\">:</span> <span class=\"s1\">&#39;special&#39;</span><span class=\"p\">}))</span>\n    url <span class=\"o\">=</span> forms<span class=\"o\">.</span>URLField<span class=\"p\">()</span>\n    comment <span class=\"o\">=</span> forms<span class=\"o\">.</span>CharField<span class=\"p\">(</span>widget<span class=\"o\">=</span>forms<span class=\"o\">.</span>TextInput<span class=\"p\">(</span>attrs<span class=\"o\">=</span><span class=\"p\">{</span><span class=\"s1\">&#39;size&#39;</span><span class=\"p\">:</span> <span class=\"s1\">&#39;40&#39;</span><span class=\"p\">}))</span>\n</code></pre></div>\n<p>You can also modify a widget in the form definition:</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code><span class=\"k\">class</span> <span class=\"nc\">CommentForm</span><span class=\"p\">(</span>forms<span class=\"o\">.</span>Form<span class=\"p\">):</span>\n    name <span class=\"o\">=</span> forms<span class=\"o\">.</span>CharField<span class=\"p\">()</span>\n    url <span class=\"o\">=</span> forms<span class=\"o\">.</span>URLField<span class=\"p\">()</span>\n    comment <span class=\"o\">=</span> forms<span class=\"o\">.</span>CharField<span class=\"p\">()</span>\n\n    name<span class=\"o\">.</span>widget<span class=\"o\">.</span>attrs<span class=\"o\">.</span>update<span class=\"p\">({</span><span class=\"s1\">&#39;class&#39;</span><span class=\"p\">:</span> <span class=\"s1\">&#39;special&#39;</span><span class=\"p\">})</span>\n    comment<span class=\"o\">.</span>widget<span class=\"o\">.</span>attrs<span class=\"o\">.</span>update<span class=\"p\">(</span>size<span class=\"o\">=</span><span class=\"s1\">&#39;40&#39;</span><span class=\"p\">)</span>\n</code></pre></div>\n<p>Or if the field isn't declared directly on the form (such as model form fields),\nyou can use the <a class=\"reference internal\" href=\"/ja/4.0/ref/forms/api/#django.forms.Form.fields\" title=\"django.forms.Form.fields\"><code class=\"xref py py-attr docutils literal notranslate\">Form.fields</code></a> attribute:</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code><span class=\"k\">class</span> <span class=\"nc\">CommentForm</span><span class=\"p\">(</span>forms<span class=\"o\">.</span>ModelForm<span class=\"p\">):</span>\n    <span class=\"k\">def</span> <span class=\"fm\">__init__</span><span class=\"p\">(</span><span class=\"bp\">self</span><span class=\"p\">,</span> <span class=\"o\">*</span>args<span class=\"p\">,</span> <span class=\"o\">**</span>kwargs<span class=\"p\">):</span>\n        <span class=\"nb\">super</span><span class=\"p\">()</span><span class=\"o\">.</span><span class=\"fm\">__init__</span><span class=\"p\">(</span><span class=\"o\">*</span>args<span class=\"p\">,</span> <span class=\"o\">**</span>kwargs<span class=\"p\">)</span>\n        <span class=\"bp\">self</span><span class=\"o\">.</span>fields<span class=\"p\">[</span><span class=\"s1\">&#39;name&#39;</span><span class=\"p\">]</span><span class=\"o\">.</span>widget<span class=\"o\">.</span>attrs<span class=\"o\">.</span>update<span class=\"p\">({</span><span class=\"s1\">&#39;class&#39;</span><span class=\"p\">:</span> <span class=\"s1\">&#39;special&#39;</span><span class=\"p\">})</span>\n        <span class=\"bp\">self</span><span class=\"o\">.</span>fields<span class=\"p\">[</span><span class=\"s1\">&#39;comment&#39;</span><span class=\"p\">]</span><span class=\"o\">.</span>widget<span class=\"o\">.</span>attrs<span class=\"o\">.</span>update<span class=\"p\">(</span>size<span class=\"o\">=</span><span class=\"s1\">&#39;40&#39;</span><span class=\"p\">)</span>\n</code></pre></div>\n<p>Django はこれで、レンダリングされたアウトプットに、追加的な要素を含むようになります:</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code><span class=\"gp\">&gt;&gt;&gt; </span>f <span class=\"o\">=</span> CommentForm<span class=\"p\">(</span>auto_id<span class=\"o\">=</span><span class=\"kc\">False</span><span class=\"p\">)</span>\n<span class=\"gp\">&gt;&gt;&gt; </span>f<span class=\"o\">.</span>as_table<span class=\"p\">()</span>\n<span class=\"go\">&lt;tr&gt;&lt;th&gt;Name:&lt;/th&gt;&lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;name&quot; class=&quot;special&quot; required&gt;&lt;/td&gt;&lt;/tr&gt;</span>\n<span class=\"go\">&lt;tr&gt;&lt;th&gt;Url:&lt;/th&gt;&lt;td&gt;&lt;input type=&quot;url&quot; name=&quot;url&quot; required&gt;&lt;/td&gt;&lt;/tr&gt;</span>\n<span class=\"go\">&lt;tr&gt;&lt;th&gt;Comment:&lt;/th&gt;&lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;comment&quot; size=&quot;40&quot; required&gt;&lt;/td&gt;&lt;/tr&gt;</span>\n</code></pre></div>\n<p><a class=\"reference internal\" href=\"#django.forms.Widget.attrs\" title=\"django.forms.Widget.attrs\"><code class=\"xref py py-attr docutils literal notranslate\">attrs</code></a> を使った HTML の <code class=\"docutils literal notranslate\">id</code> をセットすることもできます。<a class=\"reference internal\" href=\"/ja/4.0/ref/forms/api/#django.forms.BoundField.id_for_label\" title=\"django.forms.BoundField.id_for_label\"><code class=\"xref py py-attr docutils literal notranslate\">BoundField.id_for_label</code></a> で例をご覧ください。</p>\n</section>\n<section id=\"styling-widget-classes\">\n<span id=\"id2\"></span><h3>ウィジェットのクラスにスタイルを設定する<a class=\"heading-anchor\" href=\"#styling-widget-classes\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h3>\n<p>ウィジェットとともに、アセット (<code class=\"docutils literal notranslate\">css</code> や <code class=\"docutils literal notranslate\">javascript</code>) 、およびより詳細にカスタマイズされた見た目や動作を追加することができます。</p>\n<p>要するに、ウィジェットをサブクラス化して、 <a class=\"reference internal\" href=\"/ja/4.0/topics/forms/media/#assets-as-a-static-definition\"><span class=\"std std-ref\">&quot;Media&quot; 内部クラスの定義</span></a> か <a class=\"reference internal\" href=\"/ja/4.0/topics/forms/media/#dynamic-property\"><span class=\"std std-ref\">&quot;media&quot; プロパティの作成</span></a> のどちらかをする必要があります。</p>\n<p>これらのメソッドにはやや高度なPythonプログラミングが含まれており、トピックガイド <a class=\"reference internal\" href=\"/ja/4.0/topics/forms/media/\"><span class=\"doc\">Form Assets</span></a> で詳しく説明しています。</p>\n</section>\n</section>\n<section id=\"base-widget-classes\">\n<span id=\"id3\"></span><h2>ウィジェットの base クラス<a class=\"heading-anchor\" href=\"#base-widget-classes\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h2>\n<p><a class=\"reference internal\" href=\"#django.forms.Widget\" title=\"django.forms.Widget\"><code class=\"xref py py-class docutils literal notranslate\">Widget</code></a> や <a class=\"reference internal\" href=\"#django.forms.MultiWidget\" title=\"django.forms.MultiWidget\"><code class=\"xref py py-class docutils literal notranslate\">MultiWidget</code></a> といった基本ウィジェットは、<a class=\"reference internal\" href=\"#built-in-widgets\"><span class=\"std std-ref\">ビルトインのウィジェット</span></a> によってサブクラス化され、カスタムウィジェットのための基礎となります。</p>\n<section id=\"widget\">\n<h3><code class=\"docutils literal notranslate\">ウィジェット</code><a class=\"heading-anchor\" href=\"#widget\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h3>\n<dl class=\"py class\">\n<dt class=\"sig sig-object py\" id=\"django.forms.Widget\">\n<em class=\"property\"><span class=\"k\">class</span> </em><span class=\"sig-name descname\">Widget</span><span class=\"sig-paren\">(</span><em class=\"sig-param\">attrs<span class=\"o\">=</span><span class=\"default_value\">None</span></em><span class=\"sig-paren\">)</span><a class=\"heading-anchor\" href=\"#django.forms.Widget\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p>この抽象クラスはレンダリングできませんが、基本的な属性 <a class=\"reference internal\" href=\"#django.forms.Widget.attrs\" title=\"django.forms.Widget.attrs\"><code class=\"xref py py-attr docutils literal notranslate\">attrs</code></a> を提供します。カスタムウィジェット上で <a class=\"reference internal\" href=\"#django.forms.Widget.render\" title=\"django.forms.Widget.render\"><code class=\"xref py py-meth docutils literal notranslate\">render()</code></a> を実行するかオーバーライドできます。</p>\n<dl class=\"py attribute\">\n<dt class=\"sig sig-object py\" id=\"django.forms.Widget.attrs\">\n<span class=\"sig-name descname\">attrs</span><a class=\"heading-anchor\" href=\"#django.forms.Widget.attrs\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p>ディクショナリは、レンダリングされたウィジェット上にセットされる HTML の属性を含んでいます。</p>\n<div class=\"code-block\" data-language=\"pycon\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Python console</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Python console code\"><code><span class=\"gp\">&gt;&gt;&gt; </span><span class=\"kn\">from</span> <span class=\"nn\">django</span> <span class=\"kn\">import</span> forms\n<span class=\"gp\">&gt;&gt;&gt; </span>name <span class=\"o\">=</span> forms<span class=\"o\">.</span>TextInput<span class=\"p\">(</span>attrs<span class=\"o\">=</span><span class=\"p\">{</span><span class=\"s1\">&#39;size&#39;</span><span class=\"p\">:</span> <span class=\"mi\">10</span><span class=\"p\">,</span> <span class=\"s1\">&#39;title&#39;</span><span class=\"p\">:</span> <span class=\"s1\">&#39;Your name&#39;</span><span class=\"p\">})</span>\n<span class=\"gp\">&gt;&gt;&gt; </span>name<span class=\"o\">.</span>render<span class=\"p\">(</span><span class=\"s1\">&#39;name&#39;</span><span class=\"p\">,</span> <span class=\"s1\">&#39;A name&#39;</span><span class=\"p\">)</span>\n<span class=\"go\">&#39;&lt;input title=&quot;Your name&quot; type=&quot;text&quot; name=&quot;name&quot; value=&quot;A name&quot; size=&quot;10&quot;&gt;&#39;</span>\n</code></pre></div>\n<p><code class=\"docutils literal notranslate\">True</code> か <code class=\"docutils literal notranslate\">False</code> の値を割り当てた場合は、HTML5 の ブール属性としてレンダリングされます。</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code><span class=\"gp\">&gt;&gt;&gt; </span>name <span class=\"o\">=</span> forms<span class=\"o\">.</span>TextInput<span class=\"p\">(</span>attrs<span class=\"o\">=</span><span class=\"p\">{</span><span class=\"s1\">&#39;required&#39;</span><span class=\"p\">:</span> <span class=\"kc\">True</span><span class=\"p\">})</span>\n<span class=\"gp\">&gt;&gt;&gt; </span>name<span class=\"o\">.</span>render<span class=\"p\">(</span><span class=\"s1\">&#39;name&#39;</span><span class=\"p\">,</span> <span class=\"s1\">&#39;A name&#39;</span><span class=\"p\">)</span>\n<span class=\"go\">&#39;&lt;input name=&quot;name&quot; type=&quot;text&quot; value=&quot;A name&quot; required&gt;&#39;</span>\n<span class=\"gp\">&gt;&gt;&gt;</span>\n<span class=\"gp\">&gt;&gt;&gt; </span>name <span class=\"o\">=</span> forms<span class=\"o\">.</span>TextInput<span class=\"p\">(</span>attrs<span class=\"o\">=</span><span class=\"p\">{</span><span class=\"s1\">&#39;required&#39;</span><span class=\"p\">:</span> <span class=\"kc\">False</span><span class=\"p\">})</span>\n<span class=\"gp\">&gt;&gt;&gt; </span>name<span class=\"o\">.</span>render<span class=\"p\">(</span><span class=\"s1\">&#39;name&#39;</span><span class=\"p\">,</span> <span class=\"s1\">&#39;A name&#39;</span><span class=\"p\">)</span>\n<span class=\"go\">&#39;&lt;input name=&quot;name&quot; type=&quot;text&quot; value=&quot;A name&quot;&gt;&#39;</span>\n</code></pre></div>\n</dd></dl>\n\n<dl class=\"py attribute\">\n<dt class=\"sig sig-object py\" id=\"django.forms.Widget.supports_microseconds\">\n<span class=\"sig-name descname\">supports_microseconds</span><a class=\"heading-anchor\" href=\"#django.forms.Widget.supports_microseconds\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p><code class=\"docutils literal notranslate\">True</code> をデフォルト値にする属性です。<code class=\"docutils literal notranslate\">False</code> にセットされた場合は、<a class=\"reference external\" href=\"https://docs.python.org/3/library/datetime.html#datetime.datetime\" title=\"(in Python v3.14)\"><code class=\"xref py py-class docutils literal notranslate\">datetime</code></a> と <a class=\"reference external\" href=\"https://docs.python.org/3/library/datetime.html#datetime.time\" title=\"(in Python v3.14)\"><code class=\"xref py py-class docutils literal notranslate\">time</code></a> のマイクロ秒の部分の値は、<code class=\"docutils literal notranslate\">0</code> にセットされます。</p>\n</dd></dl>\n\n<dl class=\"py method\">\n<dt class=\"sig sig-object py\" id=\"django.forms.Widget.format_value\">\n<span class=\"sig-name descname\">format_value</span><span class=\"sig-paren\">(</span><em class=\"sig-param\">value</em><span class=\"sig-paren\">)</span><a class=\"heading-anchor\" href=\"#django.forms.Widget.format_value\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p>ウィジェットのテンプレートで使うための値を整えて返します。<code class=\"docutils literal notranslate\">value</code> は入力値が検証されるとは限りません。そのため、サブクラスの実行は防衛的にプログラムされなければなりません。</p>\n</dd></dl>\n\n<dl class=\"py method\">\n<dt class=\"sig sig-object py\" id=\"django.forms.Widget.get_context\">\n<span class=\"sig-name descname\">get_context</span><span class=\"sig-paren\">(</span><em class=\"sig-param\">name</em>, <em class=\"sig-param\">value</em>, <em class=\"sig-param\">attrs</em><span class=\"sig-paren\">)</span><a class=\"heading-anchor\" href=\"#django.forms.Widget.get_context\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p>Returns a dictionary of values to use when rendering the widget\ntemplate. By default, the dictionary contains a single key,\n<code class=\"docutils literal notranslate\">'widget'</code>, which is a dictionary representation of the widget\ncontaining the following keys:</p>\n<ul class=\"simple\">\n<li><p><code class=\"docutils literal notranslate\">'name'</code>: The name of the field from the <code class=\"docutils literal notranslate\">name</code> argument.</p></li>\n<li><p><code class=\"docutils literal notranslate\">'is_hidden'</code>: A boolean indicating whether or not this widget is\nhidden.</p></li>\n<li><p><code class=\"docutils literal notranslate\">'required'</code>: A boolean indicating whether or not the field for\nthis widget is required.</p></li>\n<li><p><code class=\"docutils literal notranslate\">'value'</code>: The value as returned by <a class=\"reference internal\" href=\"#django.forms.Widget.format_value\" title=\"django.forms.Widget.format_value\"><code class=\"xref py py-meth docutils literal notranslate\">format_value()</code></a>.</p></li>\n<li><p><code class=\"docutils literal notranslate\">'attrs'</code>: HTML attributes to be set on the rendered widget. The\ncombination of the <a class=\"reference internal\" href=\"#django.forms.Widget.attrs\" title=\"django.forms.Widget.attrs\"><code class=\"xref py py-attr docutils literal notranslate\">attrs</code></a> attribute and the <code class=\"docutils literal notranslate\">attrs</code> argument.</p></li>\n<li><p><code class=\"docutils literal notranslate\">'template_name'</code>: The value of <code class=\"docutils literal notranslate\">self.template_name</code>.</p></li>\n</ul>\n<p><code class=\"docutils literal notranslate\">Widget</code> subclasses can provide custom context values by overriding\nthis method.</p>\n</dd></dl>\n\n<dl class=\"py method\">\n<dt class=\"sig sig-object py\" id=\"django.forms.Widget.id_for_label\">\n<span class=\"sig-name descname\">id_for_label</span><span class=\"sig-paren\">(</span><em class=\"sig-param\">id_</em><span class=\"sig-paren\">)</span><a class=\"heading-anchor\" href=\"#django.forms.Widget.id_for_label\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p>このウィジェットのフィールドの ID が付与された <code class=\"docutils literal notranslate\">&lt;label&gt;</code> で使われるための HTML の ID 属性を返します。 IDが有効でない場合は <code class=\"docutils literal notranslate\">None</code> を返します。</p>\n<p>いくつかのウィジェットは複数の HTML 要素、そして、複数の ID を持っているため、このフックが必要です。この場合、このメソッドは、ウィジェットのタグの最初の ID と一致する ID 値を返す必要があります。</p>\n</dd></dl>\n\n<dl class=\"py method\">\n<dt class=\"sig sig-object py\" id=\"django.forms.Widget.render\">\n<span class=\"sig-name descname\">render</span><span class=\"sig-paren\">(</span><em class=\"sig-param\">name</em>, <em class=\"sig-param\">value</em>, <em class=\"sig-param\">attrs<span class=\"o\">=</span><span class=\"default_value\">None</span></em>, <em class=\"sig-param\">renderer<span class=\"o\">=</span><span class=\"default_value\">None</span></em><span class=\"sig-paren\">)</span><a class=\"heading-anchor\" href=\"#django.forms.Widget.render\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p>Renders a widget to HTML using the given renderer. If <code class=\"docutils literal notranslate\">renderer</code> is\n<code class=\"docutils literal notranslate\">None</code>, the renderer from the <a class=\"reference internal\" href=\"/ja/4.0/ref/settings/#std-setting-FORM_RENDERER\"><code class=\"xref std std-setting docutils literal notranslate\">FORM_RENDERER</code></a> setting is\nused.</p>\n</dd></dl>\n\n<dl class=\"py method\">\n<dt class=\"sig sig-object py\" id=\"django.forms.Widget.value_from_datadict\">\n<span class=\"sig-name descname\">value_from_datadict</span><span class=\"sig-paren\">(</span><em class=\"sig-param\">data</em>, <em class=\"sig-param\">files</em>, <em class=\"sig-param\">name</em><span class=\"sig-paren\">)</span><a class=\"heading-anchor\" href=\"#django.forms.Widget.value_from_datadict\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p>データとこのウィジェットの名前のディクショナリが与えられ、このウィジェットの値を返します。<code class=\"docutils literal notranslate\">files</code> には <a class=\"reference internal\" href=\"/ja/4.0/ref/request-response/#django.http.HttpRequest.FILES\" title=\"django.http.HttpRequest.FILES\"><code class=\"xref py py-attr docutils literal notranslate\">request.FILES</code></a> からのデータが含まれている可能性があります。値が指定されなかった場合は <code class=\"docutils literal notranslate\">None</code> を返します。 また、<code class=\"docutils literal notranslate\">value_from_datadict</code> はフォームデータの処理中に複数回呼び出される可能性があるので、カスタマイズして複雑な処理を追加する場合は、自分でキャッシュの仕組みを実装する必要があります。</p>\n</dd></dl>\n\n<dl class=\"py method\">\n<dt class=\"sig sig-object py\" id=\"django.forms.Widget.value_omitted_from_data\">\n<span class=\"sig-name descname\">value_omitted_from_data</span><span class=\"sig-paren\">(</span><em class=\"sig-param\">data</em>, <em class=\"sig-param\">files</em>, <em class=\"sig-param\">name</em><span class=\"sig-paren\">)</span><a class=\"heading-anchor\" href=\"#django.forms.Widget.value_omitted_from_data\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p><code class=\"docutils literal notranslate\">data</code> と <code class=\"docutils literal notranslate\">files</code> のディクショナリとこのウィジェットの名前が与えられ、ウィジェットのためのデータやファイルが存在するかを返します。</p>\n<p>メソッドの結果は、モデルフォームのフィールドが <a class=\"reference internal\" href=\"/ja/4.0/topics/forms/modelforms/#topics-modelform-save\"><span class=\"std std-ref\">デフォルトに逆戻りする</span></a> かどうかに影響します。</p>\n<p>Special cases are <a class=\"reference internal\" href=\"#django.forms.CheckboxInput\" title=\"django.forms.CheckboxInput\"><code class=\"xref py py-class docutils literal notranslate\">CheckboxInput</code></a>,\n<a class=\"reference internal\" href=\"#django.forms.CheckboxSelectMultiple\" title=\"django.forms.CheckboxSelectMultiple\"><code class=\"xref py py-class docutils literal notranslate\">CheckboxSelectMultiple</code></a>, and\n<a class=\"reference internal\" href=\"#django.forms.SelectMultiple\" title=\"django.forms.SelectMultiple\"><code class=\"xref py py-class docutils literal notranslate\">SelectMultiple</code></a>, which always return\n<code class=\"docutils literal notranslate\">False</code> because an unchecked checkbox and unselected\n<code class=\"docutils literal notranslate\">&lt;select multiple&gt;</code> don't appear in the data of an HTML form\nsubmission, so it's unknown whether or not the user submitted a value.</p>\n</dd></dl>\n\n<dl class=\"py method\">\n<dt class=\"sig sig-object py\" id=\"django.forms.Widget.use_required_attribute\">\n<span class=\"sig-name descname\">use_required_attribute</span><span class=\"sig-paren\">(</span><em class=\"sig-param\">initial</em><span class=\"sig-paren\">)</span><a class=\"heading-anchor\" href=\"#django.forms.Widget.use_required_attribute\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p>フォームフィールドの <code class=\"docutils literal notranslate\">初期の</code> 値が与えられ、ウィジェットが <code class=\"docutils literal notranslate\">必要な</code> HTML 属性とともにレンダリングできるかどうかを返します。フォームは、各フィールドに <code class=\"docutils literal notranslate\">必要な</code> 属性を描画するかどうかを決定するために、<a class=\"reference internal\" href=\"/ja/4.0/ref/forms/fields/#django.forms.Field.required\" title=\"django.forms.Field.required\"><code class=\"xref py py-attr docutils literal notranslate\">Field.required</code></a> と <a class=\"reference internal\" href=\"/ja/4.0/ref/forms/api/#django.forms.Form.use_required_attribute\" title=\"django.forms.Form.use_required_attribute\"><code class=\"xref py py-attr docutils literal notranslate\">Form.use_required_attribute</code></a> とともにこのメソッドを使います。</p>\n<p>By default, returns <code class=\"docutils literal notranslate\">False</code> for hidden widgets and <code class=\"docutils literal notranslate\">True</code>\notherwise. Special cases are <a class=\"reference internal\" href=\"#django.forms.FileInput\" title=\"django.forms.FileInput\"><code class=\"xref py py-class docutils literal notranslate\">FileInput</code></a> and\n<a class=\"reference internal\" href=\"#django.forms.ClearableFileInput\" title=\"django.forms.ClearableFileInput\"><code class=\"xref py py-class docutils literal notranslate\">ClearableFileInput</code></a>, which return <code class=\"docutils literal notranslate\">False</code> when\n<code class=\"docutils literal notranslate\">initial</code> is set, and <a class=\"reference internal\" href=\"#django.forms.CheckboxSelectMultiple\" title=\"django.forms.CheckboxSelectMultiple\"><code class=\"xref py py-class docutils literal notranslate\">CheckboxSelectMultiple</code></a>,\nwhich always returns <code class=\"docutils literal notranslate\">False</code> because browser validation would require\nall checkboxes to be checked instead of at least one.</p>\n<p>ブラウザの検証と互換性のないカスタムウィジェットでは、このメソッドをオーバーライドしてください。例えば、ある非表示の <code class=\"docutils literal notranslate\">textarea</code> 要素が背後にある WSYSIWG テキストエディタのウィジェットは、ブラウザが非表示のフィールドを検証するのを避けるため、常に <code class=\"docutils literal notranslate\">False</code> を返したがるかもしれません。</p>\n</dd></dl>\n\n</dd></dl>\n\n</section>\n<section id=\"multiwidget\">\n<h3><code class=\"docutils literal notranslate\">MultiWidget</code><a class=\"heading-anchor\" href=\"#multiwidget\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h3>\n<dl class=\"py class\">\n<dt class=\"sig sig-object py\" id=\"django.forms.MultiWidget\">\n<em class=\"property\"><span class=\"k\">class</span> </em><span class=\"sig-name descname\">MultiWidget</span><span class=\"sig-paren\">(</span><em class=\"sig-param\">widgets</em>, <em class=\"sig-param\">attrs<span class=\"o\">=</span><span class=\"default_value\">None</span></em><span class=\"sig-paren\">)</span><a class=\"heading-anchor\" href=\"#django.forms.MultiWidget\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p>複数のウィジェットで構成されたウィジェットです。<a class=\"reference internal\" href=\"#django.forms.MultiWidget\" title=\"django.forms.MultiWidget\"><code class=\"xref py py-class docutils literal notranslate\">MultiWidget</code></a> は <a class=\"reference internal\" href=\"/ja/4.0/ref/forms/fields/#django.forms.MultiValueField\" title=\"django.forms.MultiValueField\"><code class=\"xref py py-class docutils literal notranslate\">MultiValueField</code></a> と協調して動作します。</p>\n<p><a class=\"reference internal\" href=\"#django.forms.MultiWidget\" title=\"django.forms.MultiWidget\"><code class=\"xref py py-class docutils literal notranslate\">MultiWidget</code></a> には 1 つの必要な引数があります。</p>\n<dl class=\"py attribute\">\n<dt class=\"sig sig-object py\" id=\"django.forms.MultiWidget.widgets\">\n<span class=\"sig-name descname\">widgets</span><a class=\"heading-anchor\" href=\"#django.forms.MultiWidget.widgets\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p>An iterable containing the widgets needed. For example:</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code><span class=\"gp\">&gt;&gt;&gt; </span><span class=\"kn\">from</span> <span class=\"nn\">django.forms</span> <span class=\"kn\">import</span> MultiWidget<span class=\"p\">,</span> TextInput\n<span class=\"gp\">&gt;&gt;&gt; </span>widget <span class=\"o\">=</span> MultiWidget<span class=\"p\">(</span>widgets<span class=\"o\">=</span><span class=\"p\">[</span>TextInput<span class=\"p\">,</span> TextInput<span class=\"p\">])</span>\n<span class=\"gp\">&gt;&gt;&gt; </span>widget<span class=\"o\">.</span>render<span class=\"p\">(</span><span class=\"s1\">&#39;name&#39;</span><span class=\"p\">,</span> <span class=\"p\">[</span><span class=\"s1\">&#39;john&#39;</span><span class=\"p\">,</span> <span class=\"s1\">&#39;paul&#39;</span><span class=\"p\">])</span>\n<span class=\"go\">&#39;&lt;input type=&quot;text&quot; name=&quot;name_0&quot; value=&quot;john&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;name_1&quot; value=&quot;paul&quot;&gt;&#39;</span>\n</code></pre></div>\n<p>You may provide a dictionary in order to specify custom suffixes for\nthe <code class=\"docutils literal notranslate\">name</code> attribute on each subwidget. In this case, for each\n<code class=\"docutils literal notranslate\">(key, widget)</code> pair, the key will be appended to the <code class=\"docutils literal notranslate\">name</code> of the\nwidget in order to generate the attribute value. You may provide the\nempty string (<code class=\"docutils literal notranslate\">''</code>) for a single key, in order to suppress the suffix\nfor one widget. For example:</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code><span class=\"gp\">&gt;&gt;&gt; </span>widget <span class=\"o\">=</span> MultiWidget<span class=\"p\">(</span>widgets<span class=\"o\">=</span><span class=\"p\">{</span><span class=\"s1\">&#39;&#39;</span><span class=\"p\">:</span> TextInput<span class=\"p\">,</span> <span class=\"s1\">&#39;last&#39;</span><span class=\"p\">:</span> TextInput<span class=\"p\">})</span>\n<span class=\"gp\">&gt;&gt;&gt; </span>widget<span class=\"o\">.</span>render<span class=\"p\">(</span><span class=\"s1\">&#39;name&#39;</span><span class=\"p\">,</span> <span class=\"p\">[</span><span class=\"s1\">&#39;john&#39;</span><span class=\"p\">,</span> <span class=\"s1\">&#39;paul&#39;</span><span class=\"p\">])</span>\n<span class=\"go\">&#39;&lt;input type=&quot;text&quot; name=&quot;name&quot; value=&quot;john&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;name_last&quot; value=&quot;paul&quot;&gt;&#39;</span>\n</code></pre></div>\n</dd></dl>\n\n<p>それと、1 つの必要なメソッドです:</p>\n<dl class=\"py method\">\n<dt class=\"sig sig-object py\" id=\"django.forms.MultiWidget.decompress\">\n<span class=\"sig-name descname\">decompress</span><span class=\"sig-paren\">(</span><em class=\"sig-param\">value</em><span class=\"sig-paren\">)</span><a class=\"heading-anchor\" href=\"#django.forms.MultiWidget.decompress\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p>このメソッドは、フィールドから単一の &quot;圧縮された&quot; 値を取り、&quot;解凍された&quot; 値のリストを返します。入力された値は検証済みと見なせますが、空 (empty)でないとは限りません。</p>\n<p>このメソッドは、サブクラスによって <strong>実行される必要があり</strong>、値が空 (empty) かもしれないので、処理は防衛的である必要があります。</p>\n<p>&quot;解凍&quot; の裏にある根本的な原理は、フォームのフィールドから各ウィジェットの値に、結合された値を &quot;分割する&quot; 必要があることです。</p>\n<p>以下は、<a class=\"reference internal\" href=\"#django.forms.SplitDateTimeWidget\" title=\"django.forms.SplitDateTimeWidget\"><code class=\"xref py py-class docutils literal notranslate\">SplitDateTimeWidget</code></a> が どのように <a class=\"reference internal\" href=\"#django.forms.SplitDateTimeWidget\" title=\"django.forms.SplitDateTimeWidget\"><code class=\"xref py py-class docutils literal notranslate\">SplitDateTimeWidget</code></a> の値を 2 つの分割された値に日付や時刻とともにリストに入れるかの例です:</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code><span class=\"kn\">from</span> <span class=\"nn\">django.forms</span> <span class=\"kn\">import</span> MultiWidget\n\n<span class=\"k\">class</span> <span class=\"nc\">SplitDateTimeWidget</span><span class=\"p\">(</span>MultiWidget<span class=\"p\">):</span>\n\n    <span class=\"c1\"># ...</span>\n\n    <span class=\"k\">def</span> <span class=\"nf\">decompress</span><span class=\"p\">(</span><span class=\"bp\">self</span><span class=\"p\">,</span> value<span class=\"p\">):</span>\n        <span class=\"k\">if</span> value<span class=\"p\">:</span>\n            <span class=\"k\">return</span> <span class=\"p\">[</span>value<span class=\"o\">.</span>date<span class=\"p\">(),</span> value<span class=\"o\">.</span>time<span class=\"p\">()]</span>\n        <span class=\"k\">return</span> <span class=\"p\">[</span><span class=\"kc\">None</span><span class=\"p\">,</span> <span class=\"kc\">None</span><span class=\"p\">]</span>\n</code></pre></div>\n<aside class=\"admonition admonition-tip\" role=\"note\">\n<p class=\"admonition-title\">Tip</p>\n<p><a class=\"reference internal\" href=\"/ja/4.0/ref/forms/fields/#django.forms.MultiValueField\" title=\"django.forms.MultiValueField\"><code class=\"xref py py-class docutils literal notranslate\">MultiValueField</code></a> が、正反対の責務 - 全メンバーフィールドの整えられた値を 1 つにまとめること - を持つ補完メソッド <a class=\"reference internal\" href=\"/ja/4.0/ref/forms/fields/#django.forms.MultiValueField.compress\" title=\"django.forms.MultiValueField.compress\"><code class=\"xref py py-meth docutils literal notranslate\">compress()</code></a> を持っていることを覚えておいてください。</p>\n</aside>\n</dd></dl>\n\n<p>It provides some custom context:</p>\n<dl class=\"py method\">\n<dt class=\"sig sig-object py\" id=\"django.forms.MultiWidget.get_context\">\n<span class=\"sig-name descname\">get_context</span><span class=\"sig-paren\">(</span><em class=\"sig-param\">name</em>, <em class=\"sig-param\">value</em>, <em class=\"sig-param\">attrs</em><span class=\"sig-paren\">)</span><a class=\"heading-anchor\" href=\"#django.forms.MultiWidget.get_context\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p>In addition to the <code class=\"docutils literal notranslate\">'widget'</code> key described in\n<a class=\"reference internal\" href=\"#django.forms.Widget.get_context\" title=\"django.forms.Widget.get_context\"><code class=\"xref py py-meth docutils literal notranslate\">Widget.get_context()</code></a>, <code class=\"docutils literal notranslate\">MultiWidget</code> adds a\n<code class=\"docutils literal notranslate\">widget['subwidgets']</code> key.</p>\n<p>These can be looped over in the widget template:</p>\n<div class=\"code-block\" data-language=\"html+django\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Django template</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Django template code\"><code><span class=\"cp\">{%</span> <span class=\"k\">for</span> <span class=\"nv\">subwidget</span> <span class=\"k\">in</span> <span class=\"nv\">widget.subwidgets</span> <span class=\"cp\">%}</span>\n    <span class=\"cp\">{%</span> <span class=\"k\">include</span> <span class=\"nv\">subwidget.template_name</span> <span class=\"k\">with</span> <span class=\"nv\">widget</span><span class=\"o\">=</span><span class=\"nv\">subwidget</span> <span class=\"cp\">%}</span>\n<span class=\"cp\">{%</span> <span class=\"k\">endfor</span> <span class=\"cp\">%}</span>\n</code></pre></div>\n</dd></dl>\n\n<p>異なるセレクトボックス内で <a class=\"reference internal\" href=\"#django.forms.MultiWidget\" title=\"django.forms.MultiWidget\"><code class=\"xref py py-class docutils literal notranslate\">MultiWidget</code></a> を日、月、年とともに日付を表示するためにサブクラス化するウィジェットの例です。このウィジェットは <a class=\"reference internal\" href=\"/ja/4.0/ref/forms/fields/#django.forms.MultiValueField\" title=\"django.forms.MultiValueField\"><code class=\"xref py py-class docutils literal notranslate\">MultiValueField</code></a> ではなく <a class=\"reference internal\" href=\"/ja/4.0/ref/forms/fields/#django.forms.DateField\" title=\"django.forms.DateField\"><code class=\"xref py py-class docutils literal notranslate\">DateField</code></a> とともに使われることを意図しています。そして、<a class=\"reference internal\" href=\"#django.forms.Widget.value_from_datadict\" title=\"django.forms.Widget.value_from_datadict\"><code class=\"xref py py-meth docutils literal notranslate\">value_from_datadict()</code></a> が実行されています:</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code><span class=\"kn\">from</span> <span class=\"nn\">datetime</span> <span class=\"kn\">import</span> date\n<span class=\"kn\">from</span> <span class=\"nn\">django</span> <span class=\"kn\">import</span> forms\n\n<span class=\"k\">class</span> <span class=\"nc\">DateSelectorWidget</span><span class=\"p\">(</span>forms<span class=\"o\">.</span>MultiWidget<span class=\"p\">):</span>\n    <span class=\"k\">def</span> <span class=\"fm\">__init__</span><span class=\"p\">(</span><span class=\"bp\">self</span><span class=\"p\">,</span> attrs<span class=\"o\">=</span><span class=\"kc\">None</span><span class=\"p\">):</span>\n        days <span class=\"o\">=</span> <span class=\"p\">[(</span>day<span class=\"p\">,</span> day<span class=\"p\">)</span> <span class=\"k\">for</span> day <span class=\"ow\">in</span> <span class=\"nb\">range</span><span class=\"p\">(</span><span class=\"mi\">1</span><span class=\"p\">,</span> <span class=\"mi\">32</span><span class=\"p\">)]</span>\n        months <span class=\"o\">=</span> <span class=\"p\">[(</span>month<span class=\"p\">,</span> month<span class=\"p\">)</span> <span class=\"k\">for</span> month <span class=\"ow\">in</span> <span class=\"nb\">range</span><span class=\"p\">(</span><span class=\"mi\">1</span><span class=\"p\">,</span> <span class=\"mi\">13</span><span class=\"p\">)]</span>\n        years <span class=\"o\">=</span> <span class=\"p\">[(</span>year<span class=\"p\">,</span> year<span class=\"p\">)</span> <span class=\"k\">for</span> year <span class=\"ow\">in</span> <span class=\"p\">[</span><span class=\"mi\">2018</span><span class=\"p\">,</span> <span class=\"mi\">2019</span><span class=\"p\">,</span> <span class=\"mi\">2020</span><span class=\"p\">]]</span>\n        widgets <span class=\"o\">=</span> <span class=\"p\">[</span>\n            forms<span class=\"o\">.</span>Select<span class=\"p\">(</span>attrs<span class=\"o\">=</span>attrs<span class=\"p\">,</span> choices<span class=\"o\">=</span>days<span class=\"p\">),</span>\n            forms<span class=\"o\">.</span>Select<span class=\"p\">(</span>attrs<span class=\"o\">=</span>attrs<span class=\"p\">,</span> choices<span class=\"o\">=</span>months<span class=\"p\">),</span>\n            forms<span class=\"o\">.</span>Select<span class=\"p\">(</span>attrs<span class=\"o\">=</span>attrs<span class=\"p\">,</span> choices<span class=\"o\">=</span>years<span class=\"p\">),</span>\n        <span class=\"p\">]</span>\n        <span class=\"nb\">super</span><span class=\"p\">()</span><span class=\"o\">.</span><span class=\"fm\">__init__</span><span class=\"p\">(</span>widgets<span class=\"p\">,</span> attrs<span class=\"p\">)</span>\n\n    <span class=\"k\">def</span> <span class=\"nf\">decompress</span><span class=\"p\">(</span><span class=\"bp\">self</span><span class=\"p\">,</span> value<span class=\"p\">):</span>\n        <span class=\"k\">if</span> <span class=\"nb\">isinstance</span><span class=\"p\">(</span>value<span class=\"p\">,</span> date<span class=\"p\">):</span>\n            <span class=\"k\">return</span> <span class=\"p\">[</span>value<span class=\"o\">.</span>day<span class=\"p\">,</span> value<span class=\"o\">.</span>month<span class=\"p\">,</span> value<span class=\"o\">.</span>year<span class=\"p\">]</span>\n        <span class=\"k\">elif</span> <span class=\"nb\">isinstance</span><span class=\"p\">(</span>value<span class=\"p\">,</span> <span class=\"nb\">str</span><span class=\"p\">):</span>\n            year<span class=\"p\">,</span> month<span class=\"p\">,</span> day <span class=\"o\">=</span> value<span class=\"o\">.</span>split<span class=\"p\">(</span><span class=\"s1\">&#39;-&#39;</span><span class=\"p\">)</span>\n            <span class=\"k\">return</span> <span class=\"p\">[</span>day<span class=\"p\">,</span> month<span class=\"p\">,</span> year<span class=\"p\">]</span>\n        <span class=\"k\">return</span> <span class=\"p\">[</span><span class=\"kc\">None</span><span class=\"p\">,</span> <span class=\"kc\">None</span><span class=\"p\">,</span> <span class=\"kc\">None</span><span class=\"p\">]</span>\n\n    <span class=\"k\">def</span> <span class=\"nf\">value_from_datadict</span><span class=\"p\">(</span><span class=\"bp\">self</span><span class=\"p\">,</span> data<span class=\"p\">,</span> files<span class=\"p\">,</span> name<span class=\"p\">):</span>\n        day<span class=\"p\">,</span> month<span class=\"p\">,</span> year <span class=\"o\">=</span> <span class=\"nb\">super</span><span class=\"p\">()</span><span class=\"o\">.</span>value_from_datadict<span class=\"p\">(</span>data<span class=\"p\">,</span> files<span class=\"p\">,</span> name<span class=\"p\">)</span>\n        <span class=\"c1\"># DateField expects a single string that it can parse into a date.</span>\n        <span class=\"k\">return</span> <span class=\"s1\">&#39;</span><span class=\"si\">{}</span><span class=\"s1\">-</span><span class=\"si\">{}</span><span class=\"s1\">-</span><span class=\"si\">{}</span><span class=\"s1\">&#39;</span><span class=\"o\">.</span>format<span class=\"p\">(</span>year<span class=\"p\">,</span> month<span class=\"p\">,</span> day<span class=\"p\">)</span>\n</code></pre></div>\n<p>The constructor creates several <a class=\"reference internal\" href=\"#django.forms.Select\" title=\"django.forms.Select\"><code class=\"xref py py-class docutils literal notranslate\">Select</code></a> widgets in a list. The\n<code class=\"docutils literal notranslate\">super()</code> method uses this list to set up the widget.</p>\n<p>The required method <a class=\"reference internal\" href=\"#django.forms.MultiWidget.decompress\" title=\"django.forms.MultiWidget.decompress\"><code class=\"xref py py-meth docutils literal notranslate\">decompress()</code></a> breaks up a\n<code class=\"docutils literal notranslate\">datetime.date</code> value into the day, month, and year values corresponding\nto each widget. If an invalid date was selected, such as the non-existent\n30th February, the <a class=\"reference internal\" href=\"/ja/4.0/ref/forms/fields/#django.forms.DateField\" title=\"django.forms.DateField\"><code class=\"xref py py-class docutils literal notranslate\">DateField</code></a> passes this method a\nstring instead, so that needs parsing. The final <code class=\"docutils literal notranslate\">return</code> handles when\n<code class=\"docutils literal notranslate\">value</code> is <code class=\"docutils literal notranslate\">None</code>, meaning we don't have any defaults for our\nsubwidgets.</p>\n<p>The default implementation of <a class=\"reference internal\" href=\"#django.forms.Widget.value_from_datadict\" title=\"django.forms.Widget.value_from_datadict\"><code class=\"xref py py-meth docutils literal notranslate\">value_from_datadict()</code></a> returns a\nlist of values corresponding to each <code class=\"docutils literal notranslate\">Widget</code>. This is appropriate when\nusing a <code class=\"docutils literal notranslate\">MultiWidget</code> with a <a class=\"reference internal\" href=\"/ja/4.0/ref/forms/fields/#django.forms.MultiValueField\" title=\"django.forms.MultiValueField\"><code class=\"xref py py-class docutils literal notranslate\">MultiValueField</code></a>. But\nsince we want to use this widget with a <a class=\"reference internal\" href=\"/ja/4.0/ref/forms/fields/#django.forms.DateField\" title=\"django.forms.DateField\"><code class=\"xref py py-class docutils literal notranslate\">DateField</code></a>,\nwhich takes a single value, we have overridden this method. The\nimplementation here combines the data from the subwidgets into a string in\nthe format that <a class=\"reference internal\" href=\"/ja/4.0/ref/forms/fields/#django.forms.DateField\" title=\"django.forms.DateField\"><code class=\"xref py py-class docutils literal notranslate\">DateField</code></a> expects.</p>\n</dd></dl>\n\n</section>\n</section>\n<section id=\"built-in-widgets\">\n<span id=\"id4\"></span><h2>ビルトインのウィジェット<a class=\"heading-anchor\" href=\"#built-in-widgets\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h2>\n<p>Django は、全ての基本的な HTML ウィジェットの表現のほか、<code class=\"docutils literal notranslate\">django.forms.widgets</code> でいくつかの一般的に使われるウィジェットのグループを提供します。これは <a class=\"reference internal\" href=\"#text-widgets\"><span class=\"std std-ref\">テキストの入力</span></a>、<a class=\"reference internal\" href=\"#selector-widgets\"><span class=\"std std-ref\">多種のチェックボックスおよび選択肢</span></a>、<a class=\"reference internal\" href=\"#file-upload-widgets\"><span class=\"std std-ref\">ファイルアップロード</span></a>、<a class=\"reference internal\" href=\"#composite-widgets\"><span class=\"std std-ref\">複数値の入力の扱い</span></a> を含みます。</p>\n<section id=\"widgets-handling-input-of-text\">\n<span id=\"text-widgets\"></span><h3>テキストの入力を扱うウィジェット<a class=\"heading-anchor\" href=\"#widgets-handling-input-of-text\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h3>\n<p>これらのウィジェットは、 <code class=\"docutils literal notranslate\">input</code> と <code class=\"docutils literal notranslate\">textarea</code> の HTML 要素を使います。</p>\n<section id=\"textinput\">\n<h4><code class=\"docutils literal notranslate\">TextInput</code><a class=\"heading-anchor\" href=\"#textinput\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<dl class=\"py class\">\n<dt class=\"sig sig-object py\" id=\"django.forms.TextInput\">\n<em class=\"property\"><span class=\"k\">class</span> </em><span class=\"sig-name descname\">TextInput</span><a class=\"heading-anchor\" href=\"#django.forms.TextInput\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><ul class=\"simple\">\n<li><p><code class=\"docutils literal notranslate\">input_type</code>: <code class=\"docutils literal notranslate\">'text'</code></p></li>\n<li><p><code class=\"docutils literal notranslate\">template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/text.html'</code></p></li>\n<li><p>Renders as: <code class=\"docutils literal notranslate\">&lt;input type=&quot;text&quot; ...&gt;</code></p></li>\n</ul>\n</dd></dl>\n\n</section>\n<section id=\"numberinput\">\n<h4><code class=\"docutils literal notranslate\">NumberInput</code><a class=\"heading-anchor\" href=\"#numberinput\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<dl class=\"py class\">\n<dt class=\"sig sig-object py\" id=\"django.forms.NumberInput\">\n<em class=\"property\"><span class=\"k\">class</span> </em><span class=\"sig-name descname\">NumberInput</span><a class=\"heading-anchor\" href=\"#django.forms.NumberInput\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><ul class=\"simple\">\n<li><p><code class=\"docutils literal notranslate\">input_type</code>: <code class=\"docutils literal notranslate\">'number'</code></p></li>\n<li><p><code class=\"docutils literal notranslate\">template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/number.html'</code></p></li>\n<li><p>Renders as: <code class=\"docutils literal notranslate\">&lt;input type=&quot;number&quot; ...&gt;</code></p></li>\n</ul>\n<p>全てのブラウザが <code class=\"docutils literal notranslate\">number</code> input タイプへローカライズされた数値を入力することをサポートしていない点に注意してください。Django 自身、<a class=\"reference internal\" href=\"/ja/4.0/ref/forms/fields/#django.forms.Field.localize\" title=\"django.forms.Field.localize\"><code class=\"xref py py-attr docutils literal notranslate\">localize</code></a> プロパティが <code class=\"docutils literal notranslate\">True</code> にセットされたフィールドでは、これらを使用しません。</p>\n</dd></dl>\n\n</section>\n<section id=\"emailinput\">\n<h4><code class=\"docutils literal notranslate\">EmailInput</code><a class=\"heading-anchor\" href=\"#emailinput\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<dl class=\"py class\">\n<dt class=\"sig sig-object py\" id=\"django.forms.EmailInput\">\n<em class=\"property\"><span class=\"k\">class</span> </em><span class=\"sig-name descname\">EmailInput</span><a class=\"heading-anchor\" href=\"#django.forms.EmailInput\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><ul class=\"simple\">\n<li><p><code class=\"docutils literal notranslate\">input_type</code>: <code class=\"docutils literal notranslate\">'email'</code></p></li>\n<li><p><code class=\"docutils literal notranslate\">template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/email.html'</code></p></li>\n<li><p>Renders as: <code class=\"docutils literal notranslate\">&lt;input type=&quot;email&quot; ...&gt;</code></p></li>\n</ul>\n</dd></dl>\n\n</section>\n<section id=\"urlinput\">\n<h4><code class=\"docutils literal notranslate\">URLInput</code><a class=\"heading-anchor\" href=\"#urlinput\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<dl class=\"py class\">\n<dt class=\"sig sig-object py\" id=\"django.forms.URLInput\">\n<em class=\"property\"><span class=\"k\">class</span> </em><span class=\"sig-name descname\">URLInput</span><a class=\"heading-anchor\" href=\"#django.forms.URLInput\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><ul class=\"simple\">\n<li><p><code class=\"docutils literal notranslate\">input_type</code>: <code class=\"docutils literal notranslate\">'url'</code></p></li>\n<li><p><code class=\"docutils literal notranslate\">template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/url.html'</code></p></li>\n<li><p>Renders as: <code class=\"docutils literal notranslate\">&lt;input type=&quot;url&quot; ...&gt;</code></p></li>\n</ul>\n</dd></dl>\n\n</section>\n<section id=\"passwordinput\">\n<h4><code class=\"docutils literal notranslate\">PasswordInput</code><a class=\"heading-anchor\" href=\"#passwordinput\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<dl class=\"py class\">\n<dt class=\"sig sig-object py\" id=\"django.forms.PasswordInput\">\n<em class=\"property\"><span class=\"k\">class</span> </em><span class=\"sig-name descname\">PasswordInput</span><a class=\"heading-anchor\" href=\"#django.forms.PasswordInput\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><ul class=\"simple\">\n<li><p><code class=\"docutils literal notranslate\">input_type</code>: <code class=\"docutils literal notranslate\">'password'</code></p></li>\n<li><p><code class=\"docutils literal notranslate\">template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/password.html'</code></p></li>\n<li><p>Renders as: <code class=\"docutils literal notranslate\">&lt;input type=&quot;password&quot; ...&gt;</code></p></li>\n</ul>\n<p>1 つの省略可能な引数を取ります:</p>\n<dl class=\"py attribute\">\n<dt class=\"sig sig-object py\" id=\"django.forms.PasswordInput.render_value\">\n<span class=\"sig-name descname\">render_value</span><a class=\"heading-anchor\" href=\"#django.forms.PasswordInput.render_value\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p>バリデーションエラーの後、フォームが再描画されるときにウィジェットに値を書き込むかどうかを決めます (デフォルトは <code class=\"docutils literal notranslate\">False</code> です)。</p>\n</dd></dl>\n\n</dd></dl>\n\n</section>\n<section id=\"hiddeninput\">\n<h4><code class=\"docutils literal notranslate\">HiddenInput</code><a class=\"heading-anchor\" href=\"#hiddeninput\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<dl class=\"py class\">\n<dt class=\"sig sig-object py\" id=\"django.forms.HiddenInput\">\n<em class=\"property\"><span class=\"k\">class</span> </em><span class=\"sig-name descname\">HiddenInput</span><a class=\"heading-anchor\" href=\"#django.forms.HiddenInput\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><ul class=\"simple\">\n<li><p><code class=\"docutils literal notranslate\">input_type</code>: <code class=\"docutils literal notranslate\">'hidden'</code></p></li>\n<li><p><code class=\"docutils literal notranslate\">template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/hidden.html'</code></p></li>\n<li><p>Renders as: <code class=\"docutils literal notranslate\">&lt;input type=&quot;hidden&quot; ...&gt;</code></p></li>\n</ul>\n<p>hidden の Input 要素のセットをカプセル化する <a class=\"reference internal\" href=\"#django.forms.MultipleHiddenInput\" title=\"django.forms.MultipleHiddenInput\"><code class=\"xref py py-class docutils literal notranslate\">MultipleHiddenInput</code></a> ウィジェットもあります。</p>\n</dd></dl>\n\n</section>\n<section id=\"dateinput\">\n<h4><code class=\"docutils literal notranslate\">DateInput</code><a class=\"heading-anchor\" href=\"#dateinput\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<dl class=\"py class\">\n<dt class=\"sig sig-object py\" id=\"django.forms.DateInput\">\n<em class=\"property\"><span class=\"k\">class</span> </em><span class=\"sig-name descname\">DateInput</span><a class=\"heading-anchor\" href=\"#django.forms.DateInput\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><ul class=\"simple\">\n<li><p><code class=\"docutils literal notranslate\">input_type</code>: <code class=\"docutils literal notranslate\">'text'</code></p></li>\n<li><p><code class=\"docutils literal notranslate\">template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/date.html'</code></p></li>\n<li><p>Renders as: <code class=\"docutils literal notranslate\">&lt;input type=&quot;text&quot; ...&gt;</code></p></li>\n</ul>\n<p><a class=\"reference internal\" href=\"#django.forms.TextInput\" title=\"django.forms.TextInput\"><code class=\"xref py py-class docutils literal notranslate\">TextInput</code></a> と同じ引数を取り、さらに 1 つ省略可能な引数があります:</p>\n<dl class=\"py attribute\">\n<dt class=\"sig sig-object py\" id=\"django.forms.DateInput.format\">\n<span class=\"sig-name descname\">format</span><a class=\"heading-anchor\" href=\"#django.forms.DateInput.format\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p>このフィールドの初期値が描画されるフォーマットです。</p>\n</dd></dl>\n\n<p><code class=\"docutils literal notranslate\">format</code> 引数が渡されないとき、デフォルトのフォーマットは <a class=\"reference internal\" href=\"/ja/4.0/ref/settings/#std-setting-DATE_INPUT_FORMATS\"><code class=\"xref std std-setting docutils literal notranslate\">DATE_INPUT_FORMATS</code></a> 内で最初に見つかったフォーマットで、<a class=\"reference internal\" href=\"/ja/4.0/topics/i18n/formatting/\"><span class=\"doc\">表示形式のローカル化</span></a> を尊重します。</p>\n</dd></dl>\n\n</section>\n<section id=\"datetimeinput\">\n<h4><code class=\"docutils literal notranslate\">DateTimeInput</code><a class=\"heading-anchor\" href=\"#datetimeinput\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<dl class=\"py class\">\n<dt class=\"sig sig-object py\" id=\"django.forms.DateTimeInput\">\n<em class=\"property\"><span class=\"k\">class</span> </em><span class=\"sig-name descname\">DateTimeInput</span><a class=\"heading-anchor\" href=\"#django.forms.DateTimeInput\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><ul class=\"simple\">\n<li><p><code class=\"docutils literal notranslate\">input_type</code>: <code class=\"docutils literal notranslate\">'text'</code></p></li>\n<li><p><code class=\"docutils literal notranslate\">template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/datetime.html'</code></p></li>\n<li><p>Renders as: <code class=\"docutils literal notranslate\">&lt;input type=&quot;text&quot; ...&gt;</code></p></li>\n</ul>\n<p><a class=\"reference internal\" href=\"#django.forms.TextInput\" title=\"django.forms.TextInput\"><code class=\"xref py py-class docutils literal notranslate\">TextInput</code></a> と同じ引数を取り、さらに 1 つ省略可能な引数があります:</p>\n<dl class=\"py attribute\">\n<dt class=\"sig sig-object py\" id=\"django.forms.DateTimeInput.format\">\n<span class=\"sig-name descname\">format</span><a class=\"heading-anchor\" href=\"#django.forms.DateTimeInput.format\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p>このフィールドの初期値が描画されるフォーマットです。</p>\n</dd></dl>\n\n<p><code class=\"docutils literal notranslate\">format</code> 引数が渡されないとき、デフォルトのフォーマットは <a class=\"reference internal\" href=\"/ja/4.0/ref/settings/#std-setting-DATETIME_INPUT_FORMATS\"><code class=\"xref std std-setting docutils literal notranslate\">DATETIME_INPUT_FORMATS</code></a> 内で最初に見つかったフォーマットで、<a class=\"reference internal\" href=\"/ja/4.0/topics/i18n/formatting/\"><span class=\"doc\">表示形式のローカル化</span></a> を尊重します。</p>\n<p>デフォルトでは、時刻のマイクロ秒部分は常に <code class=\"docutils literal notranslate\">0</code> にセットされます。マイクロ秒が必要な場合は、サブクラスで <a class=\"reference internal\" href=\"#django.forms.Widget.supports_microseconds\" title=\"django.forms.Widget.supports_microseconds\"><code class=\"xref py py-attr docutils literal notranslate\">supports_microseconds</code></a> 属性を <code class=\"docutils literal notranslate\">True</code> にセットして使ってください。</p>\n</dd></dl>\n\n</section>\n<section id=\"timeinput\">\n<h4><code class=\"docutils literal notranslate\">TimeInput</code><a class=\"heading-anchor\" href=\"#timeinput\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<dl class=\"py class\">\n<dt class=\"sig sig-object py\" id=\"django.forms.TimeInput\">\n<em class=\"property\"><span class=\"k\">class</span> </em><span class=\"sig-name descname\">TimeInput</span><a class=\"heading-anchor\" href=\"#django.forms.TimeInput\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><ul class=\"simple\">\n<li><p><code class=\"docutils literal notranslate\">input_type</code>: <code class=\"docutils literal notranslate\">'text'</code></p></li>\n<li><p><code class=\"docutils literal notranslate\">template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/time.html'</code></p></li>\n<li><p>Renders as: <code class=\"docutils literal notranslate\">&lt;input type=&quot;text&quot; ...&gt;</code></p></li>\n</ul>\n<p><a class=\"reference internal\" href=\"#django.forms.TextInput\" title=\"django.forms.TextInput\"><code class=\"xref py py-class docutils literal notranslate\">TextInput</code></a> と同じ引数を取り、さらに 1 つ省略可能な引数があります:</p>\n<dl class=\"py attribute\">\n<dt class=\"sig sig-object py\" id=\"django.forms.TimeInput.format\">\n<span class=\"sig-name descname\">format</span><a class=\"heading-anchor\" href=\"#django.forms.TimeInput.format\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p>このフィールドの初期値が描画されるフォーマットです。</p>\n</dd></dl>\n\n<p><code class=\"docutils literal notranslate\">format</code> 引数が渡されないとき、デフォルトのフォーマットは <a class=\"reference internal\" href=\"/ja/4.0/ref/settings/#std-setting-TIME_INPUT_FORMATS\"><code class=\"xref std std-setting docutils literal notranslate\">TIME_INPUT_FORMATS</code></a> 内で最初に見つかったフォーマットで、<a class=\"reference internal\" href=\"/ja/4.0/topics/i18n/formatting/\"><span class=\"doc\">表示形式のローカル化</span></a> を尊重します。</p>\n<p>マイクロ秒の扱いについては、<a class=\"reference internal\" href=\"#django.forms.DateTimeInput\" title=\"django.forms.DateTimeInput\"><code class=\"xref py py-class docutils literal notranslate\">DateTimeInput</code></a> を参照してください。</p>\n</dd></dl>\n\n</section>\n<section id=\"textarea\">\n<h4><code class=\"docutils literal notranslate\">Textarea</code><a class=\"heading-anchor\" href=\"#textarea\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<dl class=\"py class\">\n<dt class=\"sig sig-object py\" id=\"django.forms.Textarea\">\n<em class=\"property\"><span class=\"k\">class</span> </em><span class=\"sig-name descname\">Textarea</span><a class=\"heading-anchor\" href=\"#django.forms.Textarea\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><ul class=\"simple\">\n<li><p><code class=\"docutils literal notranslate\">template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/textarea.html'</code></p></li>\n<li><p>Renders as: <code class=\"docutils literal notranslate\">&lt;textarea&gt;...&lt;/textarea&gt;</code></p></li>\n</ul>\n</dd></dl>\n\n</section>\n</section>\n<section id=\"selector-and-checkbox-widgets\">\n<span id=\"selector-widgets\"></span><h3>セレクタおよびチェックボックスのウィジェット<a class=\"heading-anchor\" href=\"#selector-and-checkbox-widgets\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h3>\n<p>These widgets make use of the HTML elements <code class=\"docutils literal notranslate\">&lt;select&gt;</code>,\n<code class=\"docutils literal notranslate\">&lt;input type=&quot;checkbox&quot;&gt;</code>, and <code class=\"docutils literal notranslate\">&lt;input type=&quot;radio&quot;&gt;</code>.</p>\n<p>Widgets that render multiple choices have an <code class=\"docutils literal notranslate\">option_template_name</code> attribute\nthat specifies the template used to render each choice. For example, for the\n<a class=\"reference internal\" href=\"#django.forms.Select\" title=\"django.forms.Select\"><code class=\"xref py py-class docutils literal notranslate\">Select</code></a> widget, <code class=\"docutils literal notranslate\">select_option.html</code> renders the <code class=\"docutils literal notranslate\">&lt;option&gt;</code> for a\n<code class=\"docutils literal notranslate\">&lt;select&gt;</code>.</p>\n<section id=\"checkboxinput\">\n<h4><code class=\"docutils literal notranslate\">CheckboxInput</code><a class=\"heading-anchor\" href=\"#checkboxinput\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<dl class=\"py class\">\n<dt class=\"sig sig-object py\" id=\"django.forms.CheckboxInput\">\n<em class=\"property\"><span class=\"k\">class</span> </em><span class=\"sig-name descname\">CheckboxInput</span><a class=\"heading-anchor\" href=\"#django.forms.CheckboxInput\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><ul class=\"simple\">\n<li><p><code class=\"docutils literal notranslate\">input_type</code>: <code class=\"docutils literal notranslate\">'checkbox'</code></p></li>\n<li><p><code class=\"docutils literal notranslate\">template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/checkbox.html'</code></p></li>\n<li><p>Renders as: <code class=\"docutils literal notranslate\">&lt;input type=&quot;checkbox&quot; ...&gt;</code></p></li>\n</ul>\n<p>1 つの省略可能な引数を取ります:</p>\n<dl class=\"py attribute\">\n<dt class=\"sig sig-object py\" id=\"django.forms.CheckboxInput.check_test\">\n<span class=\"sig-name descname\">check_test</span><a class=\"heading-anchor\" href=\"#django.forms.CheckboxInput.check_test\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p><code class=\"docutils literal notranslate\">CheckboxInput</code> の値を受け取り、チェックボックスがチェックされる必要がある場合は <code class=\"docutils literal notranslate\">True</code> を返す callable です。</p>\n</dd></dl>\n\n</dd></dl>\n\n</section>\n<section id=\"select\">\n<h4><code class=\"docutils literal notranslate\">Select</code><a class=\"heading-anchor\" href=\"#select\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<dl class=\"py class\">\n<dt class=\"sig sig-object py\" id=\"django.forms.Select\">\n<em class=\"property\"><span class=\"k\">class</span> </em><span class=\"sig-name descname\">Select</span><a class=\"heading-anchor\" href=\"#django.forms.Select\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><ul class=\"simple\">\n<li><p><code class=\"docutils literal notranslate\">template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/select.html'</code></p></li>\n<li><p><code class=\"docutils literal notranslate\">option_template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/select_option.html'</code></p></li>\n<li><p>Renders as: <code class=\"docutils literal notranslate\">&lt;select&gt;&lt;option ...&gt;...&lt;/select&gt;</code></p></li>\n</ul>\n<dl class=\"py attribute\">\n<dt class=\"sig sig-object py\" id=\"django.forms.Select.choices\">\n<span class=\"sig-name descname\">choices</span><a class=\"heading-anchor\" href=\"#django.forms.Select.choices\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p>フォームのフィールドに <code class=\"docutils literal notranslate\">choices</code> 属性がない場合、この属性は省略可能です。この属性がある場合には、<a class=\"reference internal\" href=\"/ja/4.0/ref/forms/fields/#django.forms.Field\" title=\"django.forms.Field\"><code class=\"xref py py-class docutils literal notranslate\">Field</code></a> で属性が更新されたときにセットされた全てをオーバーライドします。</p>\n</dd></dl>\n\n</dd></dl>\n\n</section>\n<section id=\"nullbooleanselect\">\n<h4><code class=\"docutils literal notranslate\">NullBooleanSelect</code><a class=\"heading-anchor\" href=\"#nullbooleanselect\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<dl class=\"py class\">\n<dt class=\"sig sig-object py\" id=\"django.forms.NullBooleanSelect\">\n<em class=\"property\"><span class=\"k\">class</span> </em><span class=\"sig-name descname\">NullBooleanSelect</span><a class=\"heading-anchor\" href=\"#django.forms.NullBooleanSelect\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><ul class=\"simple\">\n<li><p><code class=\"docutils literal notranslate\">template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/select.html'</code></p></li>\n<li><p><code class=\"docutils literal notranslate\">option_template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/select_option.html'</code></p></li>\n</ul>\n<p>'Unknown'、'Yes'、'No' の選択肢ウィジェット</p>\n</dd></dl>\n\n</section>\n<section id=\"selectmultiple\">\n<h4><code class=\"docutils literal notranslate\">SelectMultiple</code><a class=\"heading-anchor\" href=\"#selectmultiple\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<dl class=\"py class\">\n<dt class=\"sig sig-object py\" id=\"django.forms.SelectMultiple\">\n<em class=\"property\"><span class=\"k\">class</span> </em><span class=\"sig-name descname\">SelectMultiple</span><a class=\"heading-anchor\" href=\"#django.forms.SelectMultiple\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><ul class=\"simple\">\n<li><p><code class=\"docutils literal notranslate\">template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/select.html'</code></p></li>\n<li><p><code class=\"docutils literal notranslate\">option_template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/select_option.html'</code></p></li>\n</ul>\n<p>Similar to <a class=\"reference internal\" href=\"#django.forms.Select\" title=\"django.forms.Select\"><code class=\"xref py py-class docutils literal notranslate\">Select</code></a>, but allows multiple selection:\n<code class=\"docutils literal notranslate\">&lt;select multiple&gt;...&lt;/select&gt;</code></p>\n</dd></dl>\n\n</section>\n<section id=\"radioselect\">\n<h4><code class=\"docutils literal notranslate\">RadioSelect</code><a class=\"heading-anchor\" href=\"#radioselect\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<dl class=\"py class\">\n<dt class=\"sig sig-object py\" id=\"django.forms.RadioSelect\">\n<em class=\"property\"><span class=\"k\">class</span> </em><span class=\"sig-name descname\">RadioSelect</span><a class=\"heading-anchor\" href=\"#django.forms.RadioSelect\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><ul class=\"simple\">\n<li><p><code class=\"docutils literal notranslate\">template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/radio.html'</code></p></li>\n<li><p><code class=\"docutils literal notranslate\">option_template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/radio_option.html'</code></p></li>\n</ul>\n<p>Similar to <a class=\"reference internal\" href=\"#django.forms.Select\" title=\"django.forms.Select\"><code class=\"xref py py-class docutils literal notranslate\">Select</code></a>, but rendered as a list of radio buttons within\n<code class=\"docutils literal notranslate\">&lt;div&gt;</code> tags:</p>\n<div class=\"code-block\" data-language=\"html\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Html</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Html code\"><code><span class=\"p\">&lt;</span><span class=\"nt\">div</span><span class=\"p\">&gt;</span>\n  <span class=\"p\">&lt;</span><span class=\"nt\">div</span><span class=\"p\">&gt;&lt;</span><span class=\"nt\">input</span> <span class=\"na\">type</span><span class=\"o\">=</span><span class=\"s\">&quot;radio&quot;</span> <span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s\">&quot;...&quot;</span><span class=\"p\">&gt;&lt;/</span><span class=\"nt\">div</span><span class=\"p\">&gt;</span>\n  ...\n<span class=\"p\">&lt;/</span><span class=\"nt\">div</span><span class=\"p\">&gt;</span>\n</code></pre></div>\n<aside class=\"version-note version-changed\" data-version=\"4.0\" role=\"note\">\n<p class=\"version-note-title\">Changed in Django 4.0</p><p>So they are announced more concisely by screen readers, radio buttons\nwere changed to render in <code class=\"docutils literal notranslate\">&lt;div&gt;</code> tags.</p>\n</aside>\n<p>For more granular control over the generated markup, you can loop over the\nradio buttons in the template. Assuming a form <code class=\"docutils literal notranslate\">myform</code> with a field\n<code class=\"docutils literal notranslate\">beatles</code> that uses a <code class=\"docutils literal notranslate\">RadioSelect</code> as its widget:</p>\n<div class=\"code-block\" data-language=\"html+django\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Django template</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Django template code\"><code><span class=\"p\">&lt;</span><span class=\"nt\">fieldset</span><span class=\"p\">&gt;</span>\n    <span class=\"p\">&lt;</span><span class=\"nt\">legend</span><span class=\"p\">&gt;</span><span class=\"cp\">{{</span> <span class=\"nv\">myform.beatles.label</span> <span class=\"cp\">}}</span><span class=\"p\">&lt;/</span><span class=\"nt\">legend</span><span class=\"p\">&gt;</span>\n    <span class=\"cp\">{%</span> <span class=\"k\">for</span> <span class=\"nv\">radio</span> <span class=\"k\">in</span> <span class=\"nv\">myform.beatles</span> <span class=\"cp\">%}</span>\n    <span class=\"p\">&lt;</span><span class=\"nt\">div</span> <span class=\"na\">class</span><span class=\"o\">=</span><span class=\"s\">&quot;myradio&quot;</span><span class=\"p\">&gt;</span>\n        <span class=\"cp\">{{</span> <span class=\"nv\">radio</span> <span class=\"cp\">}}</span>\n    <span class=\"p\">&lt;/</span><span class=\"nt\">div</span><span class=\"p\">&gt;</span>\n    <span class=\"cp\">{%</span> <span class=\"k\">endfor</span> <span class=\"cp\">%}</span>\n<span class=\"p\">&lt;/</span><span class=\"nt\">fieldset</span><span class=\"p\">&gt;</span>\n</code></pre></div>\n<p>This would generate the following HTML:</p>\n<div class=\"code-block\" data-language=\"html\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Html</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Html code\"><code><span class=\"p\">&lt;</span><span class=\"nt\">fieldset</span><span class=\"p\">&gt;</span>\n    <span class=\"p\">&lt;</span><span class=\"nt\">legend</span><span class=\"p\">&gt;</span>Radio buttons<span class=\"p\">&lt;/</span><span class=\"nt\">legend</span><span class=\"p\">&gt;</span>\n    <span class=\"p\">&lt;</span><span class=\"nt\">div</span> <span class=\"na\">class</span><span class=\"o\">=</span><span class=\"s\">&quot;myradio&quot;</span><span class=\"p\">&gt;</span>\n        <span class=\"p\">&lt;</span><span class=\"nt\">label</span> <span class=\"na\">for</span><span class=\"o\">=</span><span class=\"s\">&quot;id_beatles_0&quot;</span><span class=\"p\">&gt;&lt;</span><span class=\"nt\">input</span> <span class=\"na\">id</span><span class=\"o\">=</span><span class=\"s\">&quot;id_beatles_0&quot;</span> <span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s\">&quot;beatles&quot;</span> <span class=\"na\">type</span><span class=\"o\">=</span><span class=\"s\">&quot;radio&quot;</span> <span class=\"na\">value</span><span class=\"o\">=</span><span class=\"s\">&quot;john&quot;</span> <span class=\"na\">required</span><span class=\"p\">&gt;</span> John<span class=\"p\">&lt;/</span><span class=\"nt\">label</span><span class=\"p\">&gt;</span>\n    <span class=\"p\">&lt;/</span><span class=\"nt\">div</span><span class=\"p\">&gt;</span>\n    <span class=\"p\">&lt;</span><span class=\"nt\">div</span> <span class=\"na\">class</span><span class=\"o\">=</span><span class=\"s\">&quot;myradio&quot;</span><span class=\"p\">&gt;</span>\n        <span class=\"p\">&lt;</span><span class=\"nt\">label</span> <span class=\"na\">for</span><span class=\"o\">=</span><span class=\"s\">&quot;id_beatles_1&quot;</span><span class=\"p\">&gt;&lt;</span><span class=\"nt\">input</span> <span class=\"na\">id</span><span class=\"o\">=</span><span class=\"s\">&quot;id_beatles_1&quot;</span> <span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s\">&quot;beatles&quot;</span> <span class=\"na\">type</span><span class=\"o\">=</span><span class=\"s\">&quot;radio&quot;</span> <span class=\"na\">value</span><span class=\"o\">=</span><span class=\"s\">&quot;paul&quot;</span> <span class=\"na\">required</span><span class=\"p\">&gt;</span> Paul<span class=\"p\">&lt;/</span><span class=\"nt\">label</span><span class=\"p\">&gt;</span>\n    <span class=\"p\">&lt;/</span><span class=\"nt\">div</span><span class=\"p\">&gt;</span>\n    <span class=\"p\">&lt;</span><span class=\"nt\">div</span> <span class=\"na\">class</span><span class=\"o\">=</span><span class=\"s\">&quot;myradio&quot;</span><span class=\"p\">&gt;</span>\n        <span class=\"p\">&lt;</span><span class=\"nt\">label</span> <span class=\"na\">for</span><span class=\"o\">=</span><span class=\"s\">&quot;id_beatles_2&quot;</span><span class=\"p\">&gt;&lt;</span><span class=\"nt\">input</span> <span class=\"na\">id</span><span class=\"o\">=</span><span class=\"s\">&quot;id_beatles_2&quot;</span> <span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s\">&quot;beatles&quot;</span> <span class=\"na\">type</span><span class=\"o\">=</span><span class=\"s\">&quot;radio&quot;</span> <span class=\"na\">value</span><span class=\"o\">=</span><span class=\"s\">&quot;george&quot;</span> <span class=\"na\">required</span><span class=\"p\">&gt;</span> George<span class=\"p\">&lt;/</span><span class=\"nt\">label</span><span class=\"p\">&gt;</span>\n    <span class=\"p\">&lt;/</span><span class=\"nt\">div</span><span class=\"p\">&gt;</span>\n    <span class=\"p\">&lt;</span><span class=\"nt\">div</span> <span class=\"na\">class</span><span class=\"o\">=</span><span class=\"s\">&quot;myradio&quot;</span><span class=\"p\">&gt;</span>\n        <span class=\"p\">&lt;</span><span class=\"nt\">label</span> <span class=\"na\">for</span><span class=\"o\">=</span><span class=\"s\">&quot;id_beatles_3&quot;</span><span class=\"p\">&gt;&lt;</span><span class=\"nt\">input</span> <span class=\"na\">id</span><span class=\"o\">=</span><span class=\"s\">&quot;id_beatles_3&quot;</span> <span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s\">&quot;beatles&quot;</span> <span class=\"na\">type</span><span class=\"o\">=</span><span class=\"s\">&quot;radio&quot;</span> <span class=\"na\">value</span><span class=\"o\">=</span><span class=\"s\">&quot;ringo&quot;</span> <span class=\"na\">required</span><span class=\"p\">&gt;</span> Ringo<span class=\"p\">&lt;/</span><span class=\"nt\">label</span><span class=\"p\">&gt;</span>\n    <span class=\"p\">&lt;/</span><span class=\"nt\">div</span><span class=\"p\">&gt;</span>\n<span class=\"p\">&lt;/</span><span class=\"nt\">fieldset</span><span class=\"p\">&gt;</span>\n</code></pre></div>\n<p>That included the <code class=\"docutils literal notranslate\">&lt;label&gt;</code> tags. To get more granular, you can use each\nradio button's <code class=\"docutils literal notranslate\">tag</code>, <code class=\"docutils literal notranslate\">choice_label</code> and <code class=\"docutils literal notranslate\">id_for_label</code> attributes.\nFor example, this template...</p>\n<div class=\"code-block\" data-language=\"html+django\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Django template</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Django template code\"><code><span class=\"p\">&lt;</span><span class=\"nt\">fieldset</span><span class=\"p\">&gt;</span>\n    <span class=\"p\">&lt;</span><span class=\"nt\">legend</span><span class=\"p\">&gt;</span><span class=\"cp\">{{</span> <span class=\"nv\">myform.beatles.label</span> <span class=\"cp\">}}</span><span class=\"p\">&lt;/</span><span class=\"nt\">legend</span><span class=\"p\">&gt;</span>\n    <span class=\"cp\">{%</span> <span class=\"k\">for</span> <span class=\"nv\">radio</span> <span class=\"k\">in</span> <span class=\"nv\">myform.beatles</span> <span class=\"cp\">%}</span>\n    <span class=\"p\">&lt;</span><span class=\"nt\">label</span> <span class=\"na\">for</span><span class=\"o\">=</span><span class=\"s\">&quot;</span><span class=\"cp\">{{</span> <span class=\"nv\">radio.id_for_label</span> <span class=\"cp\">}}</span><span class=\"s\">&quot;</span><span class=\"p\">&gt;</span>\n        <span class=\"cp\">{{</span> <span class=\"nv\">radio.choice_label</span> <span class=\"cp\">}}</span>\n        <span class=\"p\">&lt;</span><span class=\"nt\">span</span> <span class=\"na\">class</span><span class=\"o\">=</span><span class=\"s\">&quot;radio&quot;</span><span class=\"p\">&gt;</span><span class=\"cp\">{{</span> <span class=\"nv\">radio.tag</span> <span class=\"cp\">}}</span><span class=\"p\">&lt;/</span><span class=\"nt\">span</span><span class=\"p\">&gt;</span>\n    <span class=\"p\">&lt;/</span><span class=\"nt\">label</span><span class=\"p\">&gt;</span>\n    <span class=\"cp\">{%</span> <span class=\"k\">endfor</span> <span class=\"cp\">%}</span>\n<span class=\"p\">&lt;/</span><span class=\"nt\">fieldset</span><span class=\"p\">&gt;</span>\n</code></pre></div>\n<p>...will result in the following HTML:</p>\n<div class=\"code-block\" data-language=\"html\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Html</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Html code\"><code><span class=\"p\">&lt;</span><span class=\"nt\">fieldset</span><span class=\"p\">&gt;</span>\n    <span class=\"p\">&lt;</span><span class=\"nt\">legend</span><span class=\"p\">&gt;</span>Radio buttons<span class=\"p\">&lt;/</span><span class=\"nt\">legend</span><span class=\"p\">&gt;</span>\n    <span class=\"p\">&lt;</span><span class=\"nt\">label</span> <span class=\"na\">for</span><span class=\"o\">=</span><span class=\"s\">&quot;id_beatles_0&quot;</span><span class=\"p\">&gt;</span>\n        John\n        <span class=\"p\">&lt;</span><span class=\"nt\">span</span> <span class=\"na\">class</span><span class=\"o\">=</span><span class=\"s\">&quot;radio&quot;</span><span class=\"p\">&gt;&lt;</span><span class=\"nt\">input</span> <span class=\"na\">id</span><span class=\"o\">=</span><span class=\"s\">&quot;id_beatles_0&quot;</span> <span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s\">&quot;beatles&quot;</span> <span class=\"na\">type</span><span class=\"o\">=</span><span class=\"s\">&quot;radio&quot;</span> <span class=\"na\">value</span><span class=\"o\">=</span><span class=\"s\">&quot;john&quot;</span> <span class=\"na\">required</span><span class=\"p\">&gt;&lt;/</span><span class=\"nt\">span</span><span class=\"p\">&gt;</span>\n    <span class=\"p\">&lt;/</span><span class=\"nt\">label</span><span class=\"p\">&gt;</span>\n    <span class=\"p\">&lt;</span><span class=\"nt\">label</span> <span class=\"na\">for</span><span class=\"o\">=</span><span class=\"s\">&quot;id_beatles_1&quot;</span><span class=\"p\">&gt;</span>\n        Paul\n        <span class=\"p\">&lt;</span><span class=\"nt\">span</span> <span class=\"na\">class</span><span class=\"o\">=</span><span class=\"s\">&quot;radio&quot;</span><span class=\"p\">&gt;&lt;</span><span class=\"nt\">input</span> <span class=\"na\">id</span><span class=\"o\">=</span><span class=\"s\">&quot;id_beatles_1&quot;</span> <span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s\">&quot;beatles&quot;</span> <span class=\"na\">type</span><span class=\"o\">=</span><span class=\"s\">&quot;radio&quot;</span> <span class=\"na\">value</span><span class=\"o\">=</span><span class=\"s\">&quot;paul&quot;</span> <span class=\"na\">required</span><span class=\"p\">&gt;&lt;/</span><span class=\"nt\">span</span><span class=\"p\">&gt;</span>\n    <span class=\"p\">&lt;/</span><span class=\"nt\">label</span><span class=\"p\">&gt;</span>\n    <span class=\"p\">&lt;</span><span class=\"nt\">label</span> <span class=\"na\">for</span><span class=\"o\">=</span><span class=\"s\">&quot;id_beatles_2&quot;</span><span class=\"p\">&gt;</span>\n        George\n        <span class=\"p\">&lt;</span><span class=\"nt\">span</span> <span class=\"na\">class</span><span class=\"o\">=</span><span class=\"s\">&quot;radio&quot;</span><span class=\"p\">&gt;&lt;</span><span class=\"nt\">input</span> <span class=\"na\">id</span><span class=\"o\">=</span><span class=\"s\">&quot;id_beatles_2&quot;</span> <span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s\">&quot;beatles&quot;</span> <span class=\"na\">type</span><span class=\"o\">=</span><span class=\"s\">&quot;radio&quot;</span> <span class=\"na\">value</span><span class=\"o\">=</span><span class=\"s\">&quot;george&quot;</span> <span class=\"na\">required</span><span class=\"p\">&gt;&lt;/</span><span class=\"nt\">span</span><span class=\"p\">&gt;</span>\n    <span class=\"p\">&lt;/</span><span class=\"nt\">label</span><span class=\"p\">&gt;</span>\n    <span class=\"p\">&lt;</span><span class=\"nt\">label</span> <span class=\"na\">for</span><span class=\"o\">=</span><span class=\"s\">&quot;id_beatles_3&quot;</span><span class=\"p\">&gt;</span>\n        Ringo\n        <span class=\"p\">&lt;</span><span class=\"nt\">span</span> <span class=\"na\">class</span><span class=\"o\">=</span><span class=\"s\">&quot;radio&quot;</span><span class=\"p\">&gt;&lt;</span><span class=\"nt\">input</span> <span class=\"na\">id</span><span class=\"o\">=</span><span class=\"s\">&quot;id_beatles_3&quot;</span> <span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s\">&quot;beatles&quot;</span> <span class=\"na\">type</span><span class=\"o\">=</span><span class=\"s\">&quot;radio&quot;</span> <span class=\"na\">value</span><span class=\"o\">=</span><span class=\"s\">&quot;ringo&quot;</span> <span class=\"na\">required</span><span class=\"p\">&gt;&lt;/</span><span class=\"nt\">span</span><span class=\"p\">&gt;</span>\n    <span class=\"p\">&lt;/</span><span class=\"nt\">label</span><span class=\"p\">&gt;</span>\n<span class=\"p\">&lt;/</span><span class=\"nt\">fieldset</span><span class=\"p\">&gt;</span>\n</code></pre></div>\n<p>If you decide not to loop over the radio buttons -- e.g., if your template\nincludes <code class=\"docutils literal notranslate\">{{ myform.beatles }}</code> -- they'll be output in a <code class=\"docutils literal notranslate\">&lt;div&gt;</code> with\n<code class=\"docutils literal notranslate\">&lt;div&gt;</code> tags, as above.</p>\n<p>The outer <code class=\"docutils literal notranslate\">&lt;div&gt;</code> container receives the <code class=\"docutils literal notranslate\">id</code> attribute of the widget,\nif defined, or <a class=\"reference internal\" href=\"/ja/4.0/ref/forms/api/#django.forms.BoundField.auto_id\" title=\"django.forms.BoundField.auto_id\"><code class=\"xref py py-attr docutils literal notranslate\">BoundField.auto_id</code></a> otherwise.</p>\n<p>When looping over the radio buttons, the <code class=\"docutils literal notranslate\">label</code> and <code class=\"docutils literal notranslate\">input</code> tags include\n<code class=\"docutils literal notranslate\">for</code> and <code class=\"docutils literal notranslate\">id</code> attributes, respectively. Each radio button has an\n<code class=\"docutils literal notranslate\">id_for_label</code> attribute to output the element's ID.</p>\n</dd></dl>\n\n</section>\n<section id=\"checkboxselectmultiple\">\n<h4><code class=\"docutils literal notranslate\">CheckboxSelectMultiple</code><a class=\"heading-anchor\" href=\"#checkboxselectmultiple\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<dl class=\"py class\">\n<dt class=\"sig sig-object py\" id=\"django.forms.CheckboxSelectMultiple\">\n<em class=\"property\"><span class=\"k\">class</span> </em><span class=\"sig-name descname\">CheckboxSelectMultiple</span><a class=\"heading-anchor\" href=\"#django.forms.CheckboxSelectMultiple\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><ul class=\"simple\">\n<li><p><code class=\"docutils literal notranslate\">template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/checkbox_select.html'</code></p></li>\n<li><p><code class=\"docutils literal notranslate\">option_template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/checkbox_option.html'</code></p></li>\n</ul>\n<p>Similar to <a class=\"reference internal\" href=\"#django.forms.SelectMultiple\" title=\"django.forms.SelectMultiple\"><code class=\"xref py py-class docutils literal notranslate\">SelectMultiple</code></a>, but rendered as a list of checkboxes:</p>\n<div class=\"code-block\" data-language=\"html\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Html</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Html code\"><code><span class=\"p\">&lt;</span><span class=\"nt\">div</span><span class=\"p\">&gt;</span>\n  <span class=\"p\">&lt;</span><span class=\"nt\">div</span><span class=\"p\">&gt;&lt;</span><span class=\"nt\">input</span> <span class=\"na\">type</span><span class=\"o\">=</span><span class=\"s\">&quot;checkbox&quot;</span> <span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s\">&quot;...&quot;</span> <span class=\"p\">&gt;&lt;/</span><span class=\"nt\">div</span><span class=\"p\">&gt;</span>\n  ...\n<span class=\"p\">&lt;/</span><span class=\"nt\">div</span><span class=\"p\">&gt;</span>\n</code></pre></div>\n<p>The outer <code class=\"docutils literal notranslate\">&lt;div&gt;</code> container receives the <code class=\"docutils literal notranslate\">id</code> attribute of the widget,\nif defined, or <a class=\"reference internal\" href=\"/ja/4.0/ref/forms/api/#django.forms.BoundField.auto_id\" title=\"django.forms.BoundField.auto_id\"><code class=\"xref py py-attr docutils literal notranslate\">BoundField.auto_id</code></a> otherwise.</p>\n<aside class=\"version-note version-changed\" data-version=\"4.0\" role=\"note\">\n<p class=\"version-note-title\">Changed in Django 4.0</p><p>So they are announced more concisely by screen readers, checkboxes were\nchanged to render in <code class=\"docutils literal notranslate\">&lt;div&gt;</code> tags.</p>\n</aside>\n</dd></dl>\n\n<p>Like <a class=\"reference internal\" href=\"#django.forms.RadioSelect\" title=\"django.forms.RadioSelect\"><code class=\"xref py py-class docutils literal notranslate\">RadioSelect</code></a>, you can loop over the individual checkboxes for the\nwidget's choices. Unlike <a class=\"reference internal\" href=\"#django.forms.RadioSelect\" title=\"django.forms.RadioSelect\"><code class=\"xref py py-class docutils literal notranslate\">RadioSelect</code></a>, the checkboxes won't include the\n<code class=\"docutils literal notranslate\">required</code> HTML attribute if the field is required because browser validation\nwould require all checkboxes to be checked instead of at least one.</p>\n<p>When looping over the checkboxes, the <code class=\"docutils literal notranslate\">label</code> and <code class=\"docutils literal notranslate\">input</code> tags include\n<code class=\"docutils literal notranslate\">for</code> and <code class=\"docutils literal notranslate\">id</code> attributes, respectively. Each checkbox has an\n<code class=\"docutils literal notranslate\">id_for_label</code> attribute to output the element's ID.</p>\n</section>\n</section>\n<section id=\"file-upload-widgets\">\n<span id=\"id5\"></span><h3>ファイルアップロード用ウィジェット<a class=\"heading-anchor\" href=\"#file-upload-widgets\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h3>\n<section id=\"fileinput\">\n<h4><code class=\"docutils literal notranslate\">FileInput</code><a class=\"heading-anchor\" href=\"#fileinput\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<dl class=\"py class\">\n<dt class=\"sig sig-object py\" id=\"django.forms.FileInput\">\n<em class=\"property\"><span class=\"k\">class</span> </em><span class=\"sig-name descname\">FileInput</span><a class=\"heading-anchor\" href=\"#django.forms.FileInput\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><ul class=\"simple\">\n<li><p><code class=\"docutils literal notranslate\">template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/file.html'</code></p></li>\n<li><p>Renders as: <code class=\"docutils literal notranslate\">&lt;input type=&quot;file&quot; ...&gt;</code></p></li>\n</ul>\n</dd></dl>\n\n</section>\n<section id=\"clearablefileinput\">\n<h4><code class=\"docutils literal notranslate\">ClearableFileInput</code><a class=\"heading-anchor\" href=\"#clearablefileinput\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<dl class=\"py class\">\n<dt class=\"sig sig-object py\" id=\"django.forms.ClearableFileInput\">\n<em class=\"property\"><span class=\"k\">class</span> </em><span class=\"sig-name descname\">ClearableFileInput</span><a class=\"heading-anchor\" href=\"#django.forms.ClearableFileInput\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><ul class=\"simple\">\n<li><p><code class=\"docutils literal notranslate\">template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/clearable_file_input.html'</code></p></li>\n<li><p>Renders as: <code class=\"docutils literal notranslate\">&lt;input type=&quot;file&quot; ...&gt;</code> with an additional checkbox\ninput to clear the field's value, if the field is not required and has\ninitial data.</p></li>\n</ul>\n</dd></dl>\n\n</section>\n</section>\n<section id=\"composite-widgets\">\n<span id=\"id6\"></span><h3>複合ウィジェット<a class=\"heading-anchor\" href=\"#composite-widgets\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h3>\n<section id=\"multiplehiddeninput\">\n<h4><code class=\"docutils literal notranslate\">MultipleHiddenInput</code><a class=\"heading-anchor\" href=\"#multiplehiddeninput\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<dl class=\"py class\">\n<dt class=\"sig sig-object py\" id=\"django.forms.MultipleHiddenInput\">\n<em class=\"property\"><span class=\"k\">class</span> </em><span class=\"sig-name descname\">MultipleHiddenInput</span><a class=\"heading-anchor\" href=\"#django.forms.MultipleHiddenInput\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><ul class=\"simple\">\n<li><p><code class=\"docutils literal notranslate\">template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/multiple_hidden.html'</code></p></li>\n<li><p>Renders as: multiple <code class=\"docutils literal notranslate\">&lt;input type=&quot;hidden&quot; ...&gt;</code> tags</p></li>\n</ul>\n<p>A widget that handles multiple hidden widgets for fields that have a list\nof values.</p>\n</dd></dl>\n\n</section>\n<section id=\"splitdatetimewidget\">\n<h4><code class=\"docutils literal notranslate\">SplitDateTimeWidget</code><a class=\"heading-anchor\" href=\"#splitdatetimewidget\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<dl class=\"py class\">\n<dt class=\"sig sig-object py\" id=\"django.forms.SplitDateTimeWidget\">\n<em class=\"property\"><span class=\"k\">class</span> </em><span class=\"sig-name descname\">SplitDateTimeWidget</span><a class=\"heading-anchor\" href=\"#django.forms.SplitDateTimeWidget\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><ul class=\"simple\">\n<li><p><code class=\"docutils literal notranslate\">template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/splitdatetime.html'</code></p></li>\n</ul>\n<p>Wrapper (using <a class=\"reference internal\" href=\"#django.forms.MultiWidget\" title=\"django.forms.MultiWidget\"><code class=\"xref py py-class docutils literal notranslate\">MultiWidget</code></a>) around two widgets: <a class=\"reference internal\" href=\"#django.forms.DateInput\" title=\"django.forms.DateInput\"><code class=\"xref py py-class docutils literal notranslate\">DateInput</code></a>\nfor the date, and <a class=\"reference internal\" href=\"#django.forms.TimeInput\" title=\"django.forms.TimeInput\"><code class=\"xref py py-class docutils literal notranslate\">TimeInput</code></a> for the time. Must be used with\n<a class=\"reference internal\" href=\"/ja/4.0/ref/forms/fields/#django.forms.SplitDateTimeField\" title=\"django.forms.SplitDateTimeField\"><code class=\"xref py py-class docutils literal notranslate\">SplitDateTimeField</code></a> rather than <a class=\"reference internal\" href=\"/ja/4.0/ref/forms/fields/#django.forms.DateTimeField\" title=\"django.forms.DateTimeField\"><code class=\"xref py py-class docutils literal notranslate\">DateTimeField</code></a>.</p>\n<p><code class=\"docutils literal notranslate\">SplitDateTimeWidget</code> has several optional arguments:</p>\n<dl class=\"py attribute\">\n<dt class=\"sig sig-object py\" id=\"django.forms.SplitDateTimeWidget.date_format\">\n<span class=\"sig-name descname\">date_format</span><a class=\"heading-anchor\" href=\"#django.forms.SplitDateTimeWidget.date_format\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p><a class=\"reference internal\" href=\"#django.forms.DateInput.format\" title=\"django.forms.DateInput.format\"><code class=\"xref py py-attr docutils literal notranslate\">DateInput.format</code></a> と同様。</p>\n</dd></dl>\n\n<dl class=\"py attribute\">\n<dt class=\"sig sig-object py\" id=\"django.forms.SplitDateTimeWidget.time_format\">\n<span class=\"sig-name descname\">time_format</span><a class=\"heading-anchor\" href=\"#django.forms.SplitDateTimeWidget.time_format\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p><a class=\"reference internal\" href=\"#django.forms.TimeInput.format\" title=\"django.forms.TimeInput.format\"><code class=\"xref py py-attr docutils literal notranslate\">TimeInput.format</code></a> と同様</p>\n</dd></dl>\n\n<dl class=\"py attribute\">\n<dt class=\"sig sig-object py\" id=\"django.forms.SplitDateTimeWidget.date_attrs\">\n<span class=\"sig-name descname\">date_attrs</span><a class=\"heading-anchor\" href=\"#django.forms.SplitDateTimeWidget.date_attrs\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd></dd></dl>\n\n<dl class=\"py attribute\">\n<dt class=\"sig sig-object py\" id=\"django.forms.SplitDateTimeWidget.time_attrs\">\n<span class=\"sig-name descname\">time_attrs</span><a class=\"heading-anchor\" href=\"#django.forms.SplitDateTimeWidget.time_attrs\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p>Similar to <a class=\"reference internal\" href=\"#django.forms.Widget.attrs\" title=\"django.forms.Widget.attrs\"><code class=\"xref py py-attr docutils literal notranslate\">Widget.attrs</code></a>. A dictionary containing HTML\nattributes to be set on the rendered <a class=\"reference internal\" href=\"#django.forms.DateInput\" title=\"django.forms.DateInput\"><code class=\"xref py py-class docutils literal notranslate\">DateInput</code></a> and\n<a class=\"reference internal\" href=\"#django.forms.TimeInput\" title=\"django.forms.TimeInput\"><code class=\"xref py py-class docutils literal notranslate\">TimeInput</code></a> widgets, respectively. If these attributes aren't\nset, <a class=\"reference internal\" href=\"#django.forms.Widget.attrs\" title=\"django.forms.Widget.attrs\"><code class=\"xref py py-attr docutils literal notranslate\">Widget.attrs</code></a> is used instead.</p>\n</dd></dl>\n\n</dd></dl>\n\n</section>\n<section id=\"splithiddendatetimewidget\">\n<h4><code class=\"docutils literal notranslate\">SplitHiddenDateTimeWidget</code><a class=\"heading-anchor\" href=\"#splithiddendatetimewidget\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<dl class=\"py class\">\n<dt class=\"sig sig-object py\" id=\"django.forms.SplitHiddenDateTimeWidget\">\n<em class=\"property\"><span class=\"k\">class</span> </em><span class=\"sig-name descname\">SplitHiddenDateTimeWidget</span><a class=\"heading-anchor\" href=\"#django.forms.SplitHiddenDateTimeWidget\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><ul class=\"simple\">\n<li><p><code class=\"docutils literal notranslate\">template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/splithiddendatetime.html'</code></p></li>\n</ul>\n<p>Similar to <a class=\"reference internal\" href=\"#django.forms.SplitDateTimeWidget\" title=\"django.forms.SplitDateTimeWidget\"><code class=\"xref py py-class docutils literal notranslate\">SplitDateTimeWidget</code></a>, but uses <a class=\"reference internal\" href=\"#django.forms.HiddenInput\" title=\"django.forms.HiddenInput\"><code class=\"xref py py-class docutils literal notranslate\">HiddenInput</code></a> for\nboth date and time.</p>\n</dd></dl>\n\n</section>\n<section id=\"selectdatewidget\">\n<h4><code class=\"docutils literal notranslate\">SelectDateWidget</code><a class=\"heading-anchor\" href=\"#selectdatewidget\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<dl class=\"py class\">\n<dt class=\"sig sig-object py\" id=\"django.forms.SelectDateWidget\">\n<em class=\"property\"><span class=\"k\">class</span> </em><span class=\"sig-name descname\">SelectDateWidget</span><a class=\"heading-anchor\" href=\"#django.forms.SelectDateWidget\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><ul class=\"simple\">\n<li><p><code class=\"docutils literal notranslate\">template_name</code>: <code class=\"docutils literal notranslate\">'django/forms/widgets/select_date.html'</code></p></li>\n</ul>\n<p>Wrapper around three <a class=\"reference internal\" href=\"#django.forms.Select\" title=\"django.forms.Select\"><code class=\"xref py py-class docutils literal notranslate\">Select</code></a> widgets: one each for\nmonth, day, and year.</p>\n<p>Takes several optional arguments:</p>\n<dl class=\"py attribute\">\n<dt class=\"sig sig-object py\" id=\"django.forms.SelectDateWidget.years\">\n<span class=\"sig-name descname\">years</span><a class=\"heading-anchor\" href=\"#django.forms.SelectDateWidget.years\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p>An optional list/tuple of years to use in the &quot;year&quot; select box.\nThe default is a list containing the current year and the next 9 years.</p>\n</dd></dl>\n\n<dl class=\"py attribute\">\n<dt class=\"sig sig-object py\" id=\"django.forms.SelectDateWidget.months\">\n<span class=\"sig-name descname\">months</span><a class=\"heading-anchor\" href=\"#django.forms.SelectDateWidget.months\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p>An optional dict of months to use in the &quot;months&quot; select box.</p>\n<p>The keys of the dict correspond to the month number (1-indexed) and\nthe values are the displayed months:</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code>MONTHS <span class=\"o\">=</span> <span class=\"p\">{</span>\n    <span class=\"mi\">1</span><span class=\"p\">:</span>_<span class=\"p\">(</span><span class=\"s1\">&#39;jan&#39;</span><span class=\"p\">),</span> <span class=\"mi\">2</span><span class=\"p\">:</span>_<span class=\"p\">(</span><span class=\"s1\">&#39;feb&#39;</span><span class=\"p\">),</span> <span class=\"mi\">3</span><span class=\"p\">:</span>_<span class=\"p\">(</span><span class=\"s1\">&#39;mar&#39;</span><span class=\"p\">),</span> <span class=\"mi\">4</span><span class=\"p\">:</span>_<span class=\"p\">(</span><span class=\"s1\">&#39;apr&#39;</span><span class=\"p\">),</span>\n    <span class=\"mi\">5</span><span class=\"p\">:</span>_<span class=\"p\">(</span><span class=\"s1\">&#39;may&#39;</span><span class=\"p\">),</span> <span class=\"mi\">6</span><span class=\"p\">:</span>_<span class=\"p\">(</span><span class=\"s1\">&#39;jun&#39;</span><span class=\"p\">),</span> <span class=\"mi\">7</span><span class=\"p\">:</span>_<span class=\"p\">(</span><span class=\"s1\">&#39;jul&#39;</span><span class=\"p\">),</span> <span class=\"mi\">8</span><span class=\"p\">:</span>_<span class=\"p\">(</span><span class=\"s1\">&#39;aug&#39;</span><span class=\"p\">),</span>\n    <span class=\"mi\">9</span><span class=\"p\">:</span>_<span class=\"p\">(</span><span class=\"s1\">&#39;sep&#39;</span><span class=\"p\">),</span> <span class=\"mi\">10</span><span class=\"p\">:</span>_<span class=\"p\">(</span><span class=\"s1\">&#39;oct&#39;</span><span class=\"p\">),</span> <span class=\"mi\">11</span><span class=\"p\">:</span>_<span class=\"p\">(</span><span class=\"s1\">&#39;nov&#39;</span><span class=\"p\">),</span> <span class=\"mi\">12</span><span class=\"p\">:</span>_<span class=\"p\">(</span><span class=\"s1\">&#39;dec&#39;</span><span class=\"p\">)</span>\n<span class=\"p\">}</span>\n</code></pre></div>\n</dd></dl>\n\n<dl class=\"py attribute\">\n<dt class=\"sig sig-object py\" id=\"django.forms.SelectDateWidget.empty_label\">\n<span class=\"sig-name descname\">empty_label</span><a class=\"heading-anchor\" href=\"#django.forms.SelectDateWidget.empty_label\"><span class=\"visually-hidden\">Link to this definition</span><span aria-hidden=\"true\">#</span></a></dt>\n<dd><p>If the <a class=\"reference internal\" href=\"/ja/4.0/ref/forms/fields/#django.forms.DateField\" title=\"django.forms.DateField\"><code class=\"xref py py-class docutils literal notranslate\">DateField</code></a> is not required,\n<a class=\"reference internal\" href=\"#django.forms.SelectDateWidget\" title=\"django.forms.SelectDateWidget\"><code class=\"xref py py-class docutils literal notranslate\">SelectDateWidget</code></a> will have an empty choice at the top of the\nlist (which is <code class=\"docutils literal notranslate\">---</code> by default). You can change the text of this\nlabel with the <code class=\"docutils literal notranslate\">empty_label</code> attribute. <code class=\"docutils literal notranslate\">empty_label</code> can be a\n<code class=\"docutils literal notranslate\">string</code>, <code class=\"docutils literal notranslate\">list</code>, or <code class=\"docutils literal notranslate\">tuple</code>. When a string is used, all select\nboxes will each have an empty choice with this label. If <code class=\"docutils literal notranslate\">empty_label</code>\nis a <code class=\"docutils literal notranslate\">list</code> or <code class=\"docutils literal notranslate\">tuple</code> of 3 string elements, the select boxes will\nhave their own custom label. The labels should be in this order\n<code class=\"docutils literal notranslate\">('year_label', 'month_label', 'day_label')</code>.</p>\n<div class=\"code-block\" data-language=\"python\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Python</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Python code\"><code><span class=\"c1\"># A custom empty label with string</span>\nfield1 <span class=\"o\">=</span> forms<span class=\"o\">.</span>DateField<span class=\"p\">(</span>widget<span class=\"o\">=</span>SelectDateWidget<span class=\"p\">(</span>empty_label<span class=\"o\">=</span><span class=\"s2\">&quot;Nothing&quot;</span><span class=\"p\">))</span>\n\n<span class=\"c1\"># A custom empty label with tuple</span>\nfield1 <span class=\"o\">=</span> forms<span class=\"o\">.</span>DateField<span class=\"p\">(</span>\n    widget<span class=\"o\">=</span>SelectDateWidget<span class=\"p\">(</span>\n        empty_label<span class=\"o\">=</span><span class=\"p\">(</span><span class=\"s2\">&quot;Choose Year&quot;</span><span class=\"p\">,</span> <span class=\"s2\">&quot;Choose Month&quot;</span><span class=\"p\">,</span> <span class=\"s2\">&quot;Choose Day&quot;</span><span class=\"p\">),</span>\n    <span class=\"p\">),</span>\n<span class=\"p\">)</span>\n</code></pre></div>\n</dd></dl>\n\n</dd></dl>\n\n</section>\n</section>\n</section>","rootId":"module-django.forms.widgets","toc":[{"title":"ウィジェットを指定する","anchor":"specifying-widgets","children":[]},{"title":"ウィジェットの引数を設定する","anchor":"setting-arguments-for-widgets","children":[]},{"title":"Select ウィジェットを継承したウィジェット","anchor":"widgets-inheriting-from-the-select-widget","children":[]},{"title":"ウィジェットのインスタンスをカスタマイズする","anchor":"customizing-widget-instances","children":[{"title":"ウィジェットのインスタンスにスタイルを設定する","anchor":"styling-widget-instances","children":[]},{"title":"ウィジェットのクラスにスタイルを設定する","anchor":"styling-widget-classes","children":[]}]},{"title":"ウィジェットの base クラス","anchor":"base-widget-classes","children":[{"title":"ウィジェット","anchor":"widget","children":[]},{"title":"MultiWidget","anchor":"multiwidget","children":[]}]},{"title":"ビルトインのウィジェット","anchor":"built-in-widgets","children":[{"title":"テキストの入力を扱うウィジェット","anchor":"widgets-handling-input-of-text","children":[{"title":"TextInput","anchor":"textinput","children":[]},{"title":"NumberInput","anchor":"numberinput","children":[]},{"title":"EmailInput","anchor":"emailinput","children":[]},{"title":"URLInput","anchor":"urlinput","children":[]},{"title":"PasswordInput","anchor":"passwordinput","children":[]},{"title":"HiddenInput","anchor":"hiddeninput","children":[]},{"title":"DateInput","anchor":"dateinput","children":[]},{"title":"DateTimeInput","anchor":"datetimeinput","children":[]},{"title":"TimeInput","anchor":"timeinput","children":[]},{"title":"Textarea","anchor":"textarea","children":[]}]},{"title":"セレクタおよびチェックボックスのウィジェット","anchor":"selector-and-checkbox-widgets","children":[{"title":"CheckboxInput","anchor":"checkboxinput","children":[]},{"title":"Select","anchor":"select","children":[]},{"title":"NullBooleanSelect","anchor":"nullbooleanselect","children":[]},{"title":"SelectMultiple","anchor":"selectmultiple","children":[]},{"title":"RadioSelect","anchor":"radioselect","children":[]},{"title":"CheckboxSelectMultiple","anchor":"checkboxselectmultiple","children":[]}]},{"title":"ファイルアップロード用ウィジェット","anchor":"file-upload-widgets","children":[{"title":"FileInput","anchor":"fileinput","children":[]},{"title":"ClearableFileInput","anchor":"clearablefileinput","children":[]}]},{"title":"複合ウィジェット","anchor":"composite-widgets","children":[{"title":"MultipleHiddenInput","anchor":"multiplehiddeninput","children":[]},{"title":"SplitDateTimeWidget","anchor":"splitdatetimewidget","children":[]},{"title":"SplitHiddenDateTimeWidget","anchor":"splithiddendatetimewidget","children":[]},{"title":"SelectDateWidget","anchor":"selectdatewidget","children":[]}]}]}],"breadcrumbs":[{"docname":"ref/index","title":"API Reference","url":"/ja/4.0/ref/"},{"docname":"ref/forms/index","title":"フォーム","url":"/ja/4.0/ref/forms/"}],"prev":{"docname":"ref/forms/renderers","title":"The form rendering API","url":"/ja/4.0/ref/forms/renderers/"},"next":{"docname":"ref/forms/validation","title":"フォームとフィールドの検証","url":"/ja/4.0/ref/forms/validation/"},"formats":{"html":"/ja/4.0/ref/forms/widgets/","markdown":"/ja/4.0/ref/forms/widgets.md","json":"/ja/4.0/ref/forms/widgets.json"},"source":"https://github.com/django/django/blob/stable/4.0.x/docs/ref/forms/widgets.txt","official":"https://docs.djangoproject.com/ja/4.0/ref/forms/widgets/","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","it","pt-br","ko","es","el","pl"]}