How to style model form in django with CSS?-CodePudding

I have been using simple forms in Django since I started with python and now I've switched over to model forms, right now I'm wondering how to style the form. I tried to use the widgets code but it is behaving a little funny, If I understand correctly the widgets are to style the form itself (such as input fields) and I can use regular html/css styling on any other elements I have? My desired effect is to have the form centered in the middle of the screen. Is this correct? Here is my code incase there are errors:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/tripadd.css' %}">
    <title>Document</title>
</head>
<body>
    <!-- <div >
        <h4>Add a Trip</h4>
        <form action="/createTrip" method="post" >
            {% csrf_token %}
                    <p><input  type="text" name="city" placeholder="City" id=""></p>
                    <p><input  type="text" name="country" placeholder="Country" id=""></p>
                    <p><textarea name="description" id="" cols="30" rows="10"></textarea></p>
                    <p><input  type="file" name="photo" placeholder="Photo" id=""></p>
                    <input  type="submit" value="submit">
        </form>
    </div> -->
    {% block content %}
    <div >
                <form method="POST" enctype="multipart/form-data">
                    {% csrf_token %}
                    {{form.as_p}}
                    <button type="submit">submit</button>
                </form>
    </div>

    {% endblock %}
</body>
</html>

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}


body{
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-control{
    width: 500px;
    height: 500px;
    border: 2px solid black;
    
}


// form should be centered in middle of page

CodePudding user response：

You are right on the point that widget provides you with an option to style your form but it will only style the field for you not the label and any class you mention in the widget should be available in the stlyesheet . you can check the link below it provides a simple example on how you can style your form.

Simple form styling

and if you want to fully style the form with labels and how it should be structured you will have to loop over the form. below I have mentioned a simple code that illustrates how you can structure your form using django forms

<style>
.h-100{ 
   min-height:100vh;
 }
</style>

 <div  >
 <form method="POST"  enctype="multipart/form-data">
      {% csrf_token %}
      {% for field in form %}
      <div > {{field.label}} </div>
      <div > {{field}} </div>
      {% endfor %}
      <button type="submit">submit</button>
 </form>

i hope this helps you in your problem :)