Styling django MultiSelectField

Question

I want to create multipleselecetfild that each selection referin to each choice appears below the image.
I used the django MultiSelectField to create a form to have multiple select options. These are my files:

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>

I created a form called profile_form with the category field. In html, I wanted my form to appear with an image on the top and just a check button below the image, with the check button refering to each cat_choices in the category. Something like this !In the image I used html to display it.

How do I write this html page in django such that each check button refering to each choice appears below the image?

Styling django MultiSelectField

models.py

profile.html

0 Answers0