CODEWITHSUNDEEP
htmlcssforms
Jerry D
Jerry D

Reputation: 391

Put a <label> and <input type="text"> tag in the same row

I am trying to create a <form> as part of a project, which has text inputs with a label before them. I am trying to put the <label> and the <input> on the same line, aligned to the right side like this example project:

correct result

Here is the code I have attempted to use:

.labelrow {
  text-align: right;
  vertical-align: top;
}

.inputrow {
  display: inline-block;
  text-align: left;
  vertical-align: top;
}
<form id="survey-form">
  <div class="labelrow">
    <label id="name" for="name">* Name:</label></div>
  <div class="inputrow">
    <input type="text" id="name" class="input-field" required placeholder="Enter your name"></div>

  <div class="labelrow">
    <label id="email" for="email">* Email:</label>
  </div>
  <div class="inputrow">
    <input type="email" id="name" class="input-field" required placeholder="Enter your email">
  </div>
</form>

This code gives me the result of this:

my result

The <label> are aligned correctly, but the <input> are on the other line. What can I fix to get both on the same line and aligned to the right like the example?

Upvotes: 2

Views: 6429

Answers (5)

zer00ne
zer00ne

Reputation: 43950

Remove the <div>s and add a <br> after each <input>. Add the following to both <label> and <input>:

display: inline-block;
height: 1.2rem; 
line-height: 1.2rem;
vertical-align: middle;

height and line-height can be adjusted but keep them equal to each other. Set <form> width to 100vw and of course text-align: right on <label>s. Place the <label>s and <input>s into a <fieldset> and assign the following to the <fieldset>

width: 50vw;
margin-left: 40vw;
border: 0px none transparent

BTW the <label>s have a duplicate #id which is invalid, therefore removed.

Demo

html,
body {
  width: 100%;
  height: 100%;
  font: 400 16px/1.2 Raleway;
  background: #FBFBFB;
}

form {
  width: 70vw;
}

fieldset {
  width: 50vw;
  text-align: right;
  margin-left: 20vw;
  border: 0px none transparent;
  background: none;
}

legend {
  width: 70vw;
  text-align:center;
  margin: 0 auto;
}

label,
input,
button {
  display: inline-block;
  height: 1.2rem;
  line-height: 1.2rem;
  vertical-align: middle;
  padding-left: 5px;
  margin-top: 15px;
  font: inherit;
}

input {
  width: 60%;
  max-width: 300px;
  border-radius: 4px;
}

label {
  width: 30%;
  text-align: right;
}

button {
  height: 1.5rem;
  padding: 0 5px;
  margin: 0 0 0 auto;
  float: right;
  cursor:pointer;
}

sup {
  display:inline-block;
  width: 25%;
  margin-left: 70%;
  margin-top: 10px;
  text-align: right;
}
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

<form id="survey-form">

  <fieldset>
  
    <legend>Let us know how we can improve freeCodeCamp</legend>

    <label for="name">* Name:</label>

    <input id="name" type="text" placeholder="Enter your name" required><br>

    <label for="email">* Email:</label>

    <input id="email" type="email" placeholder="Enter your email" required><br>

    <label for="age">* Age:</label>

    <input id="age" type="number" placeholder="Enter your age" min='18' max='120' required><br>

    <sup>* Required</sup>
    
    <button type='submit'>Submit</button>

  </fieldset>
  
</form>

Upvotes: 1

Jon P
Jon P

Reputation: 19802

Potentially the simplest option is to put the input inside the label. Make the label a block item with text align right.

label {
  display:block;
  text-align:right;
  margin: 5px;
}
<form id="survey-form">
  
    <label id="name" for="name">* Name: <input type="text" id="name" class="input-field" required placeholder="Enter your name"></label>
    <label id="email" for="email">* Email: <input type="email" id="name" class="input-field" required placeholder="Enter your email"></label>
</form>

Upvotes: 2

Andy Hoffman
Andy Hoffman

Reputation: 19119

Solution

  • House both label and input into a single div
  • Add display: flex to the parent so you can have more flexibility styling your fields on small screens. For example, you could move the label above the input on small screens when viewport space is limited using flex-direction: column
  • labels typically don't have ids. Instead, they point to form elements containing ids. I've fixed your labels in the following code
  • Duplicate ids are a no-no as well (also fixed)

.row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.input-field {
  margin-left: 1em;
  padding: .5em;
  margin-bottom: .5em;
}
<form id="survey-form">
  <div class="row">
    <label for="name">* Name:</label>
    <input type="text" id="name" class="input-field" required placeholder="Enter your name">    
    </div>

  <div class="row">
    <label for="email">* Email:</label>
    <input type="email" id="email" class="input-field" required placeholder="Enter your email">    
  </div>
</form>

Upvotes: 2

user7974621
user7974621

Reputation:

By enclosing both elements into the same "div" you can align them together in a row.

<form id="survey-form">
    <div class="inputrow">   
        <label id="name" for="name">* Name:</label>
        <input type="text" id="name" class="input-field" required placeholder="Enter your name">
    </div>
    <div class="inputrow">   
        <label id="email" for="email">* Email:</label>
        <input type="email" id="name" class="input-field" required placeholder="Enter your email">
    </div>
</form>

By default, "div" tags always place a line break before and after they're inserted.

Upvotes: 1

Guy Hoozdis
Guy Hoozdis

Reputation: 159

When you wrap each in their own div you get the stacking that you are seeing. Put both the label and the input into a single div.

Upvotes: 0

Related Questions