3 Formas de darle estilos a tus formularios de Django

En este artículo veremos tres de las formas de darle estilo a tus formularios de Django con Bootstrap cuando usamos las vistas basadas en clases: Create/Update View. ¿No sabes cómo hacerlo? ¿Te interesa el tema? Lee este post para que descubras nuevas maneras de hacerlo y compartas tu conocimiento con nosotros. # 1. Configurando todo Antes de comenzar con el artículo necesitas tener: * Un editor de texto, sugiero VSCode * Python3 instalado, si no lo tienes puedes ver [Cómo instalar Python y crear entornos virtuales](https://binary-coffee.dev/post/como-instalar-python-y-crear-entornos-virtuales) Ahora necesitas clonar la base del proyecto desde GitHub e instalar las dependencias: ``` git clone https://github.com/dcs-community/songs.git cd songs/ pip install -r requirements.txt ``` En el archivo `models.py` de la app `core` definimos nuestro modelo: ``` from django.db import models class Song(models.Model): title = models.CharField(max_length=100) album = models.CharField(max_length=100) duration = models.IntegerField() def __str__(self): return self.title ``` Creamos las migraciones de nuestra DB y las aplicamos: ``` python3 manage.py makemigrations python3 manage.py migrate ``` Creamos el formulario de nuestra clase en el archivo `core/forms.py`: ``` from django import forms from core.models import Song class SongForm(forms.ModelForm): class Meta: model = Song fields = ['title', 'duration', 'album'] ``` Creamos nuestra vista en `core/views.py` y especificamos que plantilla y que formulario usaremos: ``` from django.shortcuts import render, reverse from django.views.generic import CreateView from core.forms import SongForm from core.models import Song class SongCreate(CreateView): model = Song template_name = 'core/create_song.html' form_class = SongForm def get_success_url(self): return reverse('create-song') ``` Por defecto django tratará de usar la plantilla `appname/modelname_form.html`. Ahora creamos nuestra plantilla en `templates/core/create_song.html`: ``` {% extends 'base.html' %} {% block content %} <form method="POST"> {% csrf_token %} {{form.as_p}} <input type="submit" value="Create"> </form> {% endblock %} ``` Agregamos a las URLs esta vista, `songs/urls.py`: ``` from django.conf.urls import url from django.contrib import admin from core.views import SongCreate urlpatterns = [ url(r'^admin/', admin.site.urls), url('', SongCreate.as_view(), name='create-song') ] ``` Si corremos nuestro proyecto veremos el siguiente formulario.  ## 2. Agregando estilos a fuerza bruta El formulario que se pasa a la plantilla, el que renderizamos contiene todos los campos así que podríamos ponerle a cada input el nombre del campo: ``` {% extends 'base.html' %} {% block content %} <form method="POST"> {% csrf_token %} <div class="form-group"> <input type="text" class="form-control" name="{{form.title.name}}"> </div> <div class="form-group"> <input type="number" class="form-control" name="{{form.duration.name}}"> </div> <div class="form-group"> <input type="text" class="form-control" name="{{form.album.name}}"> </div> <input type="submit" value="Create"> </form> {% endblock %} ``` Esta versión es un poco extensa y poco recomendada porque tenemos que definirlo absolutamente todo y generaría mucho código.  ## 3. Usando los Forms Es posible especificar en `core/forms.py` para cada campo los atributos que tendrá al renderizarse a HTML. ``` from django import forms from core.models import Song class SongForm(forms.ModelForm): class Meta: model = Song fields = ['title', 'duration', 'album'] title = forms.CharField(widget=forms.TextInput(attrs={'class': 'form-control'})) duration = forms.CharField(widget=forms.NumberInput(attrs={'class': 'form-control'})) album = forms.CharField(widget=forms.TextInput(attrs={'class': 'form-control'})) ``` Y en nuestra plantilla solamente tenemos que mostrar el formulario que esta en el epígrafe #1. Esto generaría el mismo resultado que el ejemplo anterior.  # 4. Crispy Forms Es la versión más simple de implementar, para ello necesitamos instalar la librería `crispy_forms`, `pip install crispy_forms`. Al instalarla la agregamos en nuestros `setting.py`. ``` INSTALLED_APPS = [ ... 'crispy_forms', ] CRISPY_TEMPLATE_PACK = 'bootstrap4' ``` `CRISPY_TEMPLATE_PACK` es simplemente que librería UI usará tu proyecto, actualmente cuenta con soporte para `bootstrap`, `bootstrap3` y `bootstrap4` aunque te permite configurarla para tus propios estilos. Retornamos `core/forms.py` a la versión del epígrafe #1. Ahora para renderizar el formulario con los estilos y clases de Bootstrap simplemente modificamos la plantilla como sigue: ``` {% extends 'base.html' %} {% load crispy_forms_tags %} {% block content %} <form method="post" novalidate> {% csrf_token %} {{ form|crispy }} <button type="submit" class="btn btn-success">Save person</button> </form> {% endblock %} ``` Y una vez más obtenemos el mismo resultado:  Esperamos que este artículo te haya servido y esperamos que cualquier duda o sugerencia nos las hagas saber en los comentarios. > **Keep Calm and Drink Binary Coffee**