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

Posted 2023-02-24

【中文标题】如何将样式应用于 Django 表单？

【英文标题】：How to apply style to a Django form?

【发布时间】：2018-10-10 21:08:32

【问题描述】：

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

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

<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)

【问题讨论】：

你用的是css框架吗？？还是自定义样式 css ？

我买了一个自定义模板

【参考方案1】：

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

% load widget_tweaks %

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

【参考方案2】：

是的。您可以将 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': "[e-mail]"
    ),
)

还有其他可能性，所以看看吧。

【参考方案3】：

您可以通过将一些属性应用到您使用的小部件来做到这一点： 更多信息可以在这里找到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 -->

【参考方案4】：

如果您使用自定义 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 文件