Как стилизовать форму django с помощью css?

Я пытался найти ответ ранее, но не смог понять несколько вещей. Я создаю свою форму в файле 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">

И поэтому я просто не уверен, как стилизовать мою форму. Спасибо за любые ответы! 

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 as

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

Так django отрисует форму с классом, а стиль класса будет взят из таблицы стилей

enter image description here

Надеюсь, это поможет! :)

Вы можете просто включить CSS в заголовок шаблона, как любую другую таблицу стилей

Спасибо

В вашем шаблоне вы должны просто импортировать css файл в head tag, но сначала убедитесь, что вы 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-файл, поскольку вы можете добавить тег style и в тег head. Например:

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

Вы можете применить css из самого файла python, а также

Приближение из 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.

Мой стандартный шаблон использует блочную структуру Django, поэтому я могу группировать CSS, специфичные для конкретной страницы, вместе с ней.

{% extends "base.html" %}

{% block content %}
    my html ...
{% endblock %}

{% block extracss %}
{{block.super}}
<style>
    ... page-specific CSS
</style>
{% endblock %}

Base.html содержит пустое определение блока

{% block extracss %}{% endblock %}

который служит для расположения блока с другими CSS всего сайта.

Вернуться на верх