How can I style a django form with css?-CodePudding

I tried looking for the answer earlier but couldn't seem to figure out a few things. I'm creating my form in a form.py file so its a python file.

Here is my forms.py file :

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"]

Here is my views.py function for it if it helps find the solution :

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

To style it I thought I could do something like this which I found in another question :

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

Except I have no idea how to link a css page to that python file. This is what I tried writing but i think it doesnt work because its meant for html but its in a python file :

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

And so I'm just not sure how to style my form. Thanks for any answers!

CodePudding user response：

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.. ",
            }
        ),
    )

Template side

{% 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' %}">

the stylesheet has got CSS as

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

This is how django will render the form with the class, and the styling class will be taken from stylesheet

Hope this helps! :)

CodePudding user response：

You can just include the CSS in the template header like any other stylesheet

Thanks

CodePudding user response：

Within your template you have to just import the css file in the head tag, but do ensure you load static first.

html file:

{% load static %}

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

Within the css file:

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

But please note that you don't have to import a css file since you can add the style tag in the head tag as well. For example:

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

You could apply css from the python file itself as well.

Approach from the python file.

# 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;'

Any of those should work but I do recommend doing the styling from the hmtl or css file instead.