Stuck on Survey Form (Your #name should require input.)

Hi everyone,

I’m stuck at this point and don’t really understand what this task means.
I’ve added the “id” and also “name” attribute. Been a while , still cant figure it out.

Appreciate any kind of help or further tip,

Regards,

My Code:


HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Survey Form</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <div id="container">
    <h1 id="title">Tirana Coding Camp(TCC) Survey Form</h1>
    <p id="description">Thank you for taking the time to help us improve the platform</p>   
    <form id="survey-form">
      
      <fieldset>
        <label id="name-label">Name <input type="text" id="name" name="name"  placeholder="Enter your name" /> </label>
        <label id="email-label">Email <input type="email" id="email" name="email" placeholder="Enter your Email" /> </label>
        <label id="number-label">Age (optional) <input type="number" id="number" name="Age" placeholder="Age" min="12" max="99" /> </label>
        
        
      </fieldset>

      <fieldset>
        <label>Which option best describes your current role?
          <select id="dropdown" name="role">
            <option>Select current role</option>
            <option>Student</option>
            <option>Full Time Job</option>
            <option>Full Time Learner</option>
            <option>Prefer not to say</option>
            <option>Other</option>

          </select>
        </label>

        <label>
          Would you recommend TCC to a friend?
          <input type="radio" name="user-recommend" value="definitely" class="inline" />Definitely
        </label>

         <label>
          <input type="radio" name="user-recommend" value="maybe" class="inline" />Maybe
        </label>

         <label>
          <input type="radio" name="user-recommend" value="not sure" class="inline" />Not sure
        </label>

        <label>What is your favorite feature of TCC?
          <select id="dropdown" name="fav_feature">
            <option value="">Select an option</option>
            <option value="1">Challenges</option>
            <option value="2">Projects</option>
            <option value="3">Community</option>
            <option value="4">Open Source</option>
          </select>
        </label>
      </fieldset>
  
      <fieldset>
        <label>What would you like to see improved? (Check all that apply)
          <input type="checkbox" name="prefer" value="front-end-projects" class="inline" />Front-end Projects
        </label>
        <label>
          <input type="checkbox" name="prefer" value="back-end-projects" class="inline" />Back-end Projects
        </label>
        <label>
          <input type="checkbox" name="prefer" value="data-visualization" class="inline" />Data Visualization
        </label>
        <label>
          <input type="checkbox" name="prefer" value="challenges" class="inline" />Challenges
        </label>
        <label>
          <input type="checkbox" name="prefer" value="open-source-community" class="inline" />Open Source Community
        </label>
        <label>
          <input type="checkbox" name="prefer" value="gitter-help-rooms" class="inline" />Gitter help rooms
        </label>
        <label>
          <input type="checkbox" name="prefer" value="videos" class="inline" />Videos
        </label>
        <label>
          <input type="checkbox" name="prefer" value="city-meetups" class="inline" />City Meetups
        </label>
        <label>
          <input type="checkbox" name="prefer" value="wiki" class="inline" />Wiki
        </label>
        <label>
          <input type="checkbox" name="prefer" value="forum" class="inline" />Forum
        </label>
        <label>
          <input type="checkbox" name="prefer" value="additional-courses" class="inline" />Additional Courses
        </label>

        <label>
          Any comments or suggestions? <textarea name="suggestions" rows="5" cols="60" placeholder="Enter your comment here..."></textarea>
        </label>
      </fieldset>
      <input id="submit" type="submit" value="Submit" >

    </form>
    </div>
  </body>

</html>

CSS

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  /*
  background-image:url(https://thumbs.dreamstime.com/b/survey-tablet-computer-man-holding-134040615.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  */
  background-color: 	#2F4F4F;
  font-family: 'Tahoma', sans-serif;
  font-size: 1rem;
  color:white;
}

#container {
  background-color: black;
  margin: 2rem 15%;
}

h1, p {
  margin:1em auto;
  color:white;
  width:100%;
  position:relative;
  text-align: center;

  
}

form {
  width: 60vw;
  ;
  max-width: 550px;
  min-width: 300px;
  margin:0 auto;
  padding-bottom: 2em;
  
}

fieldset {
  padding:2rem 0;
  border:none;

}

label {
  display:block;
  margin: 0.5rem 0;
  
}

input,textarea, select {
  background-color:#203737;
  margin:10px 0 0 0;
  width:100%;
  min-height:1em;
}

input, textarea {
  
  border: 1px solid #0a0a23;
  color: #ffffff;
  border:none;
}

::placeholder {
  color:white;
  opacity: 1;
}

.inline{
  width:unset;
  margin:0 0.5rem 0 0;
  vertical-align: center;
}

input[type="text"] {
  margin: 0 0;
}

input[type="submit"] {
  display:block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.0rem;
  border: solid 1px white;
  min-width: 300px;
}

#dropdown {
  color:white;
}

Your browser information:

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

Challenge: Build a Survey Form

Link to the challenge:

your first radio button should be checked by default

Appreciate your tip, yeah that is correct but my question is not related to that topic.

You need to use required attribute for both inputs.

Wow, yeah right. That solved the issue. Thanks a lot buddy !

Just to ask you an additional question related to CSS. Do you have any idea how can I move those labels as a new Line. Tried a couple of things but haven’t figure it out yet.
You can check the photo as below: (as for the codes you can find them attached up on the main article):

@gertihysenaj06 You have not given a label tag to Definitely text, label is set as a block level element in your css file so when you wrap an input element around it, it will be on a new line

Have you tried using <br>?

1 Like

You can also wrap the questions in a p element outside of the label element.

2 Likes

Actually I’m not much into “breaks”. Usually “breaks” are a indicator of poor semantic elements. Their main use in within Poems, address ect.
I think I should go with “p” element outside the label, even though I’m sure that there is another way.
Thanks again

1 Like

I like your mindset, that’s true. I find br to be a lazy way of solving a problem, too. Lol

1 Like

@spark07 I think I should go with that. I don’t know why I think there is a better way though. I think thats because I compare it with this example:


The text is not within “p” element but the input to width 100% makes it start on a new line.

I try to apply same on my own code , it works but then the inline structure beetween radio buttons and text falls out. I try it to add “width:unset” than it goes up back again.

So I guess I should better go with paragraph element. I assume that’s the only recommended option.

Thank you mate !!

Cheers,

2 Likes

The text is not wihin a p tag cause in that case, that text is the label text.

But in your case : the option text Definitely is the label text and not the question.(The label text for the input)

I also wanna add that the class inline is there to “unset” the width of the inputs, so by just removing it (or commenting it) , the radio inputs will once again have a width of 100%.

1 Like

I’ve created this form using other block elements those makes styling much easier.

codepen demo

image

2 Likes