How to reorder the form elements when rendering in template in Django

When rendering a form how do I reorder the form elements in the template?

Form rendered in template

In the above form how do I change the position of the 'Sort by' element. If suppose I want to position it to the top right, how will I do it?

forms.py

class RoomsForm(forms.Form):

    numbers = forms.CharField(validators=[int_list_validator()], required=False, max_length=4000, widget=forms.TextInput(attrs={'class': 'unbold-form'}))

    ROOM_CATEGORIES = (
        ('Regular', 'Regular'),
        ('Executive', 'Executive'),
        ('Deluxe', 'Deluxe'),
    )

    categories = forms.MultipleChoiceField(
        required=False,
        widget=forms.CheckboxSelectMultiple(attrs={'class': 'unbold-form'}),
        choices=ROOM_CATEGORIES,
    )

    ROOM_CAPACITIES = (
        (1, '1'),
        (2, '2'),
        (3, '3'),
        (4, '4'),
    )
    capacities = forms.MultipleChoiceField(
        required=False,
        widget=forms.CheckboxSelectMultiple(attrs={'class': 'unbold-form'}),
        choices=ROOM_CAPACITIES,
    )

    advance = forms.IntegerField(
        required=False,
        widget=forms.NumberInput(attrs={'class': 'unbold-form'})
    )

    SORT = (
        ('number', 'Numbers: Ascending'),
        ('-number', 'Numbers: Descending'),
        ('capacity', 'Capacities: Ascending'),
        ('-capacity', 'Capacities: Descending'),
        ('advance', 'Advance: Ascending'),
        ('-advance', 'Advance: Descending'),
    )
    sort_by = forms.ChoiceField(
        required=False,
        widget=forms.Select(attrs={'class': 'unbold-form'}),
        choices=SORT,
    )

HTML Template

<h2>Search</h2>
<form method="POST" id="bold-form">
  {% csrf_token %}
  {{ form.as_p }}
  <input type="submit" class= "submit submit-right" value="Search" />
</form>

The easiest solution I could come up with, involves rendering each form field individually in your HTML, as opposed to using as_p. This allows for you to add CSS classes to the paragraph elements, structure the paragraph elements in divs, or any other way you could imagine structuring your HTML document.

HTML Template:

<!DOCTYPE html>
<html>
<head>
  <style>
    .whole {
      display:flex;
    }
    .half {
      box-sizing:border-box;
      display:inline-block;
      width:50%;
    }
    .right {
      text-align:right;
    }
  </style>
</head>
<body>
<h2>Search</h2>
<form method="POST" id="bold-form">
  {% csrf_token %}
  <div class="whole">
    <div class="half">
      <p><label>{{form.numbers.label_tag}}</label> {{form.numbers}}</p>
      <p><label>{{form.categories.label_tag}}</label> {{form.categories}}</p>
      <p><label>{{form.capacities.label_tag}}</label> {{form.capacities}}</p>
      <p><label>{{form.advance.label_tag}}</label> {{form.advance}}</p>
    </div>
    <div class="half right">
      <p><label>{{form.sort_by.label_tag}}</label> {{form.sort_by}}</p>
    </div>
  </div>
  <input type="submit" class= "submit submit-right" value="Search" />
</form>
</body>
</html>
Back to Top