Как изменить порядок элементов формы при рендеринге в шаблоне в Django

При рендеринге формы как изменить порядок элементов формы в шаблоне?

Form rendered in template

В приведенной выше форме как мне изменить положение элемента 'Sort by'. Если предположим, я хочу расположить его справа вверху, как мне это сделать?

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 шаблон

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

Самое простое решение, которое я смог придумать, предполагает отображение каждого поля формы отдельно в HTML, в отличие от использования as_p. Это позволяет добавлять CSS классы к элементам параграфа, структурировать элементы параграфа в div, или любым другим способом, который вы можете представить, структурируя ваш HTML документ.

HTML Шаблон:

<!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>
Вернуться на верх