设置Django MultiSelectField的样式

时间：2019-05-21 10:08:34

标签： python django django-forms django-templates django-widget

我要创建多个选择，以使指向每个选择的每个选择都出现在图像下方。
我使用django MultiSelectField创建了一个具有多个选择选项的表单。这些是我的文件：

models.py

class Profile(models.Model):
    cat_choices = (
        ('Internships', 'Internships'),
        ('Scholarships', 'Scholarships'),
        ('EntranceExams', 'EntranceExams'),
    )
    category=MultiSelectField(choices=cat_choices,default='none')

profile.html

<!DOCTYPE html>
<html>
<body>
<style>
div.item {
    vertical-align: top;
    display: inline-block;
    margin-right: 50px;
    text-align: center;
    width: 120px;
}
img {
    background-color: grey;
}
.caption {
    display: block;
}

</style>
<div class="item">
    <img src="internship.png">
    <span class="caption"><input type="checkbox" name="Internship" value="Internship"></span>
</div>
<div class="item">
    <img src="jobs.png">
    <span class="caption"><input type="checkbox" name="Jobs" value="Jobs"></span>
</div>
<div class="item">
    <img src="scholarship.png">
    <span class="caption"><input type="checkbox" name="Scholarship" value="Scholarship"></span>
</body>
</html>

我使用类别字段创建了一个名为profile_form的表单。在html中，我希望我的表单在顶部显示一个图像，而在图像下方仅显示一个检查按钮，该检查按钮引用类别中的每个cat_choices。像this之类的在图像中，我使用html进行显示。

如何用django编写此html页面，以使引用每个选项的每个复选按钮出现在图像下方？

0 个答案:

没有答案