Use field.id_for_label instead of field.auto_id

This fixes a bug when specifying a custom id for a field and rendering
it with the `|bootstrap` filter.

When using `field.auto_id` in the label's `for` attribute, this is
always set to the default value instead of the custom `id`.

Also fix a typo in the tests: file_fied -> file_field

Author: nikolas

bootstrapform/fixtures/basic.html

@@ -54,7 +54,7 @@
 </div>
 
 <div class="form-group">
-    <label class="control-label  " for="id_multiple_checkbox">Multiple checkbox</label>
+    <label class="control-label  " for="id_multiple_checkbox_0">Multiple checkbox</label>
     <div class=" multiple-checkbox">
         <ul id="id_multiple_checkbox">
             <li><label for="id_multiple_checkbox_0"><input id="id_multiple_checkbox_0" name="multiple_checkbox" type="checkbox" value="0" /> Zero</label></li>
@@ -65,10 +65,10 @@
 </div>
 
 <div class="form-group">
-    <label class="control-label  " for="id_file_fied">File fied</label>
+    <label class="control-label  " for="id_file_field">File field</label>
 
     <div class=" ">
-        <input id="id_file_fied" name="file_fied" type="file" />
+        <input id="id_file_field" name="file_field" type="file" />
     </div>
 </div>
 

bootstrapform/fixtures/horizontal.html

@@ -56,7 +56,7 @@
 </div>
 
 <div class="form-group">
-    <label class="control-label col-sm-2 col-lg-2 " for="id_multiple_checkbox">Multiple checkbox</label>
+    <label class="control-label col-sm-2 col-lg-2 " for="id_multiple_checkbox_0">Multiple checkbox</label>
     <div class=" col-sm-10 col-lg-10 multiple-checkbox">
         <ul id="id_multiple_checkbox">
             <li><label for="id_multiple_checkbox_0"><input id="id_multiple_checkbox_0" name="multiple_checkbox" type="checkbox" value="0" /> Zero</label></li>
@@ -67,10 +67,10 @@
 </div>
 
 <div class="form-group">
-    <label class="control-label col-sm-2 col-lg-2 " for="id_file_fied">File fied</label>
+    <label class="control-label col-sm-2 col-lg-2 " for="id_file_field">File field</label>
 
     <div class=" col-sm-10 col-lg-10 ">
-        <input id="id_file_fied" name="file_fied" type="file" />
+        <input id="id_file_field" name="file_field" type="file" />
     </div>
 </div>
 

bootstrapform/templates/bootstrapform/field.html

@@ -46,7 +46,8 @@
         </div>
     {% else %}
         {% if field.auto_id %}
-            <label class="control-label {{ classes.label }} {% if field.field.required %}{{ form.required_css_class }}{% endif %}" for="{{ field.auto_id }}">{{ field.label }}</label>
+            <label class="control-label {{ classes.label }} {% if field.field.required %}{{ form.required_css_class }}{% endif %}"
+                   for="{{ field.id_for_label }}">{{ field.label }}</label>
         {% endif %}
 
         <div class="{{ classes.value }} {% if field|is_multiple_checkbox %}multiple-checkbox{% endif %}">

bootstrapform/tests.py

@@ -28,7 +28,7 @@ class ExampleForm(forms.Form):
     radio_choice = forms.ChoiceField(choices=CHOICES, widget=forms.RadioSelect)
     multiple_choice = forms.MultipleChoiceField(choices=CHOICES)
     multiple_checkbox = forms.MultipleChoiceField(choices=CHOICES, widget=forms.CheckboxSelectMultiple)
-    file_fied = forms.FileField()
+    file_field = forms.FileField()
     password_field = forms.CharField(widget=forms.PasswordInput)
     textarea = forms.CharField(widget=forms.Textarea)
     boolean_field = forms.BooleanField()

example/app/forms.py

@@ -12,7 +12,7 @@ class ExampleForm(forms.Form):
     radio_choice = forms.ChoiceField(choices=CHOICES, widget=forms.RadioSelect)
     multiple_choice = forms.MultipleChoiceField(choices=CHOICES)
     multiple_checkbox = forms.MultipleChoiceField(choices=CHOICES, widget=forms.CheckboxSelectMultiple)
-    file_fied = forms.FileField()
+    file_field = forms.FileField()
     password_field = forms.CharField(widget=forms.PasswordInput)
     textarea = forms.CharField(widget=forms.Textarea)
     boolean_field = forms.BooleanField()