CODEWITHSUNDEEP
htmlcss
Nevershow2016
Nevershow2016

Reputation: 570

How to Place Form Inputs on Their Own Lines

I am doing some work and have a form which I want to look like a list (think <ul> format, just without the bullets).

However, right now all the inputs are inline with each other:

Item 1  Item 2  Item 3  etc

I want it to look like:

Item 1 
Item 2 
Item 3 
etc

Code: 

<form action = "display.php" method = "post">
  <h1>My form</h1>
        <input type="checkbox" name="movie[]" value="action" />
        <label for="male">action</label>
      <br><br>
        <input type="checkbox" name="movie[]" value="adv" />
        <label for="male">adv</label>
<br><br>
    <h1>My form</h1>
        <input type="checkbox" name="movie[]" value="com" />
        <label for="male">com</label>
<br><br>
        <input type="checkbox" name="movie[]" value="rom" />
        <label for="male">rom</label>
<br><hr>
       <input type="submit" id="submitbutton" name="search" value="Submit">
</form>

I was also wondering if I could move the submit button and put it at the bottom of the page, so the form was on the top half of the page and then I wanted to move the button in the middle, how that would be possible? Right now the form is in a perfect position, but I would like to move the button so it's on the bottom half of the page in the middle.

Thanks again for the help.

Upvotes: 0

Views: 42

Answers (2)

user6119021
user6119021

Reputation:

TL:DR; http://codepen.io/anon/pen/YqQvoE (here is the code you need)

Long(er) explanation:

I would recommend just putting <br /> tags between your lines. There are several ways to go about it, but that is the easiest way.

As for the button being centered at the bottom, just apply the following CSS to it (and make sure to set the id of the button accordingly):

#submitbutton {
  display:block;
  margin:auto;
}

(also, your <form> tag needs to be closed)

By the way, as a best practice issue, make sure the for="" for each <label> is different. It should correspond to the name="" of the label's associated <input>.

Upvotes: 1

chriswirz
chriswirz

Reputation: 278

You need to close your form as well as your div. Also, surround the button in its own special span or div that has absolute positioning. Check out this example:

<form action = "display.php" method = "post">
    <input type="checkbox" name="movie[]" value="action" />
    <label for="male">action</label>

    <input type="checkbox" name="movie[]" value="adv" />
    <label for="male">adv</label>

    <input type="checkbox" name="movie[]" value="com" />
    <label for="male">com</label>

    <input type="checkbox" name="movie[]" value="rom" />
    <label for="male">rom</label>

    <span style="position: absolute; bottom: 0px; right: 0px; left: 0px; text-align: center;">
       <input type="submit" name="search" value="Submit">
    </span>
</form>

Upvotes: 0

Related Questions