Estoy tratando de agregar una página de registro a mi proyecto Django y he creado el formulario de registro en el archivo forms.py.

 
class createUserForm(UserCreationForm):
    class Meta:
        model = User
        fields = ['username', 'email', 'password1', 'password2']

        widgets = {
            'username' : forms.TextInput(attrs={'class':'form-control form-input','placeholder':'Username...'}),
            'email' : forms.EmailInput(attrs={'class':'form-control form-input','placeholder':'Email...'}),
            'password1' : forms.PasswordInput(attrs={'class':'form-control form-input','placeholder':'Password'}),
            'password2' : forms.PasswordInput(attrs={'class':'form-control form-input','placeholder':'Re-type password'}),

        }

Html

<h4>Sign in</h4>
                <div class="form-container">
                    <form method="POST" action="">
                <div class="form-render" style="display: block;">
                   {% csrf_token %}
                    <div style="margin-bottom: 1rem;">
                    {{form.username}}
                </div>
                    <div style="margin-bottom: 1rem;">
                    {{form.email}}
                    </div>
                    <div style="margin-bottom: 1rem;">
                    {{form.password1}}
                    </div>
                    <div style="margin-bottom: 1rem;">
                    {{form.password2}}
                    </div>
                        <button type="submit"  class="btn btn-primary" style="border-radius: 0px; outline-color: #167896; background-color:#167896; width: 15rem; margin-left: 1.5rem;">Submit</button>
                    </div>
                    </form>
                    <div style="display: flex; margin-left: 1.75rem; margin-top: 1rem; margin-bottom: 0rem;">
                        <p>Already have an account?</p><a style="text-decoration: none; " class="forgot" href="{% url 'login' %}">&nbsp Log in</a> 
                      </div>

                </div>

Después de renderizar HTML, los estilos de arranque no se agregan a los campos de entrada de contraseña. Esta es la captura de pantalla de mi página de salida.

1
Ananda Vishnu 8 ago. 2020 a las 12:11

3 respuestas

La mejor respuesta

No tiene que enviar las clases de arranque como attrs. Simplemente use Crispy Forms

pip install django-crispy-forms

Settings.py

INSTALLED_APPS = [
    ...
    "crispy_forms",
]

CRISPY_TEMPLATE_PACK = "bootstrap4"

Html:

{% load crispy_forms_tags %}

<form method="post">
    {{ my_formset|crispy }}
</form>
0
dgknca 8 ago. 2020 a las 09:20

Hay varias formas de despellejar a este gato, pero mi método preferido es usar el paquete django-bootstrap4: https://pypi.org/project/django-bootstrap4/

  • Instálelo en su venv: pip install django-bootstrap4
  • Agréguelo a su INSTALLED_APPS:
INSTALLED_APPS = (
    # ...
    "bootstrap4",
    # ...
)
  • Úselo en una plantilla:
{% load bootstrap4 %}

<h4>Sign in</h4>
<div class="form-container">
    <form method="POST" action="">
    {% csrf_token %}
    {% bootstrap_form form %}
    <button type="submit" class="btn btn-primary">Submit</button>
</div>

Automáticamente se encargará de mostrar los errores correctamente. Si necesita realizar acciones personalizadas para los campos, también puede recorrer los campos:

{% load bootstrap4 %}

<h4>Sign in</h4>
<div class="form-container">
    <form method="POST" action="">
    {% csrf_token %}
    {% for field in form %}
        {% bootstrap_field field %}
    {% endfor %}
    <button type="submit" class="btn btn-primary">Submit</button>
</div>

¡Buena suerte!

0
FlipperPA 8 ago. 2020 a las 11:44

Pero, ¿aparece la clase en el código fuente? si se muestra, entonces su archivo de arranque no se está cargando o está usando las medidas incorrectas

De todos modos puedes hacer una prueba, crea algo como esto:

<style>.form-a{width:100%:!important; height:36px; border:green;}</style>

¡Pon el código de arriba en tu página! Ahora coloque la clase form-a en su <input> y vea si se renderiza con un borde verde y ocupa todo el espacio disponible; de lo contrario, significa que las clases no están en el código fuente renderizado (lado del cliente) y, por lo tanto, hay otro problema con su código no relacionado con bootstrap. Si es como dije, su archivo de arranque no se está cargando o está usando las clases incorrectas para lo que pretende hacer.

0
Macedo_Montalvão 8 ago. 2020 a las 09:55