Align multiple labels to left of form input

Question

I'm trying to stack two <span> tags in a form input label. At the moment, they're sitting next to each other, but I'm not sure how to move span.label-sm under the regular span. I've already set it to display: block;.

Desired outcome: https://i.stack.imgur.com/qKQDC.jpg.

HTML:

<div id="appraisals-form" class="contact-form">
    <form role="form" method="post" action="contact-form.php">
        <label for="name"><span>Name</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your name." /></label>
        <label for="email"><span>Email</span><input type="email" class="input-field" name="email" required data-errormessage-value-missing="Please enter your email address." /></label>
        <label for="email"><span>Phone</span><input type="tel" class="input-field" name="phone" required data-errormessage-value-missing="Please enter your phone number." /></label>

        <label for="name"><span>Type of Artwork</span><span class="label-sm">(i.e. sculpture, painting...)</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your item's type of artwork." /></label>

        <label for="message"><span>Message</span><textarea name="message" class="textarea-field" required data-errormessage-value-missing="Please enter your message."></textarea></label>
        <div class="centred-button"><input type="submit" value="" class="submit-button" /></div>                  
    </form>             
</div>

CSS:

.contact-form {
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    max-width: 600px;
    font-family: 'LinotypeUniversW01-Thin_723604', Arial, sans-serif;
    font-size: 20px;
}

.contact-form label {
    display: block;
    margin: 0px 0px 15px 0px;
    text-transform: uppercase; /* New */
}

.contact-form label > span {
    padding-top: 8px;
}

.contact-form label > span, #recaptcha::before {
    width: 100px;
    text-align: right;
    float: left;
    padding-right: 20px;
    content: "";
}

.contact-form input, .contact-form textarea {
    margin-bottom: 15px;
    padding: 10px;
    border: none;
}

.contact-form input.input-field {
    width: 70%;
    height: 20px;
    font-size: 18px;
}

.contact-form .textarea-field {
    height: 250px;
    margin-bottom: 11px;
}

.contact-form .textarea-field, .g-recaptcha {
    width: 70%;
    font-size: 18px;
    display: inline-block;
}

.g-recaptcha {
    height: 78px !important;
}

#recaptcha {
    display: block;
    margin: 0px 0px 24px 0px;
}

textarea {
    resize: none;
}

textarea:focus, input:focus {
    outline: 0;
}

input.submit-button {
    background-image: url("../img/submit-button.jpg");
    width: 225px;
    height: 60px;
    border: none;
}






.appraisals .section-title {
    width: 100%;
}

#appraisals-form {
    width: 100%;
    max-width: 700px;
    top: auto;
    transform: none;
}

#appraisals-form label > span {
    width: 150px;
    font-size: 16px
}

#appraisals-form span.label-sm {
    display: block;
    font-size: 14px;
    text-transform: none;
}

#appraisals-form input, #appraisals-form textarea {
    background-color: #d7d7d7;
}

#appraisals-form textarea {
    height: 100px;
}

#appraisals-form .centred-button {
    text-align: center;
}

Fiddle: http://jsfiddle.net/tcap2Lcp/.

Any help would really appreciated!

For span.label-sm to sit under span, like this: http://i.imgur.com/fXkvNTu.jpg — Mario Parra, Aug 19 '15 at 00:42

score 3 · Answer 1 · edited May 23 '17 at 11:52

As an alternative to my first answer, which uses CSS positioning properties and width adjustments to align the labels on the left of the input, this solution keeps things very simple with only HTML.

The idea is to display the small labels as placeholder text.

This element gets deleted:

<span class="label-sm">(i.e. sculpture, painting...)</span>

But the text goes into a placeholder:

<label for="name">
    <span>Type of Artwork</span>
    <input type="text" class="input-field" name="name" required 
    data-errormessage-value-missing="Please enter your item's type of artwork."
    placeholder="(i.e. sculpture, painting...)" >
</label>

And that's it!

Clean, simple, reusable code (as you requested). Easy to maintain. User-friendly. And no changes to the CSS... unless you decide you want to style the placeholder text.

score 2 · Answer 2 · answered Aug 19 '15 at 00:49

This will nest the two <span> tags without changing the appearnce:

<span>Type of Artwork</span><span class="label-sm">(i.e. sculpture, painting...)</span></span>

I'm unsure what you are trying to achieve though, so not sure if your CSS needs a small change, possibly:

.label-sm {
  display: block;
  font-size: 14px;
  text-transform: none;
 }

Michael Benjamin · Accepted Answer · 2015-08-19T03:16:49.440

2

You can accomplish this task with CSS positioning properties.

HTML

<!-- ADJUSTED BLOCK START -->
<label for="name" style="position: relative; width: 100%;">
   <span style="width: 24%; padding: 0; position: relative; left: -2%;">
       Type of Artwork</span>
   <span style="width: 24%; padding: 0; position: absolute; left: -2%; bottom: 30%;"
      class="label-sm">(i.e. sculpture, painting...)</span>
   <input style="width: 70%" type="text" name="name"
      required data-errormessage-value-missing="Please enter your item's type of artwork.">
</label>
<!-- ADJUSTED BLOCK END-->

DEMO

I used inline styles for brevity and clarity. Hope this helps.

edited Aug 19 '15 at 03:16

answered Aug 19 '15 at 01:03

Michael Benjamin

346,931
104
581
701

That did it. Thanks! I'll have to work on cleaning up the CSS too. – Mario Parra Aug 19 '15 at 01:11
Though it works, there are lots of static values, which I typically consider kinda "hack-y". Do you think it's the best method in this case? Thanks again. – Mario Parra Aug 19 '15 at 01:18
Percentage values work nicely, if you want to switch to that. Whether you use fixed or relative values, you'll probably want a media query when the screen width breaks below 700px. That's when the labels begin to wrap. – Michael Benjamin Aug 19 '15 at 01:24
That could work. As we all do, I just try to accomplish anything in the least amount of code possible. Also keeping responsiveness in mind. Thanks! – Mario Parra Aug 19 '15 at 01:27
Like I mentioned, your form layout starts to break when the screen resizes below 700px width. But this isn't unique to this form element and my answer doesn't cause any unique breaks. This form element goes when the entire form goes. – Michael Benjamin Aug 19 '15 at 01:38
Yeah, that's expected. I'll write specific styles in a media query later. I'll test this out! – Mario Parra Aug 19 '15 at 01:40
Sounds good. Also, if you're not sold on this method let me know. I've used CSS positioning properties because it's simple, stable and effective. But the task can also be achieved with HTML tables, CSS table properties, and (possibly) CSS Flexbox. – Michael Benjamin Aug 19 '15 at 01:52
I'm not completely, mostly because I expected a more re-usable method, I guess, but I really appreciate your help. I thought it would've just taken a few floats, displays, and text-aligns instead of manual positionings. I don't think I want to use HTML tables, but if you're wiling to try something else, please go ahead! – Mario Parra Aug 19 '15 at 02:10
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/87331/discussion-between-michael-b-and-mario-parra). – Michael Benjamin Aug 19 '15 at 03:04

Axel · Answer 4 · 2015-08-19T00:51:06.603

If i get you right this should work for you - just add float: none; to #appraisals-form span.label-sm.

Here is the whole css:

.contact-form {
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    max-width: 600px;
    font-family: 'LinotypeUniversW01-Thin_723604', Arial, sans-serif;
    font-size: 20px;
}

.contact-form label {
    display: block;
    margin: 0px 0px 15px 0px;
    text-transform: uppercase; /* New */
}

.contact-form label > span {
    padding-top: 8px;
}

.contact-form label > span, #recaptcha::before {
    width: 100px;
    text-align: right;
    float: left;
    padding-right: 20px;
    content: "";
}

.contact-form input, .contact-form textarea {
    margin-bottom: 15px;
    padding: 10px;
    border: none;
}

.contact-form input.input-field {
    width: 70%;
    height: 20px;
    font-size: 18px;
}

.contact-form .textarea-field {
    height: 250px;
    margin-bottom: 11px;
}

.contact-form .textarea-field, .g-recaptcha {
    width: 70%;
    font-size: 18px;
    display: inline-block;
}

.g-recaptcha {
    height: 78px !important;
}

#recaptcha {
    display: block;
    margin: 0px 0px 24px 0px;
}

textarea {
    resize: none;
}

textarea:focus, input:focus {
    outline: 0;
}

input.submit-button {
    background-image: url("../img/submit-button.jpg");
    width: 225px;
    height: 60px;
    border: none;
}

.appraisals .section-title {
    width: 100%;
}

#appraisals-form {
    width: 100%;
    max-width: 700px;
    top: auto;
    transform: none;
}

#appraisals-form label > span {
    width: 150px;
    font-size: 16px
}

#appraisals-form span.label-sm {
    display: block;
    font-size: 14px;
    text-transform: none;
    float: none;
}

#appraisals-form input, #appraisals-form textarea {
    background-color: #d7d7d7;
}

#appraisals-form textarea {
    height: 100px;
}

#appraisals-form .centred-button {
    text-align: center;
}

hope it helps :)

Further explanation

The problem was caused by float: left; at .contact-form label > span which floatet your span in general.

That got the spans on two lines, but now the input field is left-aligned: http://jsfiddle.net/tcap2Lcp/1/. — Mario Parra, Aug 19 '15 at 00:49
best practice would be to show up a picture that shows the whole form how you want it to look like... — Axel, Aug 19 '15 at 00:55
Well, I haven't finished building the whole form yet, but this is the intended layout: http://i.imgur.com/CkOKeWl.jpg. — Mario Parra, Aug 19 '15 at 00:57

score 0 · Answer 5 · answered Jun 06 '17 at 11:36

0

The easyest way is to add this class to CSS :

label {float: left; width: 10em; margin-right: 1em; text-align: right;}

answered Jun 06 '17 at 11:36

Oussama Mansouri

1

it's not a good idea to target ALL the labels, better scope it to `.contact-form > form > label` – Ovidiu Dolha Jun 06 '17 at 11:59

Align multiple labels to left of form input

5 Answers5

Further explanation