Django 将类添加到表单 <input ..> 字段

Posted 2023-02-24

【中文标题】Django 将类添加到表单 <input ..> 字段

【英文标题】：Django add class to form <input ..> field

【发布时间】：2011-07-14 05:05:27

【问题描述】：

我们正在寻找一种将 CSS 类属性添加到 Django 表单的 <input..> 字段的解决方案。我们已经看到建议我们将字段包装在 <div> http://docs.djangoproject.com/en/1.2/topics/forms/#customizing-the-form-template 中的建议，但该建议似乎主要适用于字段标签，而不是 <input ...>。

如果您尝试在<input> 字段周围创建边框，则此特定建议不起作用。在这种情况下，<div> 将应用于边界框，而不是实际的输入字段。例如.wrapper border: 1px solid #666;line-height:22px;height:22px;padding:3px 5px;width:205px; 将在字段周围创建一个框，而不是替换默认的<input ...> 边框。

我们已经退回到通过应用于 Form 类的小部件来应用该类，但这缺乏一定程度的代码优雅（并且违反了 DRY）。例如，这解决了需求。

class ContactUsForm(forms.Form):
    name = forms.CharField(widget=forms.TextInput(attrs='class':'form_text'))

当然，这将表单与 CSS 紧密地联系在一起。如果您尝试将类属性应用于<input ..> 字段，而表单是基于酷炫的新forms.ModelForm 系统，那么它会变得更加复杂。

我们花了两天的大部分时间来研究这个问题（并研究 Django 源代码），看起来我们可能在这个特定问题上达到了 Django 的最远边缘——但我们只是想在 *** 上试一试，看看是否有其他人有洞察力。

感谢您的任何见解。

最后一条评论：如果问题在于我们对 CSS 的理解（而不是 django），请随时提出来。我们花了相当多的时间来处理 CSS 选项，但似乎没有一个能让我们实现所需的效果——即替换默认的 <input...> 边框。

【问题讨论】：

用 CSS 格式化 很好，但如果你想添加，例如，form-control 用于 Bootstrap/MDBootstrap，请参阅 Add class to form field Django ModelForm - Stack Overflow

【参考方案1】：

你可以像这样使用子选择器：

.fieldWrapper > input border: 1px solid #666;line-height:22px;height:22px;padding:3px 5px;width:205px;

【讨论】：

绝妙的解决方案！由于历史兼容性问题，我通常不会考虑子选择器，但如果您不介意针对现代浏览器 - 这不是问题。感谢您提供出色的解决方案。