Question

可以在视图中更改表单的样式吗？

我在文档中找到了这段代码：

<form action="/contact/" method="post">
    {{ form.non_field_errors }}
    <div class="fieldWrapper">
        {{ form.subject.errors }}
        <label for="id_subject">Email subject:</label>
        {{ form.subject }}
    </div>
    <div class="fieldWrapper">
        {{ form.message.errors }}
        <label for="id_message">Your message:</label>
        {{ form.message }}
    </div>
    <div class="fieldWrapper">
        {{ form.sender.errors }}
        <label for="id_sender">Your email address:</label>
        {{ form.sender }}
    </div>
    <div class="fieldWrapper">
        {{ form.cc_myself.errors }}
        <label for="id_cc_myself">CC yourself?</label>
       {{ form.cc_myself }}
    </div>
    <p><input type="submit" value="Send message" /></p>
</form>

但它只是提出了一个丑陋的输入。我想在这个输入中应用一个类或一个css。有可能吗？

这是我的表格：

class LoginView(NextUrlMixin, RequestFormAttachMixin, FormView):
    form_class = LoginForm
    success_url = '/'
    template_name = 'accounts/login.html'
    default_next = '/'


class LoginForm(forms.Form):
    email    = forms.EmailField(label='Email')
    password = forms.CharField(widget=forms.PasswordInput)

Answer 1

如果您使用自定义css，请在表单示例中设置类CSS：

email    = forms.EmailField(label='Email')
email.widget.attrs.update({'class':'customClass', 'required':'required'})

在这种情况下，如果你使用Bootstrap设置一个customClass，也许你可以使用这样的人：

email    = forms.EmailField(label='Email')
email.widget.attrs.update({'class':'form-control', 'required':'required'})

此代码在您的forms.pyp上。祝您好运不要忘记在模板上加载你的css文件

Answer 2

您可以通过将某些属性应用于您使用的窗口小部件来执行此操作：更多信息可以在Official Django Documentation

找到

例如：

email    = forms.EmailField(label='Email',
    widget=forms.TextInput(attrs={'class':'class_value','placeholder':"Email here"}))

如果您希望通过保持与django生成的行为相同的行为来完全控制form html，则以下内容将起作用

<input type="email" name="email" id="id_email" value="{{form.email.value}}" class='class_name' attrs='attrs' >

{{ form.email.errors}}  <!-- track errors for this field -->

Answer 3

是。您可以将css文件附加到表单（在模板中放置{{ form.media }}）：

class LoginForm(forms.Form):
    email    = forms.EmailField(label='Email')
    password = forms.CharField(widget=forms.PasswordInput)

    class Media:
        css = {
            'all': ('login-form-layout.css',)
        }
        js = (
            'https://some-cdn.com/some-framework.js'
            'login-form-script.js', 
        )

输入的ID类似id_fiedname，因此login-form-layout.css可以是：

#id_email, #id_password {
    width: 200px;
}

你可以用CSS做很多事情，并且使用javascript有无穷无尽的可能性。

您可以在Django官方文档中查看"Customizing widget instances"。例如，您可以使用attrs参数将任意属性附加到输入标记：

email = forms.EmailField(
    label='Email',  
    widget=forms.TextInput(attrs{
        'class': 'my-super-special-input', 
        'placeholder': "mailbox@example.com"
    }),
)

还有其他可能性，请查看。

Answer 4

使用Django widget_tweaks。这真的很方便。您可以轻松更改所需的任何属性。

{% load widget_tweaks %}

{% render_field form.field class=“your-class” %}

如何将样式应用于Django表单？

4 个答案: