Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

how do I get dropdown and the text in same line?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Videogames Survey Form</title>
  <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header class="header">
    <h1 id="title">Videogames Survay Form</h1>
    <p id="description">thank you for helping us to improve video games expirience</p>
    <header>
    <form id="survey form">
      <div class="form-group">
      <label id="name-label" for="name">Name</label>
     <input 
     id="name"
     type="text"
     name="name"
     placeholder="enter your name"
     class="info"
     required/>
     </div>
     <div class="form-group">
     <label id="email-label"" for="email">Email</label>
       <input 
      id="email"
      type="email"
      name="email"
      placeholder="enter your email"
      class="info"
      required/>
       </div>
       <! staviti error ako nisi stavio email (korak 6)-->
    <div class="form-group">
      <label id="number-label" for="number">Age<span class="clue">(optional)</span></label>
      <input
      id="number"
      type="number"
      name="age"
      placeholder="Age"
      class="info"
      min="6"
      max="99"/>
      <div class="form-group">
        <p>What type of games do you play?</p>
<select id="dropdown" class="form-control"></select>

</div>
    </form>
    <div>
      <button type="submit" id="submit" class="submit-button">
            Submit
          </button> 
    </div>  
  </body>  
</html>

/* file: styles.css */
body{
  color:#000000
}
h1{
  text-align:center;
}
p{
  text-align:center;
}
.info{
  background-color: 
}
div{
  color:#000000
}
label{
  color:#000000
}
.form-control{
  display: block;
  margin:0;
  width:10%;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Challenge Information:

Survey Form - Build a Survey Form

2

Hi there,

To make 2 elements appear in a same line, you can use Flexbox.

But if you haven’t learnt about Flexbox yet (you will learn later in the Responsive Web Design Certification),
then instead of using paragraph p (block type element) for the label text, you can use label (inline type element) to make the label text and the dropdown appear on the same line.

You also will learn about the differences block type element and inline type element later.

Side note:

There are lots of issues with your code.

You can use a HTML validator tool like this one:

to check for issues in your code.

1 Like
3

hi there!

check the Form Building challenge. you previously learned that in it. that how to make two inline elements to be appears on the same line. spacially for radio and checkboxs.