Survey Form - Build a Survey Form

HTML-CSS
1

Hi i am a beginner!
How do i make the name, email etc. should be a descendant of #survey-form .?

Thats my index.html

<!DOCTYPE html>
<html lang="en">
  <link rel="stylesheet" href="styles.css" />
<fieldset>
  <h1 id="title">Planitright Survey Form</h1>
<p id="description"> Planitright is here to make travel a pleasure. </p>
<form  id="survey-form"> 
  <label id="name-label"  >Enter Your Name: 
<input id="name" type="text" placeholder="Name" required> </input> </label>
<label id="email-label"> Enter Your Email: <input id="email" type="email" placeholder="Email" required> </input> </label>
<label id="number-label"> Enter Your Age:<input min="13" max="120" id="number" type="number" placeholder="Age" required> 
</fieldset>
<fieldset>
How often do you travel per year?
  <label> <input id="once-year" type="radio" name="how-often" value="1" /> Once a year</label>
  <label> <input id="2-3-year" type="radio" name="how-often" value="2"  /> 2-3 times a year</label>
 <label> <input id="more-3-year" type="radio" name="how-often" value="3" /> More than 3 times a year</label>      </fieldset>
<fieldset>
 <label >What type of traveller are you?
          <select id="dropdown"> 
            <option class="box" value="1">(select one)</option>
            <option class="box" value="2">Leisure traveller</option>
            <option class="box" value="3">Business Traveller</option>
            <option class="box" value="4">Adventure Traveller</option>
                    <option class="box" value="5">Budget Traveller</option>
          
          <option value="5">Luxury Traveller</option>          
           
            <option value="4">Other</option>
          </select>
        </label> </fieldset>
        <fieldset> 
What type of destination do you prefer?
<label> <input type="checkbox" class="box" value="1" > Beach </label>
<label> <input type="checkbox" class="box" value="2" > City </label>
<label> <input type="checkbox" class="box" value="3" > Mountains </label>
<label> <input type="checkbox" class="box" value="4" > Countryside </label>
<label> <input type="checkbox" class="box" value="5" > Cultural </label>
<label> <input type="checkbox" class="box" value="6" > Adventure </label>
</fieldset>
  <fieldset> <label> Any comments or suggestions?
 <textarea id="comments" name="comments" rows="5" cols="50" placeholder="Start typing here..." ."> </textarea>
 </fieldset>
 </label>
      <input id="submit" type="submit" value="Submit" />
    </form>
2

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.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

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

3

if this is the form #survey-form, then to make descendant elements, write them nested within the form element, such that, the form closing tag </form> comes after the child elements.

4

Thanks for your reply.
I am just very new at this (started this week) Can you please give the exact code i should write in order to connect the #name etc. to survey-form?

5

i can’t give you the code, no. Why don’t you try to do it yourself?
We can help you if you are struggling with something specific.
(Please include a link to the challenge/project and your follow up question in your reply and we can go from there)

6

Validate your HTML.

https://validator.w3.org/nu/#textarea

Without the proper HTML syntax and structure, the browser is trying its best to make it work. In your case, the form is inside a fieldset element and gets auto closed as it can not be closed outside its parent element.

1 Like