Created
February 15, 2012 19:04
-
-
Save maraujop/1838193 to your computer and use it in GitHub Desktop.
django-crispy-forms bootstrap form example
This file contains 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
# -*- coding: utf-8 -*- | |
from django import forms | |
from crispy_forms.helper import FormHelper | |
from crispy_forms.layout import Layout, Div, Submit, HTML, Button, Row, Field | |
from crispy_forms.bootstrap import AppendedText, PrependedText, FormActions | |
class MessageForm(forms.Form): | |
text_input = forms.CharField() | |
textarea = forms.CharField( | |
widget = forms.Textarea(), | |
) | |
radio_buttons = forms.ChoiceField( | |
choices = ( | |
('option_one', "Option one is this and that be sure to include why it's great"), | |
('option_two', "Option two can is something else and selecting it will deselect option one") | |
), | |
widget = forms.RadioSelect, | |
initial = 'option_two', | |
) | |
checkboxes = forms.MultipleChoiceField( | |
choices = ( | |
('option_one', "Option one is this and that be sure to include why it's great"), | |
('option_two', 'Option two can also be checked and included in form results'), | |
('option_three', 'Option three can yes, you guessed it also be checked and included in form results') | |
), | |
initial = 'option_one', | |
widget = forms.CheckboxSelectMultiple, | |
help_text = "<strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.", | |
) | |
appended_text = forms.CharField( | |
help_text = "Here's more help text" | |
) | |
prepended_text = forms.CharField() | |
prepended_text_two = forms.CharField() | |
multicolon_select = forms.MultipleChoiceField( | |
choices = (('1', '1'), ('2', '2'), ('3', '3'), ('4', '4'), ('5', '5')), | |
) | |
# Uni-form | |
helper = FormHelper() | |
helper.form_class = 'form-horizontal' | |
helper.layout = Layout( | |
Field('text_input', css_class='input-xlarge'), | |
Field('textarea', rows="3", css_class='input-xlarge'), | |
'radio_buttons', | |
Field('checkboxes', style="background: #FAFAFA; padding: 10px;"), | |
AppendedText('appended_text', '.00'), | |
PrependedText('prepended_text', '<input type="checkbox" checked="checked" value="" id="" name="">', active=True), | |
PrependedText('prepended_text_two', '@'), | |
'multicolon_select', | |
FormActions( | |
Submit('save_changes', 'Save changes', css_class="btn-primary"), | |
Submit('cancel', 'Cancel'), | |
) | |
) |
This file contains 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
{% extends 'base.html' %} | |
{% load crispy_forms_tags %} | |
{% block content %} | |
{% crispy form %} | |
{% endblock %} |
This file contains 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
# -*- coding: utf-8 -*- | |
from django.shortcuts import render | |
from forms import MessageForm | |
def index(request): | |
# This view is missing all form handling logic for simplicity of the example | |
return render(request, 'index.html', {'form': MessageForm()}) |
@arindam31 I have the same question. i have got the form fields but can't seem to find a way to put text in front of the fields, for instance "Name:" in front of the text field to fill in the name. Any help guys?
What is in the base.html
, please ?
@arindam31 I also had the same question, how can i work on it? can any any one help us
@rachuri333 I don't remember what I was trying to do back then . But this is what my form looks like.
class BlogPostForm(forms.ModelForm):
class Meta:
model = models.Post
fields = ['title', 'text', 'tags', 'author', 'slug']
helper = FormHelper()
helper.form_class = 'form-group'
helper.layout = Layout(
Field('title', css_class='form-control mt-2 mb-3'),
Field('text', rows="3", css_class='form-control mb-3'),
Field('author', css_class='form-control mb-3'),
Field('tags', css_class='form-control mb-3'),
Field('slug', css_class='form-control'),
)
You can browse my project to find the complete code.: https://github.com/arindam31/Django_TravelBlog
how can i put a bootstrap switch?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What if we are using a modelForm ? Like this below: