Django form template customization

Question

New to django (and in general python). I'm trying to customize one of my forms a bit and would like to know the best way to do this.

Take for example the following, a form with 3 fields, two fields for weight entry and one for a target date.

class BasicFitnessGoalForm(forms.ModelForm):

    class Meta:
        model = BasicFitnessGoal
        fields = ('currentWeightKg','targetWeightKg','targetDate')
        widgets = {
            'targetDate': forms.DateInput(attrs={'class':'formdatepicker'}),
        }
        labels = {
            'currentWeightKg' : "Current Weight",
            'targetWeightKg' : "Goal Weight",
            'targetDate' : 'Goal Date'
        }

I want to be able to display this form in my templates using something like goalForm.as_p() which generates html like the following:

<p>
 <label></label><input><input>...

What I am looking to do is on the weight fields insert an extra element after the input tags and customize the text and css classes. So I end up with something like this:

<p>
<label>Current Weight</label><input type=Number...><span class="customCss">Kg (or text I enter</span>
</p>

So is there anyway to accomplish this inside the model class? I know I could do this with javascript or by looping through the fields in the template instead of using the form.as_p tag. But I want to reuse this so it's cleanest if I can create a method to output the desired html wherever I want to use it.

I've seen some examples where you can set a method on the form like as_foobar where the self.html_output is returned. But I see that that only allows to specify values like "normal_row", "error_row" etc. I want to code a custom template for this form and return the html from a method on the model that I can then access from a template. (or override the as_p method for this model to return custom html depending on field).

Hopefully that makes sense.

Answer 1

Using a custom widget as suggested in the comment is one option, another is to loop through the fields manually.

<form action="/your-name/" method="post">
    {% csrf_token %}
    {{ form.non_field_errors }}
    {% for field in form %}

        <div class="fieldWrapper">
            {{ field.errors }}
            {{ field.label_tag }} {{ field }}
            {% if field.help_text %}
                  <p class="help">{{ field.help_text|safe }}</p>
            {% endif %}

            {% if field.id_label = id_currentWeightKg" %}
                <span class="customCss">Kg (or text I enter</span>
            {% endif %}
        </div>
    {% endfor %}
    <input type="submit" value="Submit" />
</form>

For additional information refer to the Looping over form fields section in the manual.

before you do this, view the HTML source and confirm that id_currentWeightKg is the correct id for the field in question. If not use replace with the correct one.