--- title: "ウィジェット" version: 3.1 locale: ja source: https://docs.djangoproject.com/ja/3.1/ref/forms/widgets/ canonical: https://djangodocs.dev/ja/3.1/ref/forms/widgets/ --- # ウィジェット ウィジェットは、Django が HTML の input 要素の表現方法です。ウィジェットは、HTML のレンダリングをコントロールして、ウィジェットに合致する GET/POST ディクショナリからデータを取り出します。 Built-in widgets によって作られる HTML は、`` を対象とした HTML5 シンタックスを使います。例えば、XHTML スタイルである `checked='checked'` よりも、`checked` といった boolean 属性を使います。 > **Tip** > > ウィジェットを [form fields](/ja/3.1/ref/forms/fields/) と混同しないでください。フォームフィールドは入力値の検証ロジックを扱い、テンプレート内で直接使用されます。ウィジェットはウェブページ上で input 要素から HTML の form をレンダリングし、submit された生データを取り出します。ウィジェットはフォームフィールドにアサイン ([assigned](#widget-to-field)) される必要があります。 ## ウィジェットを指定する フォーム上でフィールドを指定したときは、Django は描画されるデータのタイプに適したデフォルトのウィジェットを使用します。各フィールドで使われるウィジェットを調べるためには、 [ビルトインの Field クラス](/ja/3.1/ref/forms/fields/#built-in-fields) をご覧ください。 However, if you want to use a different widget for a field, you can use the [`widget`](/ja/3.1/ref/forms/fields/#django.forms.Field.widget) argument on the field definition. For example: ``` from django import forms class CommentForm(forms.Form): name = forms.CharField() url = forms.URLField() comment = forms.CharField(widget=forms.Textarea) ``` これは、comment のフォームに対して、デフォルトの [`TextInput`](#django.forms.TextInput) ウィジェットではなく、より大きなサイズの [`Textarea`](#django.forms.Textarea) ウィジェットを指定しています。 ## ウィジェットの引数を設定する 多くのウィジェットは、省略可能な追加の引数を持っています; これらは、フィールド上でウィジェットを定義する際にセットできます。以下の例では、[`SelectDateWidget`](#django.forms.SelectDateWidget) に対して [`years`](#django.forms.SelectDateWidget.years) 属性がセットされます: ``` from django import forms BIRTH_YEAR_CHOICES = ['1980', '1981', '1982'] FAVORITE_COLORS_CHOICES = [ ('blue', 'Blue'), ('green', 'Green'), ('black', 'Black'), ] class SimpleForm(forms.Form): birth_year = forms.DateField(widget=forms.SelectDateWidget(years=BIRTH_YEAR_CHOICES)) favorite_colors = forms.MultipleChoiceField( required=False, widget=forms.CheckboxSelectMultiple, choices=FAVORITE_COLORS_CHOICES, ) ``` 使用可能なウィジェットとそれぞれの引数の詳細については、[ビルトインのウィジェット](#built-in-widgets) をご覧ください。 ## `Select` ウィジェットを継承したウィジェット [`Select`](#django.forms.Select) ウィジェットを継承したウィジェットは、選択肢を扱います。これらはユーザーに選択肢のリストを提示します。提示される選択肢はウィジェットによって異なります; [`Select`](#django.forms.Select) ウィジェット自体は、` Url: Comment: ``` 実際のウェブページでは、全てのウィジェットを同じ見た目にしたいことはあまりありません。コメントに対しては大きめの input 要素にしたいでしょうし、'名前' のウィジェットには特別な CSS クラスを適用したいでしょう。新しい HTML5 の input のタイプを利用するために、'type' 属性を指定することも可能です。これらを実現するためには、ウィジェットを作成するときに [`Widget.attrs`](#django.forms.Widget.attrs) 引数を使います: ``` class CommentForm(forms.Form): name = forms.CharField(widget=forms.TextInput(attrs={'class': 'special'})) url = forms.URLField() comment = forms.CharField(widget=forms.TextInput(attrs={'size': '40'})) ``` You can also modify a widget in the form definition: ``` class CommentForm(forms.Form): name = forms.CharField() url = forms.URLField() comment = forms.CharField() name.widget.attrs.update({'class': 'special'}) comment.widget.attrs.update(size='40') ``` Or if the field isn't declared directly on the form (such as model form fields), you can use the [`Form.fields`](/ja/3.1/ref/forms/api/#django.forms.Form.fields) attribute: ``` class CommentForm(forms.ModelForm): def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) self.fields['name'].widget.attrs.update({'class': 'special'}) self.fields['comment'].widget.attrs.update(size='40') ``` Django はこれで、レンダリングされたアウトプットに、追加的な要素を含むようになります: ``` >>> f = CommentForm(auto_id=False) >>> f.as_table() Name: Url: Comment: ``` [`attrs`](#django.forms.Widget.attrs) を使った HTML の `id` をセットすることもできます。[`BoundField.id_for_label`](/ja/3.1/ref/forms/api/#django.forms.BoundField.id_for_label) で例をご覧ください。 ### ウィジェットのクラスにスタイルを設定する ウィジェットとともに、アセット (`css` や `javascript`) 、およびより詳細にカスタマイズされた見た目や動作を追加することができます。 要するに、ウィジェットをサブクラス化して、 ["Media" 内部クラスの定義](/ja/3.1/topics/forms/media/#assets-as-a-static-definition) か ["media" プロパティの作成](/ja/3.1/topics/forms/media/#dynamic-property) のどちらかをする必要があります。 これらのメソッドにはやや高度なPythonプログラミングが含まれており、トピックガイド [Form Assets](/ja/3.1/topics/forms/media/) で詳しく説明しています。 ## ウィジェットの base クラス [`Widget`](#django.forms.Widget) や [`MultiWidget`](#django.forms.MultiWidget) といった基本ウィジェットは、[ビルトインのウィジェット](#built-in-widgets) によってサブクラス化され、カスタムウィジェットのための基礎となります。 ### `ウィジェット` #### `class Widget(attrs=None)` この抽象クラスはレンダリングできませんが、基本的な属性 `render()` を実行するかオーバーライドできます。 #### `attrs` ディクショナリは、レンダリングされたウィジェット上にセットされる HTML の属性を含んでいます。 ```pycon >>> from django import forms >>> name = forms.TextInput(attrs={'size': 10, 'title': 'Your name'}) >>> name.render('name', 'A name') '' ``` `True` か `False` の値を割り当てた場合は、HTML5 の ブール属性としてレンダリングされます。 ``` >>> name = forms.TextInput(attrs={'required': True}) >>> name.render('name', 'A name') '' >>> >>> name = forms.TextInput(attrs={'required': False}) >>> name.render('name', 'A name') '' ``` #### `supports_microseconds` `True` をデフォルト値にする属性です。`False` にセットされた場合は、[`datetime`](https://docs.python.org/3/library/datetime.html#datetime.datetime) と [`time`](https://docs.python.org/3/library/datetime.html#datetime.time) のマイクロ秒の部分の値は、`0` にセットされます。 #### `format_value(value)` ウィジェットのテンプレートで使うための値を整えて返します。`value` は入力値が検証されるとは限りません。そのため、サブクラスの実行は防衛的にプログラムされなければなりません。 #### `get_context(name, value, attrs)` Returns a dictionary of values to use when rendering the widget template. By default, the dictionary contains a single key, `'widget'`, which is a dictionary representation of the widget containing the following keys: - `'name'`: The name of the field from the `name` argument. - `'is_hidden'`: A boolean indicating whether or not this widget is hidden. - `'required'`: A boolean indicating whether or not the field for this widget is required. - `'value'`: The value as returned by [`format_value()`](#django.forms.Widget.format_value). - `'attrs'`: HTML attributes to be set on the rendered widget. The combination of the [`attrs`](#django.forms.Widget.attrs) attribute and the `attrs` argument. - `'template_name'`: The value of `self.template_name`. `Widget` subclasses can provide custom context values by overriding this method. #### `id_for_label(id_)` このウィジェットのフィールドの ID が付与された `