CODEWITHSUNDEEP
htmlcss
xylar
xylar

Reputation: 7673

Styling Form with Label above Inputs

I would like to produce the following form style:

Name                    Email
[.................]     [.................]

Subject
[.................]

Message
[.........................................]
[.........................................]
[.........................................]
[.........................................]

The HTML code I have is:

<form name="message" method="post">
    <section>
    <label for="name">Name</label>
    <input id="name" type="text" value="" name="name">
    <label for="email">Email</label>
    <input id="email" type="text" value="" name="email">
    </section>
    <section>
    <label for="subject">Subject</label>
    <input id="subject" type="text" value="" name="subject">
    <label for="message">Message</label>
    <input id="message" type="text" value="" name="message">
    </section>
</form>

At the moment it is producing:

Name    [...................]
Email   [...................]
Subject [...................]
Message
[.........................................]
[.........................................]
[.........................................]
[.........................................]

What would be the best way to do this? I keep getting in a muddle my floats!

Upvotes: 114

Views: 364029

Answers (9)

Andrei Cleland
Andrei Cleland

Reputation: 436

Using flex-direction: column; on the label elements will place the labels above their boxes, however it will also lock all the boxes in a long column. To get more than one box per line, with the label above the boxes you must pair them with divs. Here is an example of both:

#survey-form1 label {
  display:flex;
  flex-direction:column;
}

#survey-form2 {
  display: flex;
  flex-direction: row;
}

.inputPair {
  display: flex;
  flex-direction: column;
  margin-right: 10px
}
<form id="survey-form1">
  <label for="name1">Name</label>
  <input type="text" id="name1">

  <label for="email1">Email</label>
  <input type="email" id="email">
</form>

<form id="survey-form2">
  <div class="inputPair">
    <label for="name2">Name2</label>
    <input type="text" id="name2">
  </div>
<div class="inputPair">
  <label for="email2">Email2</label>
  <input type="email" id="email2">
</div>
</form>

Upvotes: 6

Bogdan Pavel
Bogdan Pavel

Reputation: 19

OR....you can use flexbox with flex-direction: column on the imputs and they will arrange like bliss.

Upvotes: -1

Mardiya
Mardiya

Reputation: 201

Probably a bit late but this worked for me. i simply used column flex-direction on the label and input elements HTML

<form id="survey-form">
    <label for="name">Name</label>
    <input type="text" id="name">
    
    <label>Email</label>
    <input type="email" id="email">
  </form>

CSS

label,input{
  display:flex;
  flex-direction:column;
}

Upvotes: 20

Tomanek1
Tomanek1

Reputation: 75

There is no need to add any extra div wrapper as others suggest.

The simplest way is to wrap your input element inside a related label tag and set input style to display:block.

Bonus point earned: now you don't need to set the labels for attribute. Because every label target the nested input.

<form name="message" method="post">
    <section>
        <label class="left">
            Name
            <input id="name" type="text" name="name">
        </label>
        <label class="right">
            Email
            <input id="email" type="text" name="email">
        </label>
    </section>
</form>

https://jsfiddle.net/Tomanek1/sguh5k17/15/

Upvotes: 3

fin1te
fin1te

Reputation: 4351

I'd make both the input and label elements display: block , and then split the name label & input, and the email label & input into div's and float them next to each other.

input, label {
    display:block;
}
<form name="message" method="post">
    <section>

  <div style="float:left;margin-right:20px;">
    <label for="name">Name</label>
    <input id="name" type="text" value="" name="name">
  </div>

  <div style="float:left;">
    <label for="email">Email</label>
    <input id="email" type="text" value="" name="email">
  </div>

  <br style="clear:both;" />

    </section>

    <section>

    <label for="subject">Subject</label>
    <input id="subject" type="text" value="" name="subject">
    <label for="message">Message</label>
    <input id="message" type="text" value="" name="message">

    </section>
</form>

Upvotes: 157

Chris
Chris

Reputation: 133

I know this is an old one with an accepted answer, and that answer works great.. IF you are not styling the background and floating the final inputs left. If you are, then the form background will not include the floated input fields.

To avoid this make the divs with the smaller input fields inline-block rather than float left.

This:

<div style="display:inline-block;margin-right:20px;">
    <label for="name">Name</label>
    <input id="name" type="text" value="" name="name">
</div>

Rather than:

<div style="float:left;margin-right:20px;">
    <label for="name">Name</label>
    <input id="name" type="text" value="" name="name">
</div>

Upvotes: 6

MingXiao
MingXiao

Reputation: 21

10 minutes ago i had the same problem of place label above input

then i got a small ugly resolution

<form>
    <h4><label for="male">Male</label></h4>
    <input type="radio" name="sex" id="male" value="male">
</form>

The disadvantage is that there is a big blank space between the label and input, of course you can adjust the css

Demo at: http://jsfiddle.net/bqkawjs5/

Upvotes: 1

Diadistis
Diadistis

Reputation: 12174

I'd prefer not to use an HTML5 only element such as <section>. Also grouping the input fields might painful if you try to generate the form with code. It's always better to produce similar markup for each one and only change the class names. Therefore I would recommend a solution that looks like this :

CSS

label, input {
    display: block;
}
ul.form {
    width  : 500px;
    padding: 0px;
    margin : 0px;
    list-style-type: none;
}
ul.form li  {
    width : 500px;
}
ul.form li input {
    width : 200px;
}
ul.form li textarea {
    width : 450px;
    height: 150px;
}
ul.form li.twoColumnPart {
    float : left;
    width : 250px;
}

HTML

<form name="message" method="post">
    <ul class="form">
        <li class="twoColumnPart">
            <label for="name">Name</label>
            <input id="name" type="text" value="" name="name">
        </li>
        <li class="twoColumnPart">
            <label for="email">Email</label>
            <input id="email" type="text" value="" name="email">
        </li>
        <li>
            <label for="subject">Subject</label>
            <input id="subject" type="text" value="" name="subject">
        </li>
        <li>
            <label for="message">Message</label>
            <textarea id="message" type="text" name="message"></textarea>
        </li>
    </ul>
</form>

Upvotes: 4

ErsatzRyan
ErsatzRyan

Reputation: 3043

You could try something like

<form name="message" method="post">
    <section>
    <div>
      <label for="name">Name</label>
      <input id="name" type="text" value="" name="name">
    </div>
    <div>
      <label for="email">Email</label>
      <input id="email" type="text" value="" name="email">
    </div>
    </section>
    <section>
    <div>
      <label for="subject">Subject</label>
      <input id="subject" type="text" value="" name="subject">
    </div>
    <div class="full">
      <label for="message">Message</label>
      <input id="message" type="text" value="" name="message">
    </div>
    </section>
</form>

and then css it like

form { width: 400px; }
form section div { float: left; }
form section div.full { clear: both; }
form section div label { display: block; }

Upvotes: 6

Related Questions