Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Menggayakan Borang Django dengan Berkesan dengan CSS?

Bagaimanakah Saya Boleh Menggayakan Borang Django dengan Berkesan dengan CSS?

Patricia Arquette
Lepaskan: 2024-12-15 21:37:13
asal
618 orang telah melayarinya

How Can I Style Django Forms Effectively with 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)
Salin selepas log masuk

Dan templat HTMLnya dalam contact_form.html:

<form action="" method="post">
  <table>
    {{ form.as_table }}
  </table>
  <input type="submit" value="Submit">
</form>
Salin selepas log masuk

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'}))
Salin selepas log masuk

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'})
Salin selepas log masuk

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'}),
        }
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan