Can't align Form Elements

HTML-CSS
1

I’m currently building a form for a project but the form elements are all in a new line each (to clarify: the label is in one line and the input of it is in the next line, instead of next to it).

Here’s the image of the problem:
10

I have the following HTML code:

**<!-- Name -->**
      <div class="rowTab">
      <div class="labels">
        <label id="label-name">
          * Name           
        </label>
      </div>
      
      <div class="rightTab">
          <input type="text" required  placeholder="Enter your name"  id="name" class="input- 
          field" name="Name" autofocus>
      </div> 
      </div>
      
**<!-- Age -->**  
      <div class="rowTab">
      <div class="labels">
        <label id="label-age">* Age:             </label>
      </div>    

  <div class="rightTab"> 
	   <input type="number"  type="number"  required name="Age"                      
           placeholder="Age"  id="number" min="1" max="125"class="input-field">                                   
 </div>
      </div>
      
**<!-- Email -->** 
     <div class="rowTab">
     <div class="labels">
        <label id="label-email">* Email:         </label> 
     </div>
       
     <div class="rightTab">
      <input type="email" 
		 pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,63}$" 
		 required placeholder="Enter your email" name="name" id="email" class="input- 
                 field">      
      </div> 
      </div>
      
     </form>
     </div>

And the corresponding CSS is:

body {
  background-color: #a9d7d1;
  color: black;
  font-family: 'Montserrat', sans-serif;
  font-weight: normal;
  display: block;
  margin: 8px;
  text-align: center;
}

.outer-form {
  background-color: #FFFFFF;
  padding: 20px;
  margin: 0 auto;
  box-shadow: 2px 2px 15px #78ADA6;
  max-width: 900px;
  border-radius: 4px;
}

.input-field {
  font-family: 'Montserrat', sans-serif;
  padding: 4px;
  margin: 0px 20px 0px 20px;
  line-height: 15px;
}


labels {
  display: inline-block;
  width: 240px;
}

.rightTab {
  display: inline-block;
  width: 240px;
}

.rowTab {
  text-align: center;
  display: block;
  width: 40px;
}

form {
    display: inline-block;    
    margin-top: 0em;
    width: 25%;
}

What am I doing wrong??

2

Also, any clues on why the ‘age’ input looks different from the name and email inputs?

3

Hi martaramos,

Try to style labels class with display: inline-block;

4

You have extra spaces in writing class name class=“input-field” for name and email inputs.

5

Hello Sara, thank you for responding, I have already changed both things and the form looks like this:

13

My CSS is:

.labels {
  width: 240px;
  display: inline-block;
}

Everything else I’ve kept everything else (CSS and HTML) the same

6

Could you put code in codepen to be easily reviewed?

7

you should link the input with the label

as you don’t have them nested you should use the for attribute to link the label to the input, to make it more accessible for screen reader users (and being able to select the button clicking on the label too)

1 Like
8

Yes sure, here’s the link: https://codepen.io/marta2804/pen/XWrKwjZ

9

I have never done that before, is it done like this (inside the input)?

aria-labelledby="label-email"

How exactly does it make it more accessible for screen reader users?

10

No, it’s like this:https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons

1 Like
11

I don’t know how but I finally solved the problem, for anyone who wants to see the code, here’s the link: https://codepen.io/marta2804/pen/XWrKwjZ

12

no, you need to put a for attribute on the label element, with a value equal to the id of the corresponding id element

like in this challenge: https://learn.freecodecamp.org/responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element

1 Like
13

use flexbox and u will get what u want on easy way

1 Like