title: Django crispy form tab
body: <p><br> I am now studying <code>Django form</code>. Right now I am focusing on <code>crispy form</code>. <br><br>For now crispy and then after I master the <code>form</code> I will move on to <code>Django Admin form</code> and <code>Django admin model form</code>.<br></p>
  
  <p>Django 1.10<br>
  Python 3.6.0<br></p>
  
  <p>I am following these tutorials:<br>
  <a href="https://blog.bixly.com/awesome-forms-django-crispy-forms" rel="nofollow noreferrer">https://blog.bixly.com/awesome-forms-django-crispy-forms</a><br>
  <a href="http://django-crispy-forms.readthedocs.io/en/latest/layouts.html#" rel="nofollow noreferrer">http://django-crispy-forms.readthedocs.io/en/latest/layouts.html#</a><br>
  <a href="https://godjango.com/29-crispy-forms/" rel="nofollow noreferrer">https://godjango.com/29-crispy-forms/</a></p>
  
  <p>Here are my source code: <br><br>
  <code>views.py:</code></p>
  
  <pre><code>from django.views.generic import FormView
  from apps.colors.forms import PersonDetailForm
  
  class ColorStudyView(FormView):
      template_name = 'colors/study.html'
      form_class = PersonDetailForm
      success_url = '/'
  </code></pre>
  
  <p><code>forms.py:</code></p>
  
  <pre><code>from crispy_forms.bootstrap import Tab, TabHolder
  from crispy_forms.helper import FormHelper
  from crispy_forms.layout import Submit, Layout
  from django import forms
  
  
  class NoFormTagCrispyFormMixin(object):
      @property
      def helper(self):
          if not hasattr(self, '_helper'):
              self._helper = FormHelper()
              self._helper.form_tag = False
          return self._helper
  
  
  class PersonDetailForm(forms.Form):
      name = forms.CharField(max_length=100)
      age = forms.IntegerField(required=False)
      address1 = forms.CharField(max_length=50, required=False)
      address2 = forms.CharField(max_length=50, required=False)
      city = forms.CharField(max_length=50, required=False)
      state = forms.CharField(max_length=50, required=False)
  
      mobile = forms.CharField(max_length=32, required=False)
      home = forms.CharField(max_length=32, required=False)
      office = forms.CharField(max_length=32, required=False)
      twitter = forms.CharField(max_length=100, required=False)
  
      def __init__(self, *args, **kwargs):
          super().__init__(*args, **kwargs)
          self.helper = FormHelper()
          self.helper.form_tag = False
          self.helper.layout = Layout(
              TabHolder(
                  Tab('Information',
                      'name',
                      'age'
                      ),
                  Tab('Address',
                      'address1',
                      'address2',
                      'city',
                      'state'
                  ),
                  Tab('Contact',
                      'mobile',
                      'home',
                      'office',
                      'twitter',
                  )
              )
          )
          self.helper.layout.append(Submit('submit', 'Submit'))
  </code></pre>
  
  <p><code>study.html:</code></p>
  
  <pre><code>{% load crispy_forms_tags %}
  
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Study&lt;/title&gt;
      &lt;form action="" method="POST"&gt;
      {% crispy form %}
      &lt;/form&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Problem:</strong><br>
  Tab does not change.<br>
  Am I miss something?<br>
  Sorry for very basic level question, but this is my first day with <code>Django frontend</code><br><br></p>
  
  <p>Here is my picture. Tab <code>Address</code> and <code>Contact</code> are not work.
  <br><br>
  <a href="https://i.stack.imgur.com/eCzOG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eCzOG.png" alt="enter image description here"></a></p>
  
  <p><strong>Update:</strong>
  Zollie solves my problem. Here is my <code>study.html</code></p>
  
  <pre><code>{% load staticfiles %}
  {% load crispy_forms_tags %}
  
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Study&lt;/title&gt;
      &lt;form action="" method="POST"&gt;
      {% crispy form %}
      &lt;/form&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;
  &lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="{% static 'bootstrap-tab.js' %}"&gt;  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is my filesystem configuration<br></p>
  
  <pre><code>/Users/el/Code/siam-sbrand/static
  (siam-sbrand) Sarits-MacBook-Air-2:static el$ ls
  admin           django_extensions   img
  bootstrap-tab.js    file.txt        js
  dist            font            rest_framework
  </code></pre>