如何使用 CSS 有效設計 Django 表單樣式？-css教學-PHP中文網

如何使用 CSS 有效設計 Django 表單樣式？

Patricia Arquette

發布： 2024-12-15 21:37:13

原創

618 人瀏覽過

How Can I Style Django Forms Effectively with CSS?

使用 CSS 設計 Django 表單

使用 Django 表單時，通常需要使用 CSS 自訂其外觀。這可以透過將類別或 ID 指派給特定的表單元素來實現，從而允許您定位它們並相應地應用樣式。

考慮forms.py 中定義的以下Django 表單：

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

登入後複製

及其HTML 範本在contact_form.html 中：

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

登入後複製

要設定這些表單元素的樣式，您可以修改Django 表單類別以包含自訂小工具屬性。有多種方法可以實現此目的：

方法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'}))

登入後複製

方法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'})

登入後複製

方法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'}),
        }

登入後複製

透過將 class 屬性新增至 widget 屬性中，您可以指定要將哪些 CSS 類別套用到對應的表單元素。然後，您可以在外部樣式表中定義必要的 CSS 規則來自訂其外觀。

以上是如何使用 CSS 有效設計 Django 表單樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！