Forms de Django

En este tutorial aprenderás a crear forms usando las forms de

django. Te guiaré paso a paso para que puedas utilizar forms,
darles estilo (de Bootstrap) y hacer algo con la información que
obtienes de estas.

La idea de este tutorial nació porque al comenzar a utilizar

Django tardé bastante tiempo en aprender a usar las forms. Mi
propósito es ayudarte y darte una aproximación básica del uso
de forms de Django.

Este turtorial fue desarrollado en un sistema operativo

Windows 10 Home . Para instalar django en Windows 10,
sigue el siguiente tutorial
(https://docs.djangoproject.com/en/2.1/howto/windows/).

Prerrequisitos:

 Instalar Python 3.6.6

(https://www.python.org/downloads/)

Para lograr concluir este tutorial se necesita:

 Python 3.6.6 / Django 2.1.2 / Bootstrap 4.1

Django -> Framework de desarrollo (Python)

Bootstrap -> Framework de comportamiento y diseño (js, css)

Es recomendable concluir el siguiente tutorial
(https://docs.djangoproject.com/es/2.1/intro/tutorial01/)
antes de comenzar con Forms de Django.

NOTA: Es recomendable crear un ambiente virtual para el

desarrollo de este tutorial y de cualquier proyecto que
realices. Si no tienes nada de experiencia con Django, sigue
este tutorial para la creación de un proyecto y sus respectivas
apps
(https://docs.djangoproject.com/es/2.1/intro/tutorial01/).

En resumen, se necesita:

1. Dentro del directorio en el que desees crear tu proyecto,

ingresa a tu virtual environment
workon nombre_de_mi_virtualEnv

(nombre_de_mi_virtualEnv es el virtual environment que

creaste en el
tutorial https://docs.djangoproject.com/en/2.1/howto/windo
ws/)

2. Crear un proyecto (desde la command prompt)

django-admin startproject mysite

(El proyecto creado tendrá la siguiente estructura)

Estructura del proyecto

3. Dentro de la carpeta del proyecto (mysite), crear una app

(en nuestro caso llamada forms)
cd mysitepy manage.py startapp forms

4. Dentro de la carpeta mysite, en el archivo settings.py, incluir

forms dentro de INSTALLED APPS.
INSTALLED_APPS =
['django.contrib.admin','django.contrib.auth','django.contrib.c
ontenttypes','django.contrib.sessions','django.contrib.messages
','django.contrib.staticfiles','forms',]

5. Dentro de la carpeta mysite, en el archivo urls.py, incluir las

urls de nuestra aplicación forms:
mysite/urls.py (Archivo original)

Eliminamos comentarios e importamos include y creamos el

path hacia los urls de nuestra app forms. Le diremos a la
aplicación que al no leer ningún path en el navegador, se dirija
a algún url que definiremos más adelante dentro de urls.py de
la carpeta forms.

mysite/urls.py (Archivo editado)

from django.contrib import admin
from django.urls import path, includeurlpatterns = [
path('', include('forms.urls')),
path('admin/', admin.site.urls),
]

Para propósitos del tutorial, más adelante crearemos un

modelo de “Usuarios” para guardar la información que
enviemos en los posts de nuestros forms en la base de datos.

Creamos la view que mostrará

nuestra form:

Estructura del proyecto

En la carpeta forms, creamos una carpeta templates y dentro

de esta, una carpeta llamada forms (en django es buena
práctica crear nuestros html templates así).
Dentro de forms/templates/forms/ creamos un archivo
llamado mi_form.html que se encargará de mostrar nuestra
form y todos los Usuarios que vayamos creando.

NOTA: Por ahora solo le pondremos un HOLA!

En la carpeta forms en el archivo views.py creamos nuestra

view llamada index.
from django.shortcuts import renderdef index(request):
return render(request, 'forms/mi_form.html')

En el archivo urls.py importamos las views de forms y creamos

el path que nos llevará a nuestra view.
from django.contrib import admin
from django.urls import path
from . import viewsapp_name = 'forms'
urlpatterns = [
path('', views.index, name='mi_form'),
]

NOTA: En este caso, queremos acceder a la form sin

necesidad de escribir nada en el url del navegador. O sea…

Queremos tener:
http://127.0.0.1:8000/

En lugar de:
http://127.0.0.1:8000/path_de_url
Viendo los resultados:

Corremos el server de django

py manage.py runserver

En nuestro navegador, nos dirigimos a:

http://127.0.0.1:8000/

Y obtendremos la siguiente página:

Ya logramos mostrar contenido en la página! Ahora

comenzaremos a meternos con el estilo.

Dándole estilo y estructura a nuestra página:

Cambiamos toda la estructura de nuestro archivo

mi_form.html como la estructura base de un archivo html.
Además, importamos los .css y .js de Bootstrap.
<!DOCTYPE html>
<html><head>
<title>Mis forms</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bo
otstrap.min.css" integrity="sha384-
MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPM
O" crossorigin="anonymous">
</head><body>
<div class="container text-center pt-5">
<h1>Hola</h1>
<p>Mi tutorial de forms</p>
</div><script src="https://code.jquery.com/jquery-
3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jiz
o" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/um
d/popper.min.js" integrity="sha384-
ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm4
9" crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/boot
strap.min.js" integrity="sha384-
ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULT
y" crossorigin="anonymous"></script>
</body>
</html>

Nuestra página ahora se debe ver así:

Creando el modelo que guardará
los datos de los Usuarios:
En la carpeta forms, en el archivo models.py

forms/models.py

Creamos nuestro modelo

forms/models.py
from django.db import modelsclass Usuarios(models.Model):
nombre = models.CharField(max_length=15)
telefono = models.CharField(max_length=12)
fecha_de_nacimiento = models.DateField()
email = models.EmailField(max_length=254)

NOTA: Existen muchos tipos de Fields que puedes usar para

tus models. Puedes checar estas referencias para conocerlos
todos
(https://docs.djangoproject.com/es/2.1/ref/models/fields/).

Después de la creación de nuestro modelo, realizamos las

migraciones:
py manage.py makemigrationspy manage.py migrate
Con estos comandos ya tenemos nuestra base de datos
db.sqlite3 en nuestro proyecto lista para usarse.

Ahora sí!! Creamos nuestro form:

Dentro de la carpeta forms, creamos un archivo forms.py
copy nul > forms/forms.py
NOTA: También puedes crearlo desde tu IDE o manejador de
archivos.

En el archivo forms que acabamos de crear:

1. Importamos forms de Django y el modelo Usuarios

que acabamos de crear:
from django import forms
from forms.models import Usuarios

2. Declaramos nuestra form como una class:

class RegistrarUsuario(forms.Form):

NOTA: Así como declaramos las variables de nuestro modelo

Usuarios en models.py, tenemos que declarar las variables
que nuestro form utilizará. Es importante que entre nuestro
modelo y nuestra form exista consistencia en las variables.

3. Declaramos las variables que utilizaremos

nombre = forms.CharField(label='Nombre:',max_length=15)
telefono = forms.CharField(label='Teléfono',max_length=12)
fecha_de_nacimiento = forms.DateField(label='Fecha de
nacimiento:')
email = forms.EmailField(label='Email:',max_length=254)

NOTA: En las forms de Django, cada variable que se declare,

será un <input> en el html.

Archivo de forms.py:

from django import forms

from forms.models import Usuariosclass
RegistrarUsuario(forms.Form):nombre =
forms.CharField(label='Nombre:',max_length=15)
telefono = forms.CharField(label='Teléfono',max_length=12)
fecha_de_nacimiento = forms.DateField(label='Fecha de
nacimiento:')
email = forms.EmailField(label='Email:',max_length=254)

Modificamos el archivo views.py (de la carpeta forms)

importando nuestra form para que se le pase al html que la va
a renderizar:
from django.shortcuts import render
from .forms import RegistrarUsuariodef index(request):
register_form = RegistrarUsuario()
return render(request, 'forms/mi_form.html', {'register_form':
register_form})

Modificamos el archivo mi_form.html para que muestre los

<input> de la register_form que le acabamos de pasar:
<!DOCTYPE html>
<html><head>
<title>Mis forms</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bo
otstrap.min.css" integrity="sha384-
MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPM
O" crossorigin="anonymous">
</head><body>
<div class="container text-center pt-5">
<h1>Hola</h1>
<p>Mi tutorial de forms</p>
<div class='jumbotron'>
<form action="{% url 'forms:mi_form' %}" method="post">
{% csrf_token %}
{% for field in register_form %}
<div class='form-group'>
<label for="{{ field.name }}">{{ field.label }}</label>
{{ field }}
</div>
{% endfor %}
<br>
<center><button type="submit" class="btn btn-success btn-
lg">Registrar usuario</button></center>
</form>
</div>
</div><script src="https://code.jquery.com/jquery-
3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jiz
o" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/um
d/popper.min.js" integrity="sha384-
ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm4
9" crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/boot
strap.min.js" integrity="sha384-
ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULT
y" crossorigin="anonymous"></script>
</body>
</html>

Explicación de código
<p>Mi tutorial de forms</p>
<div class='jumbotron'>
<form action="{% url 'forms:mi_form' %}" method="post">
{% csrf_token %}
{% for field in register_form %}
 <div class='form-group'>
<label for="{{ field.name }}">{{ field.label
}}</label>
{{ field }}
</div>
{% endfor %}
<br>
<center><button type="submit" class="btn btn-success
btn-lg">Registrar usuario</button></center>
</form>
</div>

En esta parte del código, (gracias a Django) le estamos

diciendo al html que por cada variable (field) que declaramos
en nuestra form (en forms.py), tiene que mostrar e variable
como un <input> con su respectiva <label>. También vemos
el {% csrf_token %} que es una llave que utiliza Django para
protegernos de Cross Site Request Forgery.
<p>Mi tutorial de forms</p>
<div class='jumbotron'>
<form action="{% url 'forms:mi_form' %}" method="post">
{% csrf_token %}
{% for field in register_form %}
<div class='form-group'>
<label for="{{ field.name }}">{{ field.label
}}</label>
{{ field }}
</div>
{% endfor %}
<br>
<center><button type="submit" class="btn btn-success btn-
lg">Registrar usuario</button></center>
</form>
</div>

Esas clases son las que sacamos de Bootstrap para hacer que
nuestra página se vea bien… pero… ¿Cómo se ve ahora?
Con lo que hemos creado hasta ahora, nuestra página sólo
tiene unos inputs que se pueden enviar pero no se hace nada
con esta información. Además, nuestro <input> de fecha es
un type=”text” que no nos sirve para nuestro propósito.

Aregando Django widgets a

nuestros inputs:
Para evitar que nuestro <input> de fecha sea un type=”text”,
tenemos que agregarle un widget a las variables de nuestra
form.

Modificamos nuestro archivo forms.py (de la carpeta forms)

para que cada variable (input) tenga un widget del tipo que
corresponda:
from django import forms
from forms.models import Usuariosclass
RegistrarUsuario(forms.Form):nombre =
forms.CharField(label='Nombre:',max_length=15,
widget=forms.TextInput())
telefono = forms.CharField(label='Teléfono',max_length=12,
widget=forms.TextInput())
fecha_de_nacimiento = forms.DateField(label='Fecha de
nacimiento:', widget=forms.SelectDateWidget(years=range(1900,2001)))
email = forms.EmailField(label='Email:',max_length=254,
widget=forms.EmailInput())

Si es forms.CharField, el widget correspondiente es:

widget=forms.TextInput()

En el caso de forms. DateField, el widget correspondiente es:

widget=forms.SelectDateWidget(years=range(1900,2001))

Que además de hacer que el <input> sea type=”date”, le damos

un rango de fechas para que sólo mayores de 18 puedan
“registrarse”.

NOTA: Si quieres conocer todos los widgets de Django, visita

la siguiente página
(https://docs.djangoproject.com/es/2.1/ref/forms/widgets/).

Aún con los widgets agregados, nuestra form se ve un poco

insípida en cuanto a diseño…
Agregando diseño a nuestros
<inputs>:
<div class="container text-center pt-5">
<h1>Hola</h1>
<p>Mi tutorial de forms</p>
<div class='jumbotron'>
<form action="{% url 'forms:mi_form' %}" method="post">
{% csrf_token %}
{% for field in register_form %}
<div class='form-group'>
<label for="{{ field.name }}">{{ field.label }}</label>
{{ field }}
</div>
{% endfor %}
<br>
<center><button type="submit" class="btn btn-success
btn-lg">Registrar usuario</button></center>
</form>
</div>
</div>

Aquí podemos ver que cada field (<input>) se inserta uno igual
al otro. No existe ningún tipo de consideración al respecto.

NOTA: Existen maneras de darle estilo y personalización a

cada input en el htlm pero para propósitos de este tutorial, lo
haremos de otra manera que aumenta la mantenibilidad del
proyecto.

Dándole estilo a cada <input>

Ya discutimos previamente las variables que dan vida a cada

input de los forms y sus respectivos widgets… Ahora, veremos
cómo pasar parámetros a los widgets que afectan su
comportamiento en el html.
En el archivo forms.py (de la carpeta forms), agregamos
attrs={} a los widgets:
nombre = forms.CharField(label='Nombre:',max_length=15,
widget=forms.TextInput(
attrs={
'class':'form-control',
'placeholder':'Nombre',
}))
telefono = forms.CharField(label='Teléfono',max_length=12,
widget=forms.TextInput(
attrs={
'class':'form-control',

'placeholder':'4421234567',
}))
fecha_de_nacimiento = forms.DateField(label='Fecha de
nacimiento:',

widget=forms.SelectDateWidget(years=range(1900,2001),
attrs={
'class':'form-control',
}))
email = forms.EmailField(label='Email:',max_length=254,
widget=forms.EmailInput(
attrs={
'class':'form-control',

'placeholder':'[email protected]',
}))
¿Qué falta en esta imagen que sí está en el código de arriba? PISTA: ayuda a los usuarios a
ver un ejemplo de lo que tienen que poner en los inputs.

En el archivo mi_form.html
(forms/templates/forms/mi_form.html) agregamos unas
cuantas clases de Bootstrap para darle un poco más de estilo:
<!DOCTYPE html>
<html><head>
<title>Mis forms</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bo
otstrap.min.css" integrity="sha384-
MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPM
O" crossorigin="anonymous">
</head><body>
<div class="container text-center pt-5">
<h1>Hola</h1>
<p>Mi tutorial de forms</p>
<div class='jumbotron'>
<center>
<div class="text-left" style="max-width:500px">
 <form action="{% url 'forms:mi_form' %}"
method="post">
{% csrf_token %}
{% for field in register_form %}
<div class='form-group'>
<label for="{{ field.name }}">{{ field.label
}}</label>
{{ field }}
</div>
{% endfor %}
<br>
<center><button type="submit" class="btn btn-
success btn-lg">Registrar usuario</button></center>
</form>
</div>
</center>
</div>
</div><script src="https://code.jquery.com/jquery-
3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jiz
o" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/um
d/popper.min.js" integrity="sha384-
ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm4
9" crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/boot
strap.min.js" integrity="sha384-
ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULT
y" crossorigin="anonymous"></script>
</body>
</html>

Y ahora nuestra form se ve así:

¿Supiste lo que faltaba?

Ya quedó!!! Estilo y estructura!

Pero… ¿qué hacemos con la información de la form?,

¿cómo la guardamos en la base de datos?

Guardando información en la base

de datos:
Django tiene definidas funciones que ayudan a interactuar con
la base de datos sin necesidad de una sola línea de código sql.

NOTA: Para un mayor entendimiento de la forma en la que

estas funciones operan, por favor consulta esta página
(https://docs.djangoproject.com/es/2.1/topics/db/queries/).
A continuación, mostraré cómo podemos guardar la
información de nuestra form con una función declarada dentro
de su estructura.

Primero importamos datetime (para trabajar con fechas) y

definimos esta función:
from datetime import datetimedef registrar_usuario(self):
fecha = datetime(int(self.data['fecha_de_nacimiento_year']),

int(self.data['fecha_de_nacimiento_month']),

int(self.data['fecha_de_nacimiento_day']))

nuevo_usuario = Usuarios(nombre=self.data['nombre'],
telefono=self.data['telefono'],
fecha_de_nacimiento=fecha,
email=self.data['email'])
nuevo_usuario.save()
return 'Registro exitoso'

Aquí le estamos diciendo que cree un objeto de tipo Usuario

(como una fila en nuestra base de datos).

NOTA: Lo que está en negritas es la forma en la que el html

nos está mandando los inputs de la fecha (year, month, day)
por lo que tenemos que hacer un datetime() para guardar
estos valores en uno compatible con nuestra base de datos.
from datetime import datetimedef registrar_usuario(self):
fecha =
datetime(int(self.data['fecha_de_nacimiento_year']),

int(self.data['fecha_de_nacimiento_month']),

int(self.data['fecha_de_nacimiento_day']))

nuevo_usuario = Usuarios(nombre=self.data['nombre'],
telefono=self.data['telefono'],
fecha_de_nacimiento=fecha,
email=self.data['email'])
nuevo_usuario.save()
return 'Registro exitoso'
Pero no es sino hasta esta parte que le decimos que guarde
ese nuevo_usuario en nuestra base de datos (gracias al
método .save() de Django).

Finalmente sólo confirmamos que el registro fue realizado

correctamente.

Para poder utilizar esta función, necesitamos cambiar nuestra

view index para hacer que si el request del usuario es un POST,
se ejecute el guardado del nuevo_usuario, si no, que sólo se
muestre nuestra forma vacía.

Para eso, validamos si el método del request es un POST:

def index(request):
if request.method == 'POST':
# Aquí guarda la información
else:
# Aquí muestra nuestra form

Ahora obtenemos y checamos que la form sea válida. Si sí lo es,

se ejecuta nuestra función de guardado de datos y se
redirecciona a nuestra form vacía de nuevo:
def index(request):
if request.method == 'POST':
register_form = RegistrarUsuario(request.POST)
if register_form.is_valid():
success = register_form.registrar_usuario(request.user)
return redirect('./')
else:
# Aquí muestra nuestra form

Para el caso else, sólo creamos la form vacía y se la mandamos

al html para que la se muestre:
def index(request):
if request.method == 'POST':
register_form = RegistrarUsuario(request.POST)
if register_form.is_valid():
success =
register_form.registrar_usuario(request.user)
 return redirect('./')
else:
register_form = RegistrarUsuario()
return render(request, 'forms/mi_form.html', {'register_form':
register_form})

Ahora ya se están guardando Usuarios en nuestra base de

datos!!

Pero no los podemos ver…

Modificarémos nuestro <body> del archivo mi_form.html

para mostrar una tabla con nuestros usuarios:
<div class="container text-center pt-5">
<h1>Hola</h1>
<p>Mi tutorial de forms</p>
<div class='jumbotron'>
<center>
<div class="text-left" style="max-width:500px">
<form action="{% url 'forms:mi_form' %}"
method="post">
{% csrf_token %}
{% for field in register_form %}
<div class='form-group'>
<label for="{{ field.name }}">{{ field.label
}}</label>
{{ field }}
</div>
{% endfor %}
<br>
<center><button type="submit" class="btn btn-
success btn-lg">Registrar usuario</button></center>
</form>
</div>
</center>
<br>
<table class="table table-striped table-bordered">
<thead class="thead-dark">
<tr>
<th>#</th>
<th>Nombre</th>
<th>Telefono</th>
<th>Fecha de nacimiento</th>
<th>Email</th>
 </tr>
</thead><tbody>
{% for user in usuarios %}
<tr>
<td>{{ user.id }}</td>
<td>{{ user.nombre }}</td>
<td>{{ user.telefono }}</td>
<td>{{ user.fecha_de_nacimiento }}</td>
<td>{{ user.email }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>

Y la view para que le pase al html la lista de usuarios:

from django.shortcuts import render, redirect
from .models import Usuarios
from .forms import RegistrarUsuariodef index(request):
mis_usuarios = Usuarios.objects.all()
if request.method == 'POST':
register_form = RegistrarUsuario(request.POST)
if register_form.is_valid():
success = register_form.registrar_usuario()
return redirect('./')
else:
register_form = RegistrarUsuario()
return render(request, 'forms/mi_form.html',
{'register_form': register_form,'usuarios': mis_usuarios})

Y listo! Tenemos una aplicación con un diseño que registra

usuarios en una base de datos gracias a una form de Django y a
las clases de Bootstrap.