How to make a html form stack-CodePudding

UPDATE: This is how it looks now: New layout

This is the html/css for the form:

{% extends 'base.html' %}

{% block content %}
<form action="/join/" method="post">
    {% csrf_token %}
    {{ form }}

    <div style="text-align:center">
    <div >
        <div >
            <div >
            </div>
        </div>
    </div>
    
    <style>

      form {
        display: flex;
        flex-direction: column;
        background: #d2dce1;
        padding: 4vh 3vh;
      }





    body, .button, .tick {
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: sans-serif;
    }
    
    body {
      width: 100%;
      height: 90vh;
    }
    
    .button {
      width: 300px;
      height: 80px;
      background: rgba(221, 68, 68, 0.867)0;
      border-radius: 6px;
      transition: all .3s cubic-bezier(0.67, 0.17, 0.40, 0.83);
    }
    
    .button svg {
      transform: rotate(180deg);
      transition: all .5s;
    }
    
    .button__circle {
      width: 120px;
      height: 120px;
      background: rgba(221, 68, 68, 0.867);
      border-radius: 50%;
      transform: rotate(-180deg);
    }
    
    .button:hover {
      cursor: pointer;
    }
    
    .tick {
      color: white;
      font-size: 2em;
      transition: all .9s;
    }
    </style>
    
    <script>
    let button = document.querySelector('.button');
    let buttonText = document.querySelector('.tick');
    
    const tickMark = "<svg width=\"58\" height=\"45\" viewBox=\"0 0 58 45\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"#fff\" fill-rule=\"nonzero\" d=\"M19.11 44.64L.27 25.81l5.66-5.66 13.18 13.18L52.07.38l5.65 5.65\"/></svg>";
    
    buttonText.innerHTML = "Submit";
    
    button.addEventListener('click', function() {
    
      if (buttonText.innerHTML !== "Submit") {
        buttonText.innerHTML = "Submit";
      } else if (buttonText.innerHTML === "Submit") {
        buttonText.innerHTML = tickMark;
      }
      this.classList.toggle('button__circle');
    });
    
    </script>


</div>
</form>

{% endblock %}

I want to have these fields and the button stacked one on top of the other, like 5 high and 1 wide. How do I do that? I can't find anything online. Even when I align them to center they just kinda jumble each other together, but I want them to stack one on top of the other neatly.

UPDATE: I followed the answer I checked below, now the text fields are lined up but the button is still to the left. How do I fix the button?

CodePudding user response：

Add these to the form
Also take a look at flexbox

display: flex;
flex-direction: column;

form {
  display: flex;
  flex-direction: column;
  background: #d2dce1;
  padding: 4vh 3vh;
}

<form>
  <label for="a">a</label>
  <input id="a" type="text" />
  <label for="a">a</label>
  <input id="a" type="text" />
  <label for="a">a</label>
  <input id="a" type="text" />
  <label for="a">a</label>
  <input id="a" type="text" />
  <button type="submit">Submit</button>
</form>

CodePudding user response：

you can use "form" element like and Inside the form element, several inputs are nested with different type. also you should use css to give style to form element.

you can read this article in w3school website: https://www.w3schools.com/html/html_forms.asp

and this: https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms