Django form is rendered with invalid HTML syntax - html

Question

I have a Django project where I use the integrated forms. But it sends my client wrong HTML syntax. This shouldn't be that big of a deal since browsers nowadays clean up such errors. But when the form gets send back to the server the form isn't able to validate because firefox sends back the cleaned version.
I have a form with an multiple select:
class ProjectForm(forms.Form):
# [...]
project_leaders = forms.ModelChoiceField(widget=forms.SelectMultiple, queryset=User.objects.all(), initial=0)
This form is integrated in the respective html file:
{{ project_form.as_p | linebreaks }}
This is the source code from it (via Firefox Page Source):
<p>[...] <select name="project_leaders" required id="id_project_leaders" multiple><br>
<option value="test">test</option></p>
<p></select></p>
Firefox cleans it up oc but it should be send and accepted by django.
Does anybody know how I can django to do that?

Answer 1

This shouldn't be that big of a deal since browsers nowadays clean up such errors.
The browser tries its best to distill some meaning out of erroneous markup, but the result is not always what the author expected. For getting exactly the wanted structure, said author should write correct HTML. This hasn’t changed since the 90s.
In this specific case, my suggestion is to get rid of the | linebreaks filter. It is meant for plain text with at the most simple formatting tags.
The filter adds a <br> after the opening <select> tag. This leads the browser to automatically close the <select> again, since <br>s are not valid inside <select>s. The <option> elements are then placed outside the <select>, having no effect anymore whatsoever. The closing and re-opening <p> tags are a symptom of the browser not fully knowing what to do with the final stray </select>.