-
-
Save maraujop/1838193 to your computer and use it in GitHub Desktop.
# -*- 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'), | |
) | |
) |
{% extends 'base.html' %} | |
{% load crispy_forms_tags %} | |
{% block content %} | |
{% crispy form %} | |
{% endblock %} |
# -*- 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()}) |
I get this right by wrapping the form in a container
div. Thank you for this great app.
@flyingfoxlee Have you tried replace container
by container-fluid
?
This is cool, thanks so much!
Which is that 'base.html'?
What is its path?
Thank you in advance!
Dosen't work
init() got an unexpected keyword argument 'instance' ERROR
thanks for the example, it helped me solve some issues with my form, but I still got couple more.
is there a way to use chosen with AppendedText like
This works
AppendedText('user','a link to add a new user')
but this one does not work
AppendedText(Field('user', css_class='chosen'),'a link to add a new user')
the form displays chosen JS autofill but it does not show the link
- What is the role of helper.class = 'form-horizontal'?
- My form does not appear like a 2 column table, as in this example. What am I missing?
@sureshvv form-horizontal is from bootstrap I think
ImportError: No module named 'forms'
What to do?
How can i display radio buttons horizontally instead of vertically?? Same for the checkboxes. Can you show syntax for that in helper class?
Thanks.
Guys, I tried using inline as explained in documentation but it had no effect on the outcome. Below is my code. can someone help me identify what I am doing wrong?? Thanks.
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',
InlineRadios('radio_buttons'),
Field('checkboxes', style="background: #FAFAFA; padding: 10px;"),
InlineCheckboxes('checkboxes'),
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'),
)
)
Hi.. Nice tutorial. Is there a way to output the submitted results on the same page when one clicks save changes, in form of a table?
Thank you in advance.
OP you saved my life by sharing this codes.
Thanks for this code its working perfectly
What if we are using a modelForm ? Like this below:
class BlogPostForm(forms.ModelForm):
class Meta:
model = models.Post
fields = ['title', 'text', 'tags', 'author', 'slug']
@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?
I use crispy_forms with html5-boilerplate and bootstrap3, got the result as follow
screen
The right and left side of the rendered page exceeds the boundary of the browser.
Zoom in or zoom out won't help.
Also, it seems that it treat the web browser as a mobile one. In fact, it's on laptop.