3

Utilizando Bootstrap 4 con Django Forms y Widget-Tweaks

Hola a todos!
Seguramente tambien les ocurrio que querian utilizar las clases de Bootstrap sin dejar de usar los Forms de Django pero no sabian como hacerlo
en este tutorial usaremos Widget-Tweaks que nos permitira utilizar directamente las clases de bootstrap
En este tutorial construiremos un fromulario tipo Signup para registrar usuarios

Para efectos prácticos usaremos la CDN de Bootstrap

Primero instalamos por PIP Widget -Tweaks

pip install django-widget-tweaks```


Luego lo declaramos en nuestras apps enel archivo _settings.py_.



INSTALLED_APPS = [
‘django.contrib.admin’,
‘django.contrib.auth’,
‘django.contrib.contenttypes’,
‘django.contrib.sessions’,
‘django.contrib.messages’,
‘django.contrib.staticfiles’,
#django tweaks
’widget_tweaks’
]```

Ahora sí, vamos a trabajar en el archivo forms.py, para este caso utilizaremos el modelo de Usuario predefinido por Django y adicional a esto a cada campo le añadiremos un atributo attrs por medio de un widget segun el tipo de input, y añadiremos un placeholder a cada uno de nuestros campos para poder luego mostrarlo.

from django import forms
from django.contrib.auth.models import User




class SignupForm (forms.Form):
    username = forms.CharField( 
        min_length=4,max_length=30,widget= forms.TextInput(
                attrs= {
                    'placeholder':"Username"
                }
            )
        )
    first_name = forms.CharField (
        min_length =2, 
        max_length = 50,
        widget= forms.TextInput(
                attrs= {
                    'placeholder':'Nombre'
                }
            )
        
        )
    last_name= forms.CharField (
        min_length =2, 
        max_length = 50,
        widget= forms.TextInput(
                attrs= {
                    'placeholder':'Apellido'
                }
            )
        )
    email = forms.CharField(
        min_length=6,max_length=70, 
        widget=forms.EmailInput(attrs= {
                'placeholder':'Email'
                }
            )
        )

    password = forms.CharField (
        max_length = 70, 
        widget=forms.PasswordInput(attrs= {
                    'placeholder':'Contraseña'
                }
            )
        )

    confirm_password = forms.CharField (
        max_length =70 , 
        widget=forms.PasswordInput(attrs= {
                'placeholder':'Confirmar contraseña'
                }
            )
        )

Luego trabajamos sobre nuestro archivo views.py donde tranquilamente podemos usar las Class Based Views para poder mostrar nuestro formulario.

#django importsfrom django.contrib.auth.models import User

#form importsfrom users.forms import SignupForm

classSignupView(FormView):""" signing up a new user"""
    template_name = 'users/signup.html'
    success_url = reverse_lazy ('users:login')
    form_class = SignupForm```

En nuestro template _signup.html _tenemos que cargar widget-tweaks colocando el tag _**{% load widget_tweaks %} **_despues de haber heredado de nuestro template _base.html,_ dentro del bucle utilizaremos el **_tag render_field_** donde podremos colocar los atributos HTML como clases y placeholders, en este ejemplo los placeholders ya los colocamos desde los widgets,esto nos permite recorrer los campos del formulario y tener menos lineas de codigo en nuestro template.



{% extends ‘base.html’%}

{% load widget_tweaks %}

{% block container%}

<div class=“container w-50”>

    <form method="POST" action="{% url "users:signup" %}">
        {% csrf_token %}

        {% for field in form.visible_fields %}
        <div class="form-group">
          {% render_field field class="form-control" %}
        </div>
      {% endfor %}
        
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div> 

{%endblock%}


Ahora cada uno de nuestros campos tendrá los estilos CSS de Bootstrap.

Para mas información pueden leer la documentación del proyecto .
[https://github.com/jazzband/django-widget-tweaks](url)



Escribe tu comentario
+ 2
1
8716Puntos

Hola, oye por qué usar un CharField en email ,en lugar de EmailField?