¿Cómo personalizar formularios Django usando Django Widget Tweaks?

Los formularios de Django son una gran característica para crear formularios utilizables con solo unas pocas líneas de código. Pero Django no nos permite editar fácilmente el formulario para obtener buenos diseños. Aquí, veremos una de las formas de personalizar los formularios de Django, para que se vean de acuerdo a nuestro deseo en nuestra página HTML. Básicamente, verificaremos los métodos para incluir nuestro propio css personalizado, clases o id en campos individuales en los formularios.

Digamos que tenemos un formulario Django simple que tendrá cuatro campos:

• Primer nombre
• Apellido
• Nombre de usuario (predeterminado disponible)
• Contraseña (disponible por defecto)
• Confirmar contraseña (predeterminado disponible)

No vamos a discutir cómo creamos este formulario, sino que vamos a ver cómo personalizar la interfaz de los formularios de Django. Para crear un formulario en Django, puede consultar: ¿ Cómo crear un formulario usando Django Forms?

Los formularios iniciales de Django (aspecto predeterminado disponible)

El formulario Django por defecto

que tendrá un código simple como

{{form}}
 <input type="submit" value="submit">

Por supuesto, hay muchos métodos predeterminados que Django nos proporciona de forma predeterminada, como usar form.as_p , que se ve así

Formulario Django usando as_p 

que tendrá un código simple como

{{form.as_p}}
<input type="submit" value="submit">

Pero necesitamos agregar clases personalizadas y CSS a los formularios. 

¿Cómo personalizar formularios Django usando Django Widget Tweaks?

Entonces, veamos cómo hacer que se vea bien así.

Formulario de entrada de formulario Django personalizado

Así que vamos a implementarlo usando Django Widget Tweaks. Instalemos django-widget-tweaks usando pip

pip install django-widget-tweaks

Ahora ve a INSTALLED_APPS en settings.py
y agrega widget_tweaks en INSTALLED_APPS

INSTALLED_APPS = [
   'django.contrib.auth',

#...........(some more apps already here maybe)......
   
'widget_tweaks',

#...........(some more apps already here maybe)......
]

Entonces, ahora que tenemos instalados los ajustes del widget de Django, importémoslo en el archivo HTML en el que estamos trabajando,
escriba esto

{% cargar widget_ajustes%}

en la parte superior de su página HTML y simplemente tenemos que cambiar Cada campo:

{% load widget_tweaks %}
  
<div class="form-group">
  // first_name is the name by which first name is created in django forms
  {% render_field form.first_name class="form-control" placeholder="First Name" type="text" %}
</div>
  
<div class="form-group">
   // last_name is the name by which last name is created in django forms
  {% render_field form.last_name type="text" class="form-control" placeholder="Last Name" %}
</div>
  
<div class="form-group">
   // username is the default name of username in django forms
  {% render_field form.username type="text" class="form-control" id="exampleInputUsername" placeholder="Username" %}
</div>
  
<div class="form-group">
   // password1 is the default name of password in django forms
  {% render_field form.password1 type="password" class="form-control" id="exampleInputPassword" placeholder="Password" %}
</div>
  
<div class="form-group">
   // password2 is the default name of confirm password in django forms
  {% render_field form.password2 type="password" class="form-control" id="exampleInputPassword1" placeholder="Confirm Password" %}
</div>
  
<div>
  <button type="submit" value="Submit" > Register </button>
</div>

El nombre de cada campo se ha explicado en “//” en el código. En el archivo CSS, tendremos todo nuestro código para personalizar cada archivo por clase o id.

Entonces, veamos cómo nos ayudan los ajustes de Django. Vea en cada uno de los campos, tenemos nuestra clase gracias a la cual podemos agregar cualquier CSS de nuestra elección. Entonces, solo tenemos que diseñar el HTML con css y usarlo en Django simplemente reemplazando la etiqueta de entrada con render_field y form.field_name con {% %} al final y diseñarlo con nuestra elección.