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

Я использовал простые формы в Django с тех пор, как начал работать с python, и теперь я перешел на модельные формы, сейчас я задаюсь вопросом, как стилизовать форму. Я пытался использовать код виджетов, но он ведет себя немного странно, Если я правильно понимаю, виджеты предназначены для стилизации самой формы (например, поля ввода), а я могу использовать обычные html/css стилизации для любых других элементов, которые у меня есть? Мой желаемый эффект заключается в том, чтобы форма была отцентрирована по центру экрана. Правильно ли это? Вот мой код на случай ошибок:

<!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 class="form-container">
        <h4>Add a Trip</h4>
        <form action="/createTrip" method="post" class="reg-form">
            {% csrf_token %}
                    <p><input class="field" type="text" name="city" placeholder="City" id=""></p>
                    <p><input class="field" type="text" name="country" placeholder="Country" id=""></p>
                    <p><textarea name="description" id="" cols="30" rows="10"></textarea></p>
                    <p><input class="field" type="file" name="photo" placeholder="Photo" id=""></p>
                    <input class="form-btn" type="submit" value="submit">
        </form>
    </div> -->
    {% block content %}
    <div class="trip-form">
                <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

enter image description here

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

Простая стилизация формы

а если вы хотите полностью стилизовать форму с помощью меток и того, как она должна быть структурирована, вам придется зациклиться на форме. Ниже я привел простой код, который иллюстрирует, как вы можете структурировать вашу форму, используя django forms

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

 <div class="w-100 d-flex justiy-content-center align-items-center h-100" >
 <form method="POST" class="row" enctype="multipart/form-data">
      {% csrf_token %}
      {% for field in form %}
      <div class="col-6 text-start"> {{field.label}} </div>
      <div class="col-6"> {{field}} </div>
      {% endfor %}
      <button type="submit">submit</button>
 </form>

Надеюсь, это поможет вам в решении вашей проблемы :)

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