1

How can we change the structure of forms so that inputs be out of labels when my form render will be displayed like this:

<p>
<label for="id_form-0-food_name_0"><input checked="checked" id="id_form-0-food_name_0" name="form-0-food_name" value="" type="radio"> (Nothing)</label>
<label for="id_form-0-food_name_1"><input id="id_form-0-food_name_1" name="form-0-food_name" value="1" type="radio"> خوراک مرغ</label>
<label for="id_form-0-food_name_2"><input id="id_form-0-food_name_2" name="form-0-food_name" value="2" type="radio"> خوراک لوبیا</label>
<label for="id_form-0-food_name_3"><input id="id_form-0-food_name_3" name="form-0-food_name" value="3" type="radio"> فسنجون</label>
</p>

but i need inputs render out of the labels tag. like this:

<p>
<input checked="checked" id="id_form-0-food_name_0" name="form-0-food_name" value="" type="radio"><label for="id_form-0-food_name_0"> (Nothing)</label>
<input id="id_form-0-food_name_1" name="form-0-food_name" value="1" type="radio"><label for="id_form-0-food_name_1"> خوراک مرغ</label>
<input id="id_form-0-food_name_2" name="form-0-food_name" value="2" type="radio"><label for="id_form-0-food_name_2"> خوراک لوبیا</label>
<input id="id_form-0-food_name_3" name="form-0-food_name" value="3" type="radio"><label for="id_form-0-food_name_3"> فسنجون</label>
</p>

my forms.py:

class Reserve(ModelForm):
    food_name = forms.ModelChoiceField(
        queryset=Food.objects.all(), 
        widget=forms.RadioSelect(renderer=RadioFieldWithoutULRenderer), 
        empty_label="(Nothing)",
        # label=''
        )
    class Meta:
        model = Reservation
        fields = ('food_name',)

and form.html

<form method="post">
{% csrf_token %}

{% for form in formset %}

<p>
  <input name="group1" type="radio" id="test1" value="" />
  {{ form.food_name  }}
</p>

{% endfor %}

<button type="submit" class="btn btn-default">Submit</button>

Ehsan
  • 604
  • 7
  • 21
  • Related: [Show BooleanField checkbox before label](http://stackoverflow.com/q/34747964/1324033) - Believe me, its incredibly difficult to get any control over which side the label appears. Either keep it as it is or use something like django-angular that has done the hard work – Sayse Nov 01 '16 at 15:07

1 Answers1

0

As shown in this question you can create your own widget using a custom template:

  1. Create a template file in your templates folder (e. g. my_project/my_app/templates/my_app/widgets/radio_option.html):
{% include "django/forms/widgets/input.html" %}{% if widget.wrap_label %}<label{% if widget.attrs.id %} for="{{ widget.attrs.id }}"{% endif %}>{{ widget.label }}</label>{% endif %}

(This template is copied and slightly modified from django/forms/templates/django/forms/widgets/input_option.html which is used for radio widgets by default.)

  1. Create a custom widget in your app:
class MyRadioSelect(django.forms.RadioSelect):
    option_template_name = "my_app/widgets/radio_option.html"
  1. Use MyRadioSelect instead of RadioSelect
Jonas
  • 11
  • 2