当前位置: 首页 > 面试题库 >

Django表单中的CSS样式

易淳
2023-03-14
问题内容

我想样式如下:

forms.py:

from django import forms

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

contact_form.html:

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

例如,如何设置一个类或ID为subject,email,message以提供外部样式表到?


问题答案:

摘自我的答案: 如何在Django中使用

标记表单字段

class MyForm(forms.Form):
    myfield = forms.CharField(widget=forms.TextInput(attrs={'class' : 'myfieldclass'}))

要么

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModel

    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)
        self.fields['myfield'].widget.attrs.update({'class' : 'myfieldclass'})

要么

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModel
        widgets = {
            'myfield': forms.TextInput(attrs={'class': 'myfieldclass'}),
        }

以上是对完成所要询问内容的原始问题的代码进行的最简单的更改。如果你在其他地方重复使用表格,也可以避免重复。如果你使用Django的as_table / as_ul / as_p表单方法,则你的类或其他属性将正常工作。如果你需要完全控制以完全自定义渲染,则应明确记录在案

添加了更新的方法来为ModelForm指定小部件和属性。



 类似资料:
  • 有人知道如何用Rails引导(SCSS)以简单的形式将CSS样式放在标签上吗? 谢谢。

  • 我想将css样式(链接如下)应用到我的模板中的Django boolean表单。https://proto.io/freebies/onoff/ 我做了这样的事。该样式应用于复选框,但复选框不会将状态“OFF”更改为“ON”。(当我点击它时,它不会做任何事情) 有人能告诉我如何更有效地将css样式应用于Django表单吗? 非常感谢。

  • 问题内容: 我将Django与Twitter Bootstrap结合使用来渲染表单。 可以很好地格式化你的表单-只要你具有CSS期望包含的类即可。 但是,我的问题是,由Django生成的表单在Bootstrap中表现不佳,因为它们没有这些类。 例如,Django的输出: 据我所知,Bootstrap要求你的表单具有,每个具有,并且每个都包装在中: 但是,向Django中的每个表单字段添加自定义CS

  • 问题内容: 我想使用引导程序来获得不错的网站设计,但是不幸的是,我不知道表单字段的样式。我在说这个: 应该如何设计呢?我尝试了这个: 这显然没有给我想要的结果。 如何将引导样式应用于Django表单? 问题答案: 如果你不想使用第三方工具,那么从本质上讲,你需要向类中添加属性,我更喜欢通过使模型表单继承自一个基类来实现。 可以轻松调整…但是如你所见,我所有的字段小部件都已应用了表单控件css类 你

  • 问题内容: Django中对单表继承有显式支持吗?最后我听说,该功能仍在开发和辩论中。 在此期间是否可以使用库/黑客来捕获基本行为?我有一个混合了不同对象的层次结构。具有Employee类,雇员类型的子类和manager_id(parent_id)的公司结构的规范示例将很好地逼近我正在解决的问题。 就我而言,我想代表一个想法,即一个员工可以在由另一个员工管理的同时管理其他员工。没有用于Manage

  • CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 列表 在HTML中,有两种类型的列表: 无序列表 - 列表项标记用特殊图形(如小黑点、小方框等) 有序列表 - 列表项的标记有数字或字母 使用CSS,可以列出进一步的样式,并可用图像作列表项标记。 不同的列表项标记 list-style-type属性指定列表项标记的类型是::ul.a {