Bagaimanakah Saya Boleh Menggayakan Borang Django dengan Berkesan dengan CSS?

Menggayakan Borang Django dengan CSS

Apabila bekerja dengan borang Django, selalunya perlu menyesuaikan penampilannya menggunakan CSS. Ini boleh dicapai dengan memberikan kelas atau ID kepada elemen borang tertentu, membolehkan anda menyasarkannya dan menggunakan gaya sewajarnya.

Pertimbangkan borang Django berikut yang ditakrifkan dalam forms.py:

class ContactForm(forms.Form):
    subject = forms.CharField(max_length=100)
    email = forms.EmailField(required=False)
    message = forms.CharField(widget=forms.Textarea)

Dan templat HTMLnya dalam contact_form.html:

{{ form.as_table }}

Untuk menggayakan elemen borang ini, anda boleh mengubah suai borang Django kelas untuk memasukkan atribut widget tersuai. Terdapat beberapa kaedah untuk mencapai ini:

Kaedah 1:

# forms.py
class ContactForm(forms.Form):
    subject = forms.CharField(widget=forms.TextInput(attrs={'class': 'subject'}))
    email = forms.EmailField(widget=forms.TextInput(attrs={'class': 'email'}))
    message = forms.CharField(widget=forms.Textarea(attrs={'class': 'message'}))

Kaedah 2:

# forms.py
class ContactForm(forms.ModelForm):
    class Meta:
        model = MyModel

    def __init__(self, *args, **kwargs):
        super(ContactForm, self).__init__(*args, **kwargs)
        self.fields['subject'].widget.attrs.update({'class': 'subject'})
        self.fields['email'].widget.attrs.update({'class': 'email'})
        self.fields['message'].widget.attrs.update({'class': 'message'})

Kaedah 3:

# forms.py
class ContactForm(forms.ModelForm):
    class Meta:
        model = MyModel
        widgets = {
            'subject': forms.TextInput(attrs={'class': 'subject'}),
            'email': forms.TextInput(attrs={'class': 'email'}),
            'message': forms.Textarea(attrs={'class': 'message'}),
        }

Oleh menambahkan atribut kelas pada atribut widget, anda boleh menentukan kelas CSS yang mana untuk digunakan pada elemen borang yang sepadan. Anda kemudian boleh menentukan peraturan CSS yang diperlukan dalam helaian gaya luaran anda untuk menyesuaikan penampilannya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Borang Django dengan Berkesan dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!