如何使用 css 设置 django 表单的样式？答案

【问题标题】：How can I style a django form with css?如何使用 css 设置 django 表单的样式？
【发布时间】：2022-06-15 23:31:43
【问题描述】：

我早些时候尝试寻找答案，但似乎无法弄清楚一些事情。我在 form.py 文件中创建我的表单，所以它是一个 python 文件。

这是我的 forms.py 文件：

class UploadForm(ModelForm):
    name = forms.TextInput(attrs={'class': 'myfieldclass'})
    details = forms.TextInput()
    littype = forms.TextInput()
    image = forms.ImageField()
    class Meta:
        model = info
        fields = ["name", "details", "littype", "image"]

这是我的views.py函数，如果它有助于找到解决方案：

def uploadform(request):
    if request.method == 'POST':
        form = UploadForm(request.POST, request.FILES)
        print(request.FILES)
        if form.is_valid():
            form.save()
        redirect(home)
    return render(request, 'uploadform.html', {'form': UploadForm})

为了给它设置样式，我想我可以做这样的事情，我在另一个问题中找到了：

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

除了我不知道如何将 css 页面链接到该 python 文件。这是我尝试编写的，但我认为它不起作用，因为它适用于 html，但它位于 python 文件中：

<link type="text/css" rel="stylesheet" href="templates/form.css">

所以我只是不确定如何设置我的表单样式。感谢您的任何回答！

【问题讨论】：

您不需要将 css 链接到 python 文件，CSS 应该链接到父文件，myfield = forms.CharField(widget=forms.TextInput(attrs={'class': 'myfieldclass'})) 将生成一个具有类 'myfieldclass' 的字段，该字段将从父文件
我对其中一些术语有点陌生，因为我编码的时间太长了，所以如果您解释父文件的含义是非常有帮助的，因为我知道只有一个文件夹可以包含一个文件做不到的其他文件。

标签： python html django forms styles

【解决方案1】：

class StocksForm(forms.Form):
    stocks = forms.CharField(
        label="",
        widget=forms.TextInput(
            attrs={
                "class": "special",
                "size": "40",
                "label": "comment",
                "placeholder": "Comma Seperated eg - Reliance, Steel, Acrysil.. ",
            }
        ),
    )

模板端

{% load static %}
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="{% static '/css/cards.css' %}">

样式表有 CSS 作为

.special{
    font-variant: small-caps;
}

这就是 django 用类渲染表单的方式，样式类将从样式表中获取

希望这会有所帮助！ :)

【讨论】：

【解决方案2】：

您可以像任何其他样式表一样在模板标题中包含 CSS

谢谢

【讨论】：

【解决方案3】：

在您的模板中，您只需在head tag 中导入css 文件，但请务必先确保您是load static。

html 文件：

{% load static %}

<!doctype html>
<html lang="en">
     <head>
          # import the css file here
          <link rel="stylesheet" href="{% static 'path to css file' %}">
     </head>
     ...
</html>

在css文件中：

# Styling the class 
.myfieldclass{
     width: 30% !important;
     height: 100px !important;
     ...
}

但请注意，您不必导入 css 文件，因为您也可以在 head 标签中添加样式标签。例如：

<!doctype html>
<html lang="en">
     <head>
          <style type="text/css">
               .myfieldclass{
                    width: 30% !important;
                    height: 100px !important;
                    ...
               }
          </style>
     </head>
     ...
</html>

您也可以从python 文件本身应用css。

来自python 文件的方法。

# Custom way to set css styling on a form field in python code
def field_style():
     styles_string = ' '

     # List of what you want to add to style the field
     styles_list = [
          'width: 30% !important;',
          'height: 100px !important;',
     ]

     # Converting the list to a string 
     styles_string = styles_string.join(styles_list)
     # or
     # styles_string = ' '.join(styles_list)
return styles_string

class MyForm(forms.Form):
     myfield = forms.CharField(widget=forms.TextInput(attrs={'class': 'myfieldclass', 'style': field_style()}))
     # 'style': field_style() .... field_style() will return in this case 'width: 30% !important; height: 100px !important;'

其中任何一个都应该有效，但我建议您改为从 hmtl 或 css 文件中进行样式设置。

【讨论】：