Как изменить порядок элементов формы при рендеринге в шаблоне в Django
При рендеринге формы как изменить порядок элементов формы в шаблоне?
В приведенной выше форме как мне изменить положение элемента '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>