Created
January 28, 2016 13:28
-
-
Save gollum23/af0188e72bf45b6fd995 to your computer and use it in GitHub Desktop.
Ejemplo de formulario para personalizar con css
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* models */ | |
from django.db import models | |
class Example(models.Model): | |
example = models.CharField(max_lenght=155, verbose_name="Ejemplo") | |
class Meta: | |
verbose_name = "Ejemplo" # Como se muestra en el administrador el modelo | |
verbose_name_plural = "Ejemplos" # Como se muestra en el administrador el modelo | |
def __str__(self): | |
return '{}'.format(self.name) # Como se muestra la instancia creada en el administrador o en dropdowns | |
/* forms.py */ | |
from django import forms | |
from .models import Example | |
class ExampleForm(forms.ModelForm): | |
label = 'Ejemplo' | |
example = forms.Charfield( | |
widget=forms.TextInput( | |
attrs={'placeholder': 'Ejemplo', 'class': 'mi-ejemplo'} | |
) | |
) | |
class Meta: | |
model = Example | |
fields = '__all__' # Aqui defines que campos del modelo quieres que salgan en el formulario tambien se puede usar exclude | |
/* view.py */ | |
from django.shortcuts import render | |
from .models import Example | |
from .forms import ExampleForm | |
def home_view(request): | |
form = ExampleForm(request.POST or None) | |
if form.is_valid(): | |
form.save() | |
ctx = { | |
'form': form | |
} | |
return render(request, 'index.html', ctx) | |
/* index.html */ | |
# Tienes tu estructura de html y donde va el formulario pones | |
<div class="Row"> | |
<form action="." method="post"> | |
{% csrf_token %} | |
<div>{{ form.example.label_tag }}</div> # Aqui tienes el label del campo esta en una etiqueta <label> | |
<div>{{ form.example }} {{form.example.errors</div> # Aqui esta el input y si hay error, por ejemplo que no escriben nada aparece el error que tambien lo puedes personalizar por css | |
<div><input type="submit">Enviar</input></div> | |
</form> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment