HTML引导程序形式：如何在元素之间增加间距，增加文本区域的大小？

Question

I inherited a small webdev project and I'm a bit lost of how to do two things:

1) Add more space between elements (padding?)

2) Increase the number of rows in my textarea (bottom element)

And here is the code:

       <form class="contact-form" id="contactForm" action="php/contact2.php" method="post">

        <div class="form-row">
          <div class="col-md-12">
            <input type="text" name="senderName" id="firstName" placeholder="Fist Name" required>
          </div>



          <div class="form-row">
            <div class="col-md-12">
                <input type="text" name="lastName" id="lastName" placeholder="Last Name" required>
            </div>
        </div>

        <div class="form-row">
          <div class="col-md-12">
            <input type="text" name="institution" id="inst" placeholder="Institution" required>
          </div>
        </div>

        <div class="form-row">
          <div class="col-md-12">
            <input type="city" name="city" id="city" placeholder="City" required>
          </div>
          <div class="col-md-12">
            <input type="state/province" name="stateprov" id="stateProv" placeholder="State/Province" required>
          </div>
          <div class="col-md-12">
            <input type="text" name="country" id="country" placeholder="Country" required>
          </div>
          <div class="col-md-12">
            <input type="text" name="zipost" id="zipost" placeholder="Zip/Postal" required>
          </div>
        </div>

        <div class="form-row">
          <div class="col-md-12">
            <input type="text" name="phone" id="phone" placeholder="Phone" required>
          </div>
          <div class="col-md-12">
            <input type="text" name="senderEmail" id="email" placeholder="Email" required>
          </div>
          <div class="col-md-12">
            <input type="text" name="email" id="email" placeholder="Confirm Email" required>
          </div>
        </div>

        <div class="form-row">
          <div class="col-md-12">
            <input type="textarea" name="body" id="body" placeholder="Please describe your intended project(s), and how you plan to use the Apollo Platform." required>
          </div>
        </div>



        <div class="clearfix"></div>
        <div class="col-md-18">
          <button type="submit" class="btn-regular alignleft contact_button">Apply Now</button>
        </div>
      </form>

How can I accomplish my two goals? Thanks!

Answer 1

CSS

.form-row div { margin-bottom: 10px; }
.form-row input[type="textarea"] { height: 200px; }

Answer 2

First there is no input type of textarea. The format for the textarea form elements is:

<textarea name="body" id="body" placeholder="Please describe your intended project(s), and how you plan to use the Apollo Platform." required></textarea>

If you want to add more height to a textarea you can do it with style="height:100px" or you can add the rows attribute rows="5" for example

If you want more padding you should be wrapping your labels and inputs in a block using bootstraps form-group class to stick with the automatic padded formats available to you in the bootstrap lib. You may also want to consider adding the bootstrap built in style to your form inputs and textarea which is form-control

Answer 3

I would use:

.col-md-12{ padding-bottom: 10px; }

for the first problem.

And for the second one why not use the <textarea> tag?