Django forms fields widgets 사용 예제

항상 하는데 항상 헷갈려

Fields 와 Widget 은 궁합이 있는데 쌍으로 움직여야 제대로 나온다.


아래 코드로 나온 모양들이다. 여러가지 위젯이 쓰이고 있다.

class FirmwareUpdateForm(BSModalModelForm):
    is_fileinclue = "enctype=multipart/form-data"
    title = ""

    class Meta:
        model = Firmware
        fields = ["company", "desc", "dtype", "content", "filename", "version", "publish", "channelfw_type", "date_release", "products"]
        labels = {
            "company": _("*회사명"),
            "desc": _("설명"),
            "dtype": _("타입"),
            "filename": _("파일명"),
            "content": _("파일"),
        }
        widgets = {
            "company": forms.Select(attrs={"class": "form-select"}),
            "desc": forms.TextInput(attrs={"class": "form-control", "placeholder": "설명"}),
            "dtype": forms.Select(attrs={"class": "form-select", "placeholder": "타입"}),
            "filename": forms.TextInput(attrs={"class": "form-control", "placeholder": "읽기전용-자동입력됩니다", "readonly": "readonly"}),
            # "content": forms.FileInput(attrs={"class": "form-control", "placeholder": "첨부파일"}),
            "version": forms.TextInput(attrs={"class": "form-control"}),
            "publish": forms.CheckboxInput(attrs={"class": "form-check"}),
            "channelfw_type": forms.Select(attrs={"class": "form-select"}),
            "date_release": forms.DateTimeInput(attrs={"type": "datetime-local", "class": "form-control"}),
            "products": forms.SelectMultiple(attrs={"class": "form-control"}),
        }

특히, 날짜 시간 입력 받는 부분을 참고해두고 나중에 활용하자.

type을 datetime-local 이런게 있는줄 몰랐네

보통 date 는 많이 썼는데,

“date_release”: forms.DateTimeInput(attrs={“type”: “datetime-local”, “class”: “form-control”})

참고한 사이트는 여기 https://www.letscodemore.com/blog/how-to-add-date-input-widget-in-django-forms/

실제 자세한 내용은 당연하게도 공식 사이트로

https://docs.djangoproject.com/en/4.1/ref/forms/widgets/

• Widgets handling input of text
  TextInput
  NumberInput
  EmailInput
  URLInput
  PasswordInput
  HiddenInput
  DateInput
  DateTimeInput
  TimeInput
  Textarea
• Selector and checkbox widgets
  CheckboxInput
  Select
  NullBooleanSelect
  SelectMultiple
  RadioSelect
  CheckboxSelectMultiple
• File upload widgets
  FileInput
  ClearableFileInput
• Composite widgets
  MultipleHiddenInput
  SplitDateTimeWidget
  SplitHiddenDateTimeWidget
  SelectDateWidget

이름만 알아도 머 상상은 쉽게 되니깐

Django forms fields 와 헷갈리면 안된다. 필드의 속성을 정의하는 fields 도 맞춰서 잘 써야 한다.

https://docs.djangoproject.com/en/4.1/ref/forms/fields/

맵핑 테이블을 아래와 같이 정리해둔 곳이 있네, 이 테이블을 보는게 편하겠다.

https://www.letscodemore.com/blog/how-to-add-date-input-widget-in-django-forms/

| Name | Class | HTML Input | |---|---|---| | [BooleanField](https://www.geeksforgeeks.org/booleanfield-django-forms/) | class BooleanField(\*\*kwargs) | CheckboxInput | | [CharField](https://www.geeksforgeeks.org/charfield-django-forms/) | class CharField(\*\*kwargs) | TextInput | | [ChoiceField](https://www.geeksforgeeks.org/choicefield-django-forms/) | class ChoiceField(\*\*kwargs) | Select | | [TypedChoiceField](https://www.geeksforgeeks.org/typedchoicefield-django-forms/) | class TypedChoiceField(\*\*kwargs) | Select | | [DateField](https://www.geeksforgeeks.org/datefield-django-forms/) | class DateField(\*\*kwargs) | DateInput | | [DateTimeField](https://www.geeksforgeeks.org/datetimefield-django-forms/) | class DateTimeField(\*\*kwargs) | DateTimeInput | | [DecimalField](https://www.geeksforgeeks.org/decimalfield-django-forms/) | class DecimalField(\*\*kwargs) | NumberInput when Field.localize is False, else TextInput | | [DurationField](https://www.geeksforgeeks.org/durationfield-django-forms/) | class DurationField(\*\*kwargs) | TextInput | | [EmailField](https://www.geeksforgeeks.org/emailfield-django-forms/) | class EmailField(\*\*kwargs | EmailInput | | [FileField](https://www.geeksforgeeks.org/filefield-django-forms/) | class FileField(\*\*kwargs) | ClearableFileInput | | [FilePathField](https://www.geeksforgeeks.org/filepathfield-django-forms/) | class FilePathField(\*\*kwargs) | Select | | [FloatField](https://www.geeksforgeeks.org/floatfield-django-forms/) | class FloatField(\*\*kwargs) | NumberInput when Field.localize is False, else TextInput | | [ImageField](https://www.geeksforgeeks.org/imagefield-django-forms/) | class ImageField(\*\*kwargs) | ClearableFileInput | | [IntegerField](https://www.geeksforgeeks.org/integerfield-django-forms/) | class IntegerField(\*\*kwargs) | NumberInput when Field.localize is False, else TextInput | | [GenericIPAddressField](https://www.geeksforgeeks.org/genericipaddressfield-django-forms/) | class GenericIPAddressField(\*\*kwargs) | TextInput | | [MultipleChoiceField](https://www.geeksforgeeks.org/multiplechoicefield-django-forms/) | class MultipleChoiceField(\*\*kwargs) | SelectMultiple | | [TypedMultipleChoiceField](https://www.geeksforgeeks.org/typedmultiplechoicefield-django-forms/) | class TypedMultipleChoiceField(\*\*kwargs) | SelectMultiple | | [NullBooleanField](https://www.geeksforgeeks.org/nullbooleanfield-django-forms/) | class NullBooleanField(\*\*kwargs) | NullBooleanSelect | | [RegexField](https://www.geeksforgeeks.org/regexfield-django-forms/) | class RegexField(\*\*kwargs) | TextInput | | [SlugField](https://www.geeksforgeeks.org/slugfield-django-models/) | class SlugField(\*\*kwargs) | TextInput | | [TimeField](https://www.geeksforgeeks.org/timefield-django-forms/) | class TimeField(\*\*kwargs) | TimeInput | | [URLField](https://www.geeksforgeeks.org/urlfield-django-forms/) | class URLField(\*\*kwargs) | URLInput | | [UUIDField](https://www.geeksforgeeks.org/uuidfield-django-forms/) | class UUIDField(\*\*kwargs) | TextInput |