Putting Submit button at the bottom of the form

Question

I want the submit button to be at the bottom of the form. I have tried using <div>, <div float="left">, <div float="right">, <br> and <span>. So far the only solution I have come up with is to repeat <br> multiple times which is a messy solution and one that is only compatible on laptops the same size as mine.

 <form method="post" action="">
      {% csrf_token %}

      {% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}

<div float="left">
{# Include the visible fields #}
{% for field in form.visible_fields %}
    <br class="fieldWrapper">
        {{ field.errors }}
        {{ field.label_tag }} 
</br>


        {{ field }}

{% endfor %}

      </div>
      <div float="right"><input type="submit" value="Submit"></div>



    </form>

Update I tried Gumbos suggestion (CSS How to place a submit button on a new line?). But there is something about the map which is making the submit button act strangely. For testing purposes I created a submit button after every field. Gumbos suggestion worked fine for text boxes and list boxes. But not maps.

{% extends "blog/base.html" %}

{% block content %}

{% load crispy_forms_tags %}


<html>



<head>
<style>
  input[type=submit] {display: block}
</style>
{{ form.media }}



</head>



 <body>

    <form method="post" action="">
        {% csrf_token %}
        {% for hidden in form.hidden_fields %}
        {{ hidden }}
        {% endfor %}

        {# Include the visible fields #}
        {% for field in form.visible_fields %}

        <br class="fieldWrapper">
        {{ field.errors }}
        {{ field.label_tag }} 
        </br>
        {{ field }}
        <input type="submit" value="Submit">
        {% endfor %}
  </form>



</body>

</html>

{% endblock content %}

Don't use a `float` on the map. This causes the `div` not to act like a `block` object and push the next div down the page. If you need the float for some reason (its not apparent from your code). Remember to [clear your floats](https://www.w3schools.com/howto/howto_css_clearfix.asp) so the other elements behave normally. — Bryce Howitson, Jun 13 '20 at 02:07
I have put an update at the bottom of my post. It is something about the map which is making the submit button act strangely. — Ross Symonds, Jun 14 '20 at 01:31

score 0 · Answer 1 · answered Jun 13 '20 at 06:18

I think you need to remove the float and change br into div

<form method="post" action="">
  {% csrf_token %}

  {% for hidden in form.hidden_fields %}
  {{ hidden }}
  {% endfor %}

  <div>
    {# Include the visible fields #}
    {% for field in form.visible_fields %}

    <div className="fieldWrapper">
      {{ field.errors }}
      {{ field.label_tag }}
    </div>

    {{ field }}

    {% endfor %}

  </div>
  <div><input type="submit" value="Submit"></div>
</form>

I have put an update at the bottom of my post. It is something about the map which is making the submit button act strangely. — Ross Symonds, Jun 14 '20 at 01:31

score 0 · Answer 2 · answered Jun 18 '20 at 18:33

0

Check out this post Overwrite float:left property in span for the answer.

With Bens help I was able to overwrite some of the default CSS.

answered Jun 18 '20 at 18:33

Ross Symonds

690
1
8
29

Putting Submit button at the bottom of the form

2 Answers2

Linked