Survey Form - Build a Survey Form Project

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width device"/>
    <title>Surveyform</title>
    <style>
body {
  width: 100%;
  height:100vh;
  margin: 0;
  font-size: 16px;
}
h1,
p {
  text-align: center;
  margin: 1em auto;
}
form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 20em;
}
fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 2px solid blue;
}
/* fieldset:last-of-type {
  border-bottom: none;
} */
label {
  display: block;
  margin: 0.5rem 0;
}
input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 30px;
}
input,
textarea {
  border: 1px solid black;
}
.inline {
  width: unset;
  margin: 0 0.2em 0 0;
  display: block;
}
input[type="submit"] {
  display: block;
  width: 50%;
  margin: 2em auto;
  height: 5em;
}


    </style>
  </head>
  <body>
    <h1 id="title">Customer Review</h1>
    <p id="description"> We appreciate your participation in our industry. Please take the survey and leave a remark below to help with future improvement. </p>
    <form id="survey-form" method="get">
      <fieldset>
        <label id="name-label">First Name:
          <input id="name" type="text" placeholder="Enter Your First Name" required>
        </label>
        <label for="lastname">Last Name:
          <input id="name" type="text" placeholder="Enter Your Last Name" required>
        </label>
        <label id="email-label">Email:
          <input id="email" type="email" placeholder="Enter your Email" required>
        </label>
        <label id="number-label">Age(optional):
          <input id="number" type="number" placeholder="Enter Your Age" min="10" max="100">
        </label>
        
      </fieldset>
      <fieldset>
        <label>Do you use skincare products?
          <select id="dropdown">
          <option>Yes</option>
          <option>No</option>
        </select>
        </label>
        <label >Is having good skin important to you?
          <input type="radio" name="Yes" value="yes" class="inline">Yes</input>
          <input type="radio" name="no" value="no" class="inline">No</input>
          <input type="radio" name="None of above" value="none" class="inline">None of above</input>
        </label>
        <label>Which, if any of the following statements applies to you?
      <input type="checkbox"   value="option" class="inline">I have oily skin</input> 
      <input type="checkbox" value="option" class="inline">I have dry and dull skin</input> 
      <input type="checkbox" value="option" class="inline">I have suffered redness and sensitivity</input>     
      <input type="checkbox" value="option" class="inline">I have acne</input> 
      <input type="checkbox" value="option" class="inline">I have wrinkles</input> 
        </label>
        <label>Give us feedback?
          <textarea cols="40" rows="5"></textarea>
        </label>
      </fieldset>
      <input id="submit" type="submit">
        

    </form>
  </body>
</html>

hello guys, I was trying to make radio and checkbox on the same line with the given option. I need suggestions on how to make it?

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

Did you have a question?

yes, I have. Sorry , I am new here and was just editing the question in the post. now I have posted the question.

It looks like your min-height: 30px; is messing with your desired output.
I would suggest commenting that out for now

I would also suggest restrucuturing your HTML to have labels with corresponding inputs like this

  <p>Is having good skin important to you? </p>
    
      <label>
          <input type="radio" name="Yes" value="yes" class="inline">Yes
          </label>
      <label>
          <input type="radio" name="no" value="no" class="inline">No
              </label>
      <label>
          <input type="radio" name="None of above" value="none" class="inline">None of above    </label>

also removing the display block for labels and inputs will help

then you will start to see the changes you are after

Screenshot 2024-04-15 at 5.57.43 AM

then you adjust spacing from there

hope that helps

Also as sidenote, you will need to remove all of the </input>

hey , CAN you tell me what does this “Every radio button group should have at least 2 radio buttons.” means?

You should have same name attribute "value" for a group of input type="radio.
Also you have a separate css file in the project editor for styling your html elements. Move your all css styling to that file and create <link rel="stylesheet href="styles.css> element between head opening and closing tags.
@subashchhetri946

hey , sorry but this didn’t work . after changing and running the test, still showing that “Every radio button group should have at least 2 radio buttons.”

Post your updated code.
@subashchhetri946

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width device"/>
    <title>Surveyform</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1 id="title">Customer Review</h1>
    <p id="description"> We appreciate your participation in our industry. Please take the survey and leave a remark below to help with future improvement. </p>
    <form id="survey-form" method="get">
      <fieldset>
        <label id="name-label">First Name:
          <input id="name" type="text" placeholder="Enter Your First Name" required>
        </label>
        <label for="lastname">Last Name:
          <input id="name" type="text" placeholder="Enter Your Last Name" required>
        </label>
        <label id="email-label">Email:
          <input id="email" type="email" placeholder="Enter your Email" required>
        </label>
        <label id="number-label">Age(optional):
          <input id="number" type="number" placeholder="Enter Your Age" min="10" max="100">
        </label>
        
      </fieldset>
      <fieldset>
        <label>Do you use skincare products?
          <select id="dropdown">
          <option>Yes</option>
          <option>No</option>
        </select>
        </label>
        <label >Is having good skin important to you?
          <input type="radio" name="Yes" value="yes" class="inline">Yes</input>
          <input type="radio" name="no" value="no" class="inline">No</input>
          <input type="radio" name="None of above" value="none" class="inline">None of above</input>
        </label>
        <label>Which, if any of the following statements applies to you?
      <input type="checkbox"   value="option" class="inline">I have oily skin</input> 
      <input type="checkbox" value="option" class="inline">I have dry and dull skin</input> 
      <input type="checkbox" value="option" class="inline">I have suffered redness and sensitivity</input>     
      <input type="checkbox" value="option" class="inline">I have acne</input> 
      <input type="checkbox" value="option" class="inline">I have wrinkles</input> 
        </label>
        <label>Give us feedback?
          <textarea cols="40" rows="5"></textarea>
        </label>
      </fieldset>
      <input id="submit" type="submit">
        

    </form>
  </body>
</html>

body {
  width: 100%;
  height:100vh;
  margin: 0;
  /* background-color: black; */
  /* color: white; */
  font-size: 16px;
}
h1,
p {
  text-align: center;
  margin: 1em auto;
}
form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 20em;
}
fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 2px solid blue;
}
/* fieldset:last-of-type {
  border-bottom: none;
} */
label {
  display: block;
  margin: 0.5rem 0;
}
input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 30px;
}
input,
textarea {
  border: 1px solid black;
}
.inline {
  width: unset;
  margin: 0 0.5em 0 0;
}
input[type="submit"] {
  display: block;
  width: 50%;
  margin: 1em auto;
  height: 5em;
}

input[type="checkbox"] {
  display: block;
}
.inline {
  display: inline;
}```

The name attribute "value" should be same for all radio inputs.
@subashchhetri946

thanks finally done .

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.