django widgets总结

一、model可以定义的基本类型

 

from django.db import models

class ExampleModel(models.Model):
    # CharField
    name = models.CharField(max_length=100)  # Default: TextInput
    
    # TextField
    description = models.TextField()  # Default: Textarea
    
    # Integer fields
    age = models.IntegerField()  # Default: NumberInput
    price = models.DecimalField(max_digits=10, decimal_places=2)  # Default: NumberInput
    percentage = models.FloatField()  # Default: NumberInput
    
    # Boolean fields
    is_active = models.BooleanField(default=True)  # Default: CheckboxInput
    is_verified = models.BooleanField(null=True)  # Default: NullBooleanSelect
    
    # Date/Time fields
    created_date = models.DateField()  # Default: DateInput
    created_time = models.TimeField()  # Default: TimeInput
    created_datetime = models.DateTimeField()  # Default: DateTimeInput
    
    # File fields
    document = models.FileField(upload_to='documents/')  # Default: ClearableFileInput
    image = models.ImageField(upload_to='images/')  # Default: ClearableFileInput
    
    # Email/URL fields
    email = models.EmailField()  # Default: EmailInput
    website = models.URLField()  # Default: URLInput
    
    # Choice fields
    STATUS_CHOICES = [
        ('draft', 'Draft'),
        ('published', 'Published'),
        ('archived', 'Archived'),
    ]
    status = models.CharField(max_length=20, choices=STATUS_CHOICES)  # Default: Select

 

 

二、model的关系类型

class Category(models.Model):
    name = models.CharField(max_length=100)

class Author(models.Model):
    name = models.CharField(max_length=100)

class Book(models.Model):
    # ForeignKey (many-to-one)
    author = models.ForeignKey(Author, on_delete=models.CASCADE)  # Default: Select
    
    # ManyToManyField
    categories = models.ManyToManyField(Category)  # Default: SelectMultiple
    
    # OneToOneField
    metadata = models.OneToOneField('BookMetadata', on_delete=models.CASCADE)  # Default: Select

 

三、form field的类型

from django import forms

class ExampleForm(forms.Form):
    # Text fields
    char_field = forms.CharField()  # TextInput
    text_field = forms.CharField(widget=forms.Textarea)  # Explicit Textarea
    
    # Numeric fields
    integer_field = forms.IntegerField()  # NumberInput
    decimal_field = forms.DecimalField()  # NumberInput
    float_field = forms.FloatField()  # NumberInput
    
    # Boolean fields
    boolean_field = forms.BooleanField()  # CheckboxInput
    null_boolean_field = forms.NullBooleanField()  # NullBooleanSelect
    
    # Date/Time fields
    date_field = forms.DateField()  # DateInput
    time_field = forms.TimeField()  # TimeInput
    datetime_field = forms.DateTimeField()  # DateTimeInput
    duration_field = forms.DurationField()  # TextInput
    
    # File fields
    file_field = forms.FileField()  # ClearableFileInput
    image_field = forms.ImageField()  # ClearableFileInput
    file_path_field = forms.FilePathField(path='/path/to/files')  # Select
    
    # Specialized fields
    email_field = forms.EmailField()  # EmailInput
    url_field = forms.URLField()  # URLInput
    slug_field = forms.SlugField()  # TextInput
    ip_field = forms.GenericIPAddressField()  # TextInput

 

四、选择相关的类型

class ChoiceForm(forms.Form):
    CHOICES = [
        ('option1', 'Option 1'),
        ('option2', 'Option 2'),
        ('option3', 'Option 3'),
    ]
    
    # Single choice
    choice_field = forms.ChoiceField(choices=CHOICES)  # Select
    typed_choice_field = forms.TypedChoiceField(choices=CHOICES)  # Select
    
    # Multiple choice
    multiple_choice_field = forms.MultipleChoiceField(choices=CHOICES)  # SelectMultiple
    typed_multiple_choice_field = forms.TypedMultipleChoiceField(choices=CHOICES)  # SelectMultiple
    
    # Model choice fields
    model_choice_field = forms.ModelChoiceField(queryset=Category.objects.all())  # Select
    model_multiple_choice_field = forms.ModelMultipleChoiceField(
        queryset=Category.objects.all()
    )  # SelectMultiple

五、类型对应的widget和可更换的widget

Field Type	Default Widget	Common Alternative Widgets
CharField	TextInput	Textarea, PasswordInput
TextField	Textarea	TextInput
IntegerField	NumberInput	TextInput
DecimalField	NumberInput	TextInput
FloatField	NumberInput	TextInput
BooleanField	CheckboxInput	-
NullBooleanField	NullBooleanSelect	Select
DateField	DateInput	SelectDateWidget
TimeField	TimeInput	TextInput
DateTimeField	DateTimeInput	SplitDateTimeWidget
EmailField	EmailInput	TextInput
URLField	URLInput	TextInput
FileField	ClearableFileInput	FileInput
ImageField	ClearableFileInput	FileInput
FilePathField	Select	RadioSelect
ChoiceField	Select	RadioSelect, SelectMultiple
MultipleChoiceField	SelectMultiple	CheckboxSelectMultiple
ModelChoiceField	Select	RadioSelect
ModelMultipleChoiceField	SelectMultiple	CheckboxSelectMultiple
ForeignKey	Select	RadioSelect
ManyToManyField	SelectMultiple	CheckboxSelectMultiple

 

六、覆盖和更换默认的widget

from django import forms
from django.db import models

class CustomModel(models.Model):
    name = models.CharField(max_length=100)
    priority = models.IntegerField()
    notes = models.TextField()

class CustomModelForm(forms.ModelForm):
    class Meta:
        model = CustomModel
        fields = '__all__'
        widgets = {
            'name': forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Enter name'}),
            'priority': forms.NumberInput(attrs={'class': 'form-control', 'min': 1, 'max': 10}),
            'notes': forms.Textarea(attrs={'class': 'form-control', 'rows': 4}),
        }

 

七、choice的widget更换

 

class CustomChoiceForm(forms.Form):
    # Radio buttons instead of select
    choice_radio = forms.ChoiceField(
        choices=[('a', 'A'), ('b', 'B'), ('c', 'C')],
        widget=forms.RadioSelect
    )
    
    # Checkboxes instead of multi-select
    multiple_checkbox = forms.MultipleChoiceField(
        choices=[('x', 'X'), ('y', 'Y'), ('z', 'Z')],
        widget=forms.CheckboxSelectMultiple
    )
    
    # Custom select with attributes
    custom_select = forms.ChoiceField(
        choices=[('1', 'One'), ('2', 'Two')],
        widget=forms.Select(attrs={'class': 'custom-select'})
    )

 

 八、date的widget更换

class DateTimeForm(forms.Form):
    # Split datetime widget
    event_datetime = forms.DateTimeField(
        widget=forms.SplitDateTimeWidget(
            date_attrs={'class': 'date-input'},
            time_attrs={'class': 'time-input'}
        )
    )
    
    # Select date widget
    birth_date = forms.DateField(
        widget=forms.SelectDateWidget(
            years=range(1900, 2024),
            attrs={'class': 'form-control'}
        )
    )

 

 九 、file的widget更换

class FileUploadForm(forms.Form):
    # Simple file input without clear checkbox
    document = forms.FileField(
        widget=forms.FileInput(attrs={'accept': '.pdf,.doc,.docx'})
    )
    
    # Custom clearable file input
    image = forms.ImageField(
        widget=forms.ClearableFileInput(attrs={'class': 'file-input'})
    )

 

十、modelform的自动根据fieldtype,匹配相应的widget

class AutoForm(forms.ModelForm):
    class Meta:
        model = CustomModel
        fields = '__all__'
        
    # Equivalent to:
    # name = forms.CharField(max_length=100, widget=forms.TextInput)
    # priority = forms.IntegerField(widget=forms.NumberInput)
    # notes = forms.CharField(widget=forms.Textarea)

 

 

 十一、wigets属性总结

# Common widget attributes
attrs = {
    'class': 'form-control',          # CSS classes
    'placeholder': 'Enter value',     # Placeholder text
    'readonly': 'readonly',           # Read-only
    'disabled': 'disabled',           # Disabled
    'size': 50,                       # Size attribute
    'maxlength': 100,                 # Max length
    'rows': 4,                        # For textareas
    'cols': 50,                       # For textareas
    'accept': '.jpg,.png',            # For file inputs
    'multiple': 'multiple',           # For multiple file inputs
}