Django Styling Login Forms and Adding Additional Spans

Django styling login forms and adding additional spans

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.

Adding a CSS class to fields in django.contrib.auth.views.login

This app will do exactly what you need.

CSS styling in Django forms

Taken from my answer to:
How to markup form fields with <div class='field_type'> in Django

class MyForm(forms.Form):
    myfield = forms.CharField(widget=forms.TextInput(attrs={'class': 'myfieldclass'}))

or

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModel

    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)
        self.fields['myfield'].widget.attrs.update({'class': 'myfieldclass'})

or

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModel
        widgets = {
            'myfield': forms.TextInput(attrs={'class': 'myfieldclass'}),
        }

--- EDIT ---

The above is the easiest change to make to original question's code that accomplishes what was asked. It also keeps you from repeating yourself if you reuse the form in other places; your classes or other attributes just work if you use the Django's as_table/as_ul/as_p form methods. If you need full control for a completely custom rendering, this is clearly documented

-- EDIT 2 ---

Added a newer way to specify widget and attrs for a ModelForm.

Implementing Django Bootstrap crispy forms into default signup / login pages?

please follow bellow steps to use crispy_forms with bootstrap5:

1st step: Install crispy_forms form bootstrap 5

pip install crispy-bootstrap5

step 2: Add crispy_forms and crispy_bootstrap5 to installed apps

INSTALLED_APPS = (
    ...
    "crispy_forms",
    "crispy_bootstrap5",
    ...
)

step 3: add crispy form attr to settings file

CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"

CRISPY_TEMPLATE_PACK = "bootstrap5"

check here for details

to use crispy form in templates, add {% load crispy_forms_filters %} and {% load crispy_forms_tags %} on top of your sign up and login page.

and declare form as crispy i.e {{forms| crispy}} or field as {{ form.fieldname|as_crispy_field }}

How to style mixed django form better

Assuming you're using the crispy template pack for styling, you could create a model form class and give the programs field initial "options" from the database, using a query from whatever model you're storing the "options" on. Here's an example, using some assumptions about your database schema:

        class ProgramForm(forms.ModelForm):
            class Meta: 
                fields = ['program']
                model = MyRecord

            def __init__(self, *args, **kwargs):
                super(ProgramForm, self).__init__(*args, **kwargs)
                self.fields['program'].queryset = Option.objects.filter(some_field=True).order_by("option_name")

Using this kind of solution, you're using your backend model form class to handle passing the "option" data, and doing all your styling in the html with crispy. Note that if you're using two separate forms, pass them to your template with different names, like:

{{form.klient|as_crispy_field}}
{{program_form.program|as_crispy_field}}

Additionally, you can use Django's widgets to add functionality to your options selector, for example if you wanted checkboxes instead of a dropdown select (ForeignKey vs M2M, let's say).

If you can do none of that and must use this HTML structure and backend approach, you can still target the form with CSS, for example something like:

<style>
#this-label span {

        margin-right: 100px;
    }

</style>

<label for="{{ form.trn.id_for_label }}" id="this-label"> <span>Trn:</span> </label>

...will add space to the right of "Trn:". This is just one way of doing that, but you could add a class to the span element and target multiple such tags.

---

Related Topics