---
title: "Widgets"
version: 6.1
locale: sv
source: https://docs.djangoproject.com/sv/6.1/ref/forms/widgets/
canonical: https://djangodocs.dev/sv/6.1/ref/forms/widgets/
---
# Widgets
En widget är Djangos representation av ett HTML-inmatningselement. Widgeten hanterar rendering av HTML och extrahering av data från en GET/POST-ordbok som motsvarar widgeten.
Den HTML som genereras av de inbyggda widgetarna använder HTML5-syntax och riktar sig till ``. Exempelvis används booleska attribut som `checked` i stället för XHTML-stilen `checked='checked'`.
> **Tip**
>
> Widgets ska inte förväxlas med [formulärsfält](/sv/6.1/ref/forms/fields/). Formulärfält hanterar logiken för validering av indata och används direkt i mallar. Widgets hanterar rendering av HTML-formulärets inmatningselement på webbsidan och extrahering av inskickade rådata. Widgets behöver dock [assigned](#widget-to-field) till formulärfält.
## Ange widgetar
När du anger ett fält i ett formulär kommer Django att använda en standardwidget som är lämplig för den typ av data som ska visas. För att ta reda på vilken widget som används för vilket fält, se dokumentationen om [Inbyggda Field-klasser](/sv/6.1/ref/forms/fields/#built-in-fields).
Men om du vill använda en annan widget för ett fält kan du använda argumentet [`widget`](/sv/6.1/ref/forms/fields/#django.forms.Field.widget) i fältdefinitionen. Till exempel:
```
from django import forms
class CommentForm(forms.Form):
name = forms.CharField()
url = forms.URLField()
comment = forms.CharField(widget=forms.Textarea)
```
Detta skulle ange ett formulär med en kommentar som använder en större [`Textarea`](#django.forms.Textarea)-widget i stället för standardwidgeten [`TextInput`](#django.forms.TextInput).
## Ställa in argument för widgets
Många widgetar har valfria extra argument; de kan anges när widgeten definieras på fältet. I följande exempel anges attributet [`years`](#django.forms.SelectDateWidget.years) för en [`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,
)
```
Se inbyggda widgetar för mer information om vilka widgetar som finns tillgängliga och vilka argument de accepterar.
## Anpassa widgetinstanser
När Django renderar en widget som HTML, renderar den bara mycket minimal markup - Django lägger inte till klassnamn eller andra widgetspecifika attribut. Detta innebär till exempel att alla [`TextInput`](#django.forms.TextInput)-widgets kommer att se likadana ut på dina webbsidor.
Det finns två sätt att anpassa widgetar: [per widget instance](#styling-widget-instances) och [per widget class](#styling-widget-classes).
### Styling av widgetinstanser
Om du vill att en widgetinstans ska se annorlunda ut än en annan måste du ange ytterligare attribut när widgetobjektet instansieras och tilldelas ett formulärfält (och kanske lägga till några regler i dina CSS-filer).
Ta till exempel följande formulär:
```
from django import forms
class CommentForm(forms.Form):
name = forms.CharField()
url = forms.URLField()
comment = forms.CharField()
```
Detta formulär kommer att innehålla [`TextInput`](#django.forms.TextInput)-widgetar för namn- och kommentarsfälten, och en [`URLInput`](#django.forms.URLInput)-widget för url-fältet. Varje widget har standardrendering - ingen CSS-klass, inga extra attribut:
```pycon
>>> f = CommentForm(auto_id=False)
>>> print(f)
Name:
Url:
Comment:
```
På en riktig webbsida vill du förmodligen anpassa detta. Du kanske vill ha ett större inmatningselement för kommentaren, och du kanske vill att widgeten ”name” ska ha någon speciell CSS-klass. Det är också möjligt att ange attributet ’type’ för att använda en annan HTML5-ingångstyp. För att göra detta använder du argumentet [`Widget.attrs`](#django.forms.Widget.attrs) när du skapar widgeten:
```
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"}))
```
Du kan också ändra en widget i formulärdefinitionen:
```
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")
```
Om fältet inte deklareras direkt i formuläret (t.ex. fält i modellformulär) kan du använda attributet [`Form.fields`](/sv/6.1/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 kommer då att inkludera de extra attributen i den återgivna utdata:
```
>>> f = CommentForm(auto_id=False)
>>> print(f)
Name:
Url:
Comment:
```
Du kan också ställa in HTML `id` med hjälp av [`attrs`](#django.forms.Widget.attrs). Se [`BoundField.id_for_label`](/sv/6.1/ref/forms/api/#django.forms.BoundField.id_for_label) för ett exempel.
### Styling av widgetklasser
Med widgets är det möjligt att lägga till tillgångar (`css` och `javascript`) och mer djupgående anpassa deras utseende och beteende.
I ett nötskal måste du underklassa widgeten och antingen [definiera en ”Media” inre klass](/sv/6.1/topics/forms/media/#assets-as-a-static-definition) eller [skapa en ”media” egenskap](/sv/6.1/topics/forms/media/#dynamic-property).
Dessa metoder kräver lite avancerad Python-programmering och beskrivs i detalj i ämnesguiden [Form Assets](/sv/6.1/topics/forms/media/).
## Klasser för baswidgetar
Baswidgetklasserna [`Widget`](#django.forms.Widget) och [`MultiWidget`](#django.forms.MultiWidget) är underklasser till alla [inbyggda widgetar](#built-in-widgets) och kan fungera som en grund för anpassade widgetar.
### `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`
En ordlista som innehåller HTML-attribut som ska ställas in på den renderade widgeten.
```pycon
>>> from django import forms
>>> name = forms.TextInput(attrs={"size": 10, "title": "Your name"})
>>> name.render("name", "A name")
''
```
Om du tilldelar ett värde av `True` eller `False` till ett attribut, kommer det att återges som ett HTML5 booleskt attribut:
```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`
Ett attribut som har standardvärdet `True`. Om det sätts till `False` kommer mikrosekunderna i värdena [`datetime`](https://docs.python.org/3/library/datetime.html#datetime.datetime) och [`time`](https://docs.python.org/3/library/datetime.html#datetime.time) att sättas till `0`.
#### `format_value(value)`
Rensar och returnerar ett värde för användning i widgetmallen. `värde` garanteras inte vara giltig indata, därför bör implementeringar av underklasser programmeras defensivt.
#### `get_context(name, value, attrs)`
Returnerar en ordbok med värden som ska användas vid rendering av widgetmallen. Som standard innehåller ordboken en enda nyckel, `'widget'`, som är en ordboksrepresentation av widgeten som innehåller följande nycklar:
- `'namn'`: Namnet på fältet från argumentet `name`.
- `'is_hidden'`: En boolean som anger om denna widget är dold eller inte.
- `'required'`: En boolean som anger om fältet för den här widgeten är obligatoriskt eller inte.
- `'värde'`: Det värde som returneras av [`format_value()`](#django.forms.Widget.format_value).
- `'attrs'`: HTML-attribut som ska ställas in på den renderade widgeten. Kombinationen av attributet [`attrs`](#django.forms.Widget.attrs) och argumentet `attrs`.
- `'template_name'`: Värdet av `self.template_name`.
underklasser till `Widget` kan tillhandahålla anpassade kontextvärden genom att åsidosätta denna metod.
#### `id_for_label(id_)`
Returnerar HTML ID-attributet för denna widget för användning av en `