Estilos a Forms Django


Saludos, un post rápido, donde explicaré la manera de como darle estilos CSS a los formularios creados con Django. La primera forma es la siguiente

Primera Forma
class MyForm(forms.Form): myfield = forms.CharField(widget=forms.TextInput(attrs={'class' : 'myfieldclass'}))

Segunda Forma:

class MyForm(forms.ModelForm):
class Meta:
model = MyModel

def __init__(self, *args, **kwargs):
super(MyForm, self).__init__(*args, **kwargs)
self.fields['myfield'].widget.attrs.update({'class' : 'myfieldclass'})

Tercera Forma:

class MyForm(forms.ModelForm):
class Meta:
model = MyModel
widgets = {
'myfield': forms.TextInput(attrs={'class': 'myfieldclass'}),
}

La diferencia entre cada una de ellas es visible, en la primera le das estilo solo al input text que necesitas, puedes definir diferentes estilos para diferentes input text. En la segunda le das el mismo estilos a todos los campos (fields) del formulario y en la tercera le das estilo solo a los campos de texto (TextInput) el mismo estilo para todos

Lógicamente debes cambiar el “myfieldclass” por tu class en CSS.

Si deseas agregar un “Placeholder”, basta con agregar siguiente a (attrs={'class: 'myfieldclass', 'placeholder': 'lo que desees'})

Anuncios

6 comentarios en “Estilos a Forms Django

  1. No suelo comentar, pero si que te lo mereces!! Muchas gracias, había buscado esto por semanas! Y ahora en este sitio lo he encontrado, he utilizado la segunda forma y me ha funcionado a la perfección!! Muchas gracias!

  2. Hola que tal! estoy comenzando en la programacion en Django y MVC, pero tengo problemas con los form, ya que no me cargan correctamente los estilos css, este metodo funciona igual para la version 1.10 de Django? o tengo que modificar algo? me seria de mucha ayuda, gracias!.

  3. Estoy intentando usar el método 3, pero no puedo hacer que funcione.
    Te adjunto mi código

    class IngresoTrabajador(forms.ModelForm):

    class Meta:
    model = Trabajador
    fields = ‘__all__’
    widgets = {
    ‘myfield’: forms.TextInput(attrs={‘class’: ‘form-control’}),
    }

    Si pudieras ayudarme te lo agradecería un montón.
    Nicolás Fernando

    1. Pero la tercera opcion es para darle solo a un campo y ese campo de llamarse myfield, es decir,

      class IngresoTrabajador(forms.ModelForm):

      class Meta:
      model = Trabajador
      fields = ‘__all__’
      widgets = {
      ‘*TUCAMPO*’: forms.TextInput(attrs={‘class’: ‘form-control’}),
      }

      Avisame y saludos.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s