--- title: "Widget" version: 5.2 locale: id source: https://docs.djangoproject.com/id/5.2/ref/forms/widgets/ canonical: https://djangodocs.dev/id/5.2/ref/forms/widgets/ --- # Widget A widget is Django's representation of an HTML input element. The widget handles the rendering of the HTML, and the extraction of data from a GET/POST dictionary that corresponds to the widget. The HTML generated by the built-in widgets uses HTML5 syntax, targeting ``. For example, it uses boolean attributes such as `checked` rather than the XHTML style of `checked='checked'`. > **Tip** > > Widgets should not be confused with the [form fields](/id/5.2/ref/forms/fields/). > Form fields deal with the logic of input validation and are used directly > in templates. Widgets deal with rendering of HTML form input elements on > the web page and extraction of raw submitted data. However, widgets do > need to be [assigned](#widget-to-field) to form fields. ## Menentukan widget Whenever you specify a field on a form, Django will use a default widget that is appropriate to the type of data that is to be displayed. To find which widget is used on which field, see the documentation about [KelaS-kelas Field siap-pakai](/id/5.2/ref/forms/fields/#built-in-fields). However, if you want to use a different widget for a field, you can use the [`widget`](/id/5.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) ``` Ini akan menentukan formulir dengan komentar yang menggunakan widget [`Textarea`](#django.forms.Textarea) terbesar, daripada widget [`TextInput`](#django.forms.TextInput) awal. ## Mengatur argumen untuk widget Many widgets have optional extra arguments; they can be set when defining the widget on the field. In the following example, the [`years`](#django.forms.SelectDateWidget.years) attribute is set for a [`SelectDateWidget`](#django.forms.SelectDateWidget): ``` 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, ) ``` Lihat [Widget pasang tetap](#built-in-widgets) untuk informasi lebih tentang widget-widget mana tersedia dan argumen mana mereka terima. ## Widget warisan dari widget `Select` Widgets inheriting from the [`Select`](#django.forms.Select) widget deal with choices. They present the user with a list of options to choose from. The different widgets present this choice differently; the [`Select`](#django.forms.Select) widget itself uses a `
Url:
Comment:
``` On a real web page, you probably want to customize this. 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 use a different HTML5 input type. 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"})) ``` Anda dapat juga merubah widget dalam pengertian formulir: ``` 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") ``` Atau jika bidang tidak dinyatakan langsung pada formulir (seperti bidang formulir model), anda dapat menggunakan atribut [`Form.fields`](/id/5.2/ref/forms/api/#django.forms.Form.fields): ``` 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 kemudian akan menyertakan atribut tambahan dalam keluaran dibangun: ``` >>> f = CommentForm(auto_id=False) >>> print(f)
Name:
Url:
Comment:
``` Anda dapat juga mensetel `id` HTML menggunakan [`attrs`](#django.forms.Widget.attrs). Lihat [`BoundField.id_for_label`](/id/5.2/ref/forms/api/#django.forms.BoundField.id_for_label) sebagai contoh. ### Menggayakan kelas widget Dengan widget, itu memungkinkan menambahkan assets (`css` dan `javascript`) dan lebih mendalam menyesuaikan penampilan dan perilaku mereka. In a nutshell, you will need to subclass the widget and either [define a "Media" inner class](/id/5.2/topics/forms/media/#assets-as-a-static-definition) or [create a "media" property](/id/5.2/topics/forms/media/#dynamic-property). These methods involve somewhat advanced Python programming and are described in detail in the [Form Assets](/id/5.2/topics/forms/media/) topic guide. ## Kelas-kelas widget dasar Base widget classes [`Widget`](#django.forms.Widget) and [`MultiWidget`](#django.forms.MultiWidget) are subclassed by all the [built-in widgets](#built-in-widgets) and may serve as a foundation for custom widgets. ### `Widget` #### `class Widget(attrs=None)` This abstract class cannot be rendered, but provides the basic attribute [`attrs`](#django.forms.Widget.attrs). You may also implement or override the [`render()`](#django.forms.Widget.render) method on custom widgets. #### `attrs` Sebuah dictionary mengandung atribut HTML untuk disetel pada widget dibangun. ```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` Sebuah atribut yang awalan menjadi `True`. Jika disetel menjadi `False`, mikrodetik bagian dari nilai-nilai [`datetime`](https://docs.python.org/3/library/datetime.html#datetime.datetime) dan [`time`](https://docs.python.org/3/library/datetime.html#datetime.time) akan disetel menjadi `0`. #### `format_value(value)` Cleans and returns a value for use in the widget template. `value` isn't guaranteed to be valid input, therefore subclass implementations should program defensively. #### `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'`: Nama dari bidang dari argumen `name`. - `'is_hidden'`: Sebuah boolean menunjukkan apakah atau tidak widget ini tersembunyi. - `'required'`: Sebuah boolean menunjukkan apakah atau tidak bidang untuk widget ini diwajibkan. - `'value'`: Nilai seperti dikembalikan oleh [`format_value()`](#django.forms.Widget.format_value). - `'attrs'`: Atribut-atribut HTML untuk disetel pada widget dibangun. Perpaduan dari atribut [`attrs`](#django.forms.Widget.attrs) dan argumen `attrs`. - `'template_name'`: Nilai dari `self.template_name`. Subkelas-subkelas `Widget` dapat menyediakan penyesuaian nilai konteks dengan menimpa metode ini. #### `id_for_label(id_)` Returns the HTML ID attribute of this widget for use by a `