Los campos de formulario de Django tienen varios métodos integrados para facilitar el trabajo del desarrollador, pero a veces es necesario implementar cosas manualmente para personalizar la interfaz de usuario (UI). Ya hemos cubierto ¿Cómo crear y usar un formulario en Django? . Un formulario viene con 3 métodos incorporados que se pueden usar para representar los campos de formulario de Django.
- {{ form.as_table }} los representará como celdas de tabla envueltas en etiquetas <tr>
- {{ form.as_p }} los renderizará envueltos en etiquetas <p>
- {{ form.as_ul }} los renderizará envueltos en etiquetas <li>
Estos procesan el formulario automáticamente, pero si desea crear un formulario hermoso con algunos efectos CSS, debe procesar los campos del formulario manualmente. Este artículo gira en torno a cómo representar los campos de formulario manualmente.
Representación manual de campos de formulario
Ilustración de renderizar formularios de Django manualmente usando un ejemplo. Considere un proyecto llamado geeksforgeeks que tenga una aplicación llamada geeks.
Consulte los siguientes artículos para comprobar cómo crear un proyecto y una aplicación en Django.
En su aplicación geeks, cree un nuevo archivo llamado forms.py donde estaría creando todos sus formularios. Para crear un formulario de Django, debe usar Django Form Class . Demostremos cómo,
en su formularios.py Ingrese lo siguiente,
Python3
from django import forms # creating a form class InputForm(forms.Form): first_name = forms.CharField(max_length = 200) last_name = forms.CharField(max_length = 200) roll_number = forms.IntegerField( help_text = "Enter 6 digit roll number" ) password = forms.CharField(widget = forms.PasswordInput())
Expliquemos qué está sucediendo exactamente, el lado izquierdo indica el nombre del campo y, a la derecha, define varias funcionalidades de un campo de entrada correspondiente. La sintaxis de un campo se denota como
Sintaxis:
Field_name = forms.FieldType(attributes)
Ahora, para convertir este formulario en una vista, muévase a views.py y cree una home_view como se muestra a continuación.
Python3
from django.shortcuts import render
from .forms import InputForm
# Create your views here.
def home_view(request):
context ={}
context['form']= InputForm()
return render(request, "home.html", context)
En vista, uno solo necesita crear una instancia de la clase de formulario creada anteriormente en forms.py.
Ahora vamos a editar plantillas > home.html
html
<form action = "" method = "post">
{% csrf_token %}
{{form }}
<input type="submit" value=Submit">
</form>
Todo listo para verificar si el formulario funciona o no, visite http://localhost:8000/
.
El formulario funciona correctamente, pero las imágenes son decepcionantes. Podemos representar estos campos manualmente para mejorar algunas cosas visuales. Cada campo está disponible como un atributo del formulario usando {{ form.name_of_field }}, y en una plantilla de Django, se representará apropiadamente. Por ejemplo:
{{ form.non_field_errors }}
<div class="fieldWrapper">
{{ form.subject.errors }}
<label for="{{ form.subject.id_for_label }}">Email subject:</label>
{{ form.subject }}
</div>
.
Modifiquemos nuestro formulario para que se vea bastante impresionante,
html
<html>
<head>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<style>
.i-am-centered {
margin: auto;
max-width: 300px;
padding-top: 20%;
}
</style>
</head>
<body>
<div class="i-am-centered">
<form method="POST">
{% csrf_token %}
<div class="form-group">
<label>First Name </label>
{{ form.first_name }}
</div>
<div class="form-group">
<label>Last Name </label>
{{ form.last_name }}
</div>
<div class="form-group">
<label>Roll Number</label>
{{ form.roll_number }}
</div>
<div class="form-group">
<label>Password</label>
{{ form.password }}
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Ahora visite http://localhost:8000/ y verifique el formulario modificado.
Estas fueron solo algunas modificaciones básicas usando Bootstrap. Uno puede personalizarlo a un nivel avanzado usando varios trucos y métodos de CSS.
{{ campo }} atributos
- {{ field.label }}
La etiqueta del campo, por ejemplo, dirección de correo electrónico. - {{ field.label_tag }}
La etiqueta del campo envuelta en la etiqueta HTML adecuada. Esto incluye el label_suffix del formulario. Por ejemplo, el sufijo_etiqueta predeterminado es dos puntos:
<label for="id_email">Email address:</label>
- {{ field.id_for_label }}
El ID que se utilizará para este campo (id_email en el ejemplo anterior). Si está construyendo la etiqueta manualmente, puede usar esto en lugar de label_tag. También es útil, por ejemplo, si tiene algo de JavaScript en línea y quiere evitar codificar el ID del campo. - {{ field.value }}
El valor del campo. por ejemplo, alguien@ejemplo.com. - {{ field.html_name }}
El nombre del campo que se usará en el campo de nombre del elemento de entrada. Esto tiene en cuenta el prefijo del formulario, si se ha establecido. - {{ field.help_text }}
Cualquier texto de ayuda que se haya asociado con el campo. - {{ field.errors }} Muestra
una <ul class=”errorlist”> que contiene los errores de validación correspondientes a este campo. Puede personalizar la presentación de los errores con un bucle {% for error in field.errors %}. En este caso, cada objeto del bucle es una string que contiene el mensaje de error. - {{ field.is_hidden }}
Este atributo es True si el campo del formulario es un campo oculto y False en caso contrario. No es particularmente útil como variable de plantilla, pero podría ser útil en pruebas condicionales como:
{% if field.is_hidden %} {# Do something special #} {% endif %} - {{ field.field }}
La instancia de Field de la clase de formulario que envuelve este BoundField. Puede usarlo para acceder a los atributos de campo, por ejemplo, {{ char_field.field.max_length }}
Publicación traducida automáticamente
Artículo escrito por NaveenArora y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA