_form.html 3.43 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
{% comment %}
Template to display a form using styling from the form and pure-css.

Parameters that can be passed (in the with clause of an include) are:

action: Url to send the submitted form to e.g.'/search/'  default is '.'
        i.e. the current url 

aligned: Boolean variable, if true the 'pure-form-aligned' class is applied
        if false the class 'pure-form-stacked' is appled

form_class: Additional css classes to apply to the form tag

form_id: Id attribute for the form e.g. id_search_form

inline_checkbox: Boolean variable, if true checkboxes are displayed inline
        regardless of whether the form is stacked or aligned, styling
        is determined by aligned variable

legend: Legend to display at the top of the form

method: The submit method, e.g. GET, POST

submit: Legend for the submit button (default is 'Submit')

submit_id: Id of the submit button

submit_2_id and submit_2_name and submit_2_value: three variables to allow
        definition of a second submit button and define it's id, name and
        value.

{% endcomment %}
<style>
  .pure-form-stacked input[type=checkbox] ~ strong label { display: inline-block !important; }
</style>
36
<form action="{% if action %}{{ action }}{% else %}.{% endif %}" {% if form_id %}id="{{ form_id }}"{% endif %} method="{% if method %}{{ method }}{% else %}post{% endif %}" {% if multipart %}enctype="multipart/form-data"{% endif %} class="pure-form {% if aligned %}pure-form-aligned{% else %}pure-form-stacked{% endif %}{% if form_class %} {{ form_class }}{% endif %}">
37 38 39
  {% if not no_token %}
    {% csrf_token %}
  {% endif %}
40 41 42
  {% if form.non_field_errors %}
    {{ form.non_field_errors }}
  {% endif %}
Patrick Kimber's avatar
Patrick Kimber committed
43
  <fieldset>
44 45 46
    {% if legend %}
      <legend>{{ legend }}</legend>
    {% endif %}
47
    {% for field in form.visible_fields %}
48 49 50 51 52
      {% if inline_checkbox and field.field.widget.input_type %}
        {% include '_form_field.html' with field=field field_type=field.field.widget.input_type %}
      {% else %}
        {% include '_form_field.html' with field=field %}
      {% endif %}
53 54 55 56 57 58 59 60 61 62 63
    {% endfor %}
    {% if formset %}
      {{ formset.management_form }}
    {% endif %}
    {% for formset_form in formset %}
      <legend>
        {{ formset_legend }}
        {% if formset_add %}
          {{ forloop.counter|add:formset_add }}:
        {% else %}
          {{ forloop.counter }}:
64
        {% endif %}
65 66
      </legend>
        {% for field in formset_form.visible_fields %}
67 68 69 70 71
          {% if inline_checkbox %}
              {% include '_form_field.html' with field=field field_type=field.field.widget.input_type %}
          {% else %}
              {% include '_form_field.html' with field=field %}
          {% endif %}
Patrick Kimber's avatar
Patrick Kimber committed
72
        {% endfor %}
73 74 75
      {% for hidden in formset_form.hidden_fields %}
      {{ hidden }}
      {% endfor %}
Patrick Kimber's avatar
Patrick Kimber committed
76 77 78
    {% endfor %}
    <div class="pure-controls">
      <p>
79
      <input type="submit" id="{% if submit_id %}{{ submit_id }}{% else %}submit{% endif %}" value="{% if submit %}{{ submit }}{% else %}Submit{% endif %}" class="pure-button pure-button-primary" />
80 81 82
        {% if submit_2_id and submit_2_name and submit_2_value %}
          <input type="submit" id="{{ submit_2_id }}" name="{{ submit_2_name }}" value="{{ submit_2_value }}" class="pure-button" />
        {% endif %}
Patrick Kimber's avatar
Patrick Kimber committed
83 84 85 86 87 88
      </p>
    </div>
  </fieldset>
  {% for hidden in form.hidden_fields %}
    {{ hidden }}
  {% endfor %}
89 90 91
  {% if next %}
    <input type="hidden" name="next" value="{{ next }}" />
  {% endif %}
Patrick Kimber's avatar
Patrick Kimber committed
92
</form>