[Solved]-Django styling login forms and adding additional spans

by

49👍

✅

You can render each field individually instead of letting Django render the whole form with {{ form }}. You can write the template like this – 

<form role="form" class="form-horizontal" method="post" action="{% url 'django.contrib.auth.views.login' %}">{% csrf_token %}
    <div class="form-group">
        {% for field in form %}
            <div class="input-group">
                <span class="input-group-addon" style="background-color:#b77b48; color:white"><span class="glyphicon glyphicon-user"></span></span>
                <input class="form-control" id="{{ field.id_for_label }}" maxlength="30" name="{{ field.html_name }}" value="{{ field.value }}" type="text" /> 
                {{ field.errors }}
            </div>
        {% endfor %}
        <input type="submit" class="btn btn-primary" value="login" />
        <input type="hidden" name="next" value="{{ next }}" />
    </div>
</form>

As always, like everything else, Django documentation has everything.

👤Bibhas Debnath

Leave a comment