--- title: "ウィジェット" version: 4.2 locale: ja source: https://docs.djangoproject.com/ja/4.2/ref/forms/widgets/ canonical: https://djangodocs.dev/ja/4.2/ref/forms/widgets/ --- # ウィジェット ウィジェットは、Django が HTML の input 要素の表現方法です。ウィジェットは、HTML のレンダリングをコントロールして、ウィジェットに合致する GET/POST ディクショナリからデータを取り出します。 Built-in widgets によって作られる HTML は、`` を対象とした HTML5 シンタックスを使います。例えば、XHTML スタイルである `checked='checked'` よりも、`checked` といった boolean 属性を使います。 > **Tip** > > ウィジェットを [form fields](/ja/4.2/ref/forms/fields/) と混同しないでください。フォームフィールドは入力値の検証ロジックを扱い、テンプレート内で直接使用されます。ウィジェットはウェブページ上で input 要素から HTML の form をレンダリングし、submit された生データを取り出します。ウィジェットはフォームフィールドにアサイン ([assigned](#widget-to-field)) される必要があります。 ## ウィジェットを指定する フォーム上でフィールドを指定したときは、Django は描画されるデータのタイプに適したデフォルトのウィジェットを使用します。各フィールドで使われるウィジェットを調べるためには、 [ビルトインの Field クラス](/ja/4.2/ref/forms/fields/#built-in-fields) をご覧ください。 However, if you want to use a different widget for a field, you can use the [`widget`](/ja/4.2/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: ``` On a real web page, you probably don't want every widget to look the same. You might want a larger input element for the comment, and you might want the 'name' widget to have some special CSS class. It is also possible to specify the 'type' attribute to take advantage of the new HTML5 input types. To do this, you use the [`Widget.attrs`](#django.forms.Widget.attrs) argument when creating the widget: ``` 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/4.2/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/4.2/ref/forms/api/#django.forms.BoundField.id_for_label) で例をご覧ください。 ### ウィジェットのクラスにスタイルを設定する ウィジェットとともに、アセット (`css` や `javascript`) 、およびより詳細にカスタマイズされた見た目や動作を追加することができます。 要するに、ウィジェットをサブクラス化して、 ["Media" 内部クラスの定義](/ja/4.2/topics/forms/media/#assets-as-a-static-definition) か ["media" プロパティの作成](/ja/4.2/topics/forms/media/#dynamic-property) のどちらかをする必要があります。 これらのメソッドにはやや高度なPythonプログラミングが含まれており、トピックガイド [Form Assets](/ja/4.2/topics/forms/media/) で詳しく説明しています。 ## ウィジェットの base クラス [`Widget`](#django.forms.Widget) や [`MultiWidget`](#django.forms.MultiWidget) といった基本ウィジェットは、[ビルトインのウィジェット](#built-in-widgets) によってサブクラス化され、カスタムウィジェットのための基礎となります。 ### `ウィジェット` #### `class Widget(attrs=None)` この抽象クラスはレンダリングできませんが、基本的な属性 [`attrs`](#django.forms.Widget.attrs) を提供します。カスタムウィジェット上で [`render()`](#django.forms.Widget.render) を実行するかオーバーライドできます。 #### `attrs` ディクショナリは、レンダリングされたウィジェット上にセットされる HTML の属性を含んでいます。 ```pycon >>> from django import forms >>> name = forms.TextInput(attrs={"size": 10, "title": "Your name"}) >>> name.render("name", "A name") '' ``` If you assign a value of `True` or `False` to an attribute, it will be rendered as an HTML5 boolean attribute: ```pycon >>> 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_)` Returns the HTML ID attribute of this widget for use by a `