9

I have an HTML form element:

<form action="doit" id="doit" method="post">
Name <br/>
<input id="name" name="name" type="text" /> <br/>
Phone number <br/>
<input id="phone" name="phone" type="text" /> <br/>
Year <br/>
<input id="year" name="year" type="text" /> <br/>
</form>

I would like there to be a little more space between the fields, for example, between the lines

<input id="name" name="name" type="text" /> <br/> and Phone number <br/>,

and also between

<input id="phone" name="phone" type="text" /> <br/> and Year <br/>.

How can I do it?

4 Answers 4

18

I would wrap your rows in labels

<form action="doit" id="doit" method="post">
    <label>
        Name
        <input id="name" name="name" type="text" />
    </label>
    <label>
        Phone number
        <input id="phone" name="phone" type="text" />
    </label>
    <label>
        Year
        <input id="year" name="year" type="text" />
    </label>
</form>

And use

label, input {
    display: block;
}

label {
    margin-bottom: 20px;
}

Don't use brs for spacing!

Demo: http://jsfiddle.net/D8W2Q/

1
  • Also use <label for="name"> for better user experience and screen reader.So that if user click label, cursor automatically focus on respective input element.
    – VIJAY P
    Mar 28, 2018 at 9:32
18

In your CSS file:

input { margin-bottom: 10px; }
0
0

A simple &nbsp; between input fields would do the job easily...

-3
  <form>     
            <div class="form-group">
                <label for="nameLabel">Name</label>
                <input id="name" name="name" class="form-control" type="text" /> 
            </div>
            <div class="form-group">
                <label for="PhoneLabel">Phone</label>
                <input id="phone" name="phone" class="form-control" type="text" /> 
            </div>
            <div class="form-group">
                <label for="yearLabel">Year</label>
                <input id="year" name="year" class="form-control" type="text" />
            </div>
        </form>
1
  • Inline style repeated on every div + keep the <br>s, seriously?
    – Capsule
    Nov 24, 2017 at 4:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.