如何使用 CSS 为 django 中的模型表单设置样式？

Question

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.自从我开始使用 python 以来，我一直在 Django 中使用简单的表单，现在我已经切换到模型表单，现在我想知道如何设置表单的样式。 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?我尝试使用小部件代码，但它的行为有点有趣，如果我理解正确，小部件将设置表单本身的样式（例如输入字段），我可以在我拥有的任何其他元素上使用常规的 html/css 样式？ 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 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

Answer 1

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 .您是正确的，小部件为您提供了设置表单样式的选项，但它只会为您设置字段样式而不是标签，并且您在小部件中提到的任何类都应该在 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下面我提到了一个简单的代码，它说明了如何使用 django 表单构建表单

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

i hope this helps you in your problem :)我希望这可以帮助您解决问题:)

如何使用 CSS 为 django 中的模型表单设置样式？

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-06-13 13:25:08

如何使用 CSS 为 django 中的模型表单设置样式？

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-06-13 13:25:08

解决方案1
1 已采纳 2022-06-13 13:25:08